بزرگنمایی ( زوم ) تصاویر در javascript با کمک jquery
بزرگنمایی تصاویر در javascript – حتما در خیلی از فروشگاه های اینترنتی شاهد این بوده اید که امکان زوم و بزرگنمایی تصاویر محصول بدون از دست دادن کیفیت وجود داشته است .
در این آموزش بزرگنمایی تصاویر را بدون افت کیفیت انجام می دهیم با کمک کتابخانه jquery و پلاگین blowup .
کار با این پلاگین بسیار آسان است و به راحتی می توانید هر تصویری که تمایل دارید را بزرگنمایی کنید .
کار با پلاگین blowup برای بزرگنمایی تصاویر
این پلاگین به کتابخانه jQuery وابسته است پس باید ابتدا اضافه شود و سپس خود پلاگین blowup
<script src="lib/jquery.min.js"></script>
<script src="lib/blowup.min.js"></script>
اکنون باید یک تصویر را با تگ img اضافه کنید :
<img id="gallery" src="img/Nissan-Nismo.jpg" alt="">
احتمال دارد که تصویر دارای رزولوشن بالایی باشد بنابراین عرض آن را بر اساس 80 درصد صفحه مانیتور تنظیم می کنیم که خارج از صفحه مرورگر نباشد .
#gallery{
width : 80%;
}
در قدم آخر تصویر مورد نظر را با jQuery انتخاب کرده و بزرگنمایی را با تابع blowup اعمال می کنیم .
$(document).ready(function(){
$("img").blowup({
width : 100, // طول لنز
height : 100, // ارتفاع لنز
scale : 1, //مقیاس بزرگنمایی
background : '#f44336', // رنگ پس زمینه در صورتی که از تصویر بیرون رفت
border : '2px solid white', // حاشیه لنز
round : true, // اینکه لنز گرد باشد یا خیر
shadow : 'none' // ویژگی های سایه
});
})
دموی پروژه :
ارسال نظر