بزرگنمایی ( زوم ) تصاویر در 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' // ویژگی های سایه
       });
     })

دموی پروژه :

دانلود بزرگنمایی تصاویر در javascript