در این آموزش ، کتابخانه جاوا اسکریپت ساده ای  برای اضافه کردن  افکت zoom  به تصاویر  خواهیم ساخت. این کتابخانه را  از ابتدا و بدون تکیه بر   jQuery یا هر  وابستگی خارجی دیگری خواهیم ساخت.

پروژه ایجاد زوم تصاویر

شما  این  نوع افکت ها را در بسیاری از سایت های فروشگاهی مانند eBay و Amazon مشاهده می کنید.  معمولا  شامل گروهی از تصاویر کوچک که هرکدام می تواند بزرگ شده و جزییات بیشتری از آن  با یک ذره بین مشاهده شود.

دراین آموزش ساده ویژگی های زیادی را به  کتابخانه اضافه نخواهیم کرد، بلکه فقط شامل یک فایل جاوا اسکریپت  بهمراه یک css برای  استایل دهی به گالری خواهد بود.

طراحی کتابخانه

قبل از اینکه ساختن  کتابخانه را شروع کنیم ، بیایید نگاهی بیاندازیم و ببینیم کاربران چگونه از آن استفاده خواهند کرد. اگر ابتدا تصمیم بگیرید که میخواهید  چه چیزی   طراحی  کنید ، پیاده سازی کتابخانه در گام بعدی راحت تر خواهد بود.

ازآنجا که  میخواهیم پلاگین  گالری طراحی کنیم ، کاربرانی که  از این پلاگین استفاده خواهند کرد به boilerplate  HTML  نیاز دارند.  این نشانه گذاری شامل تصاویر ، div  های خالی برای  افکت zoom و همچنین  برخی از کلاس های از پیش تعریف شده است که  برای  ایجاد کتابخانه  استفاده می شود.

<div id="my-gallery" class="vanilla-zoom">

    <div class="sidebar">

        <img src="images/image-1.jpg" class="small-preview">

        <img src="images/image-2.jpg" class="small-preview">

        <img src="images/image-3.jpg" class="small-preview">

    </div>

    <div class="zoomed-image"></div>

</div>

کاربران برای ایجاد تغییرات در  در طرح  آزاد هستند و می توانند تصاویری که  میخواهند را اضافه کنند. این نکته مهم است که هر تصویر داخل کلاس  .small-preview قرار می گیرد.  همچنین  یک کلاس خالی به نام  .zoomed-image هم وجود دارد.

این کتابخانه بیشتر با استفاده از java script اجرا میشود اما  تعداد کمی کد  css  مهم برای تنظیم  سبک و ظاهر  نیاز است. کاربران می توانند مستقیما فایل css را در html خود include  نمایند.

<link rel="stylesheet" href="vanilla-zoom/vanilla-zoom.css">

حالا این نشانه گذاری و استایل  تنظیم شده است،   تنها چیزی که باقی مانده،  این است که کتابخانه کد را وارد کرده و مقدار دهی نمایید.

<script src="vanilla-zoom/vanilla-zoom.js"></script>

<script>

    vanillaZoom.init('#my-gallery');

</script>

با Include کردن فایل .js کتابخانه ، آبجکت  vanillaZoom  تبدیل به  متغیر Global می شود. این پروژه صرفا  یک متد دارد که  برای آماده سازی پلاگین به کار می رود. این متد یک پارامتر را  بعنوان آی دی  گالری دریافت می کند.

با این روش شما می توانید  در یک صفحه وب چند گالری  مستقل داشته باشید.

توسعه  کتابخانه

زمانی که کتابخانه font-end  جاوااسکریپت را  آماده شد،  باید مطمئن شویم که API آن را نیز به درستی ثبت کرده ایم. راه های زیادی برای اینکار وجود دارد ، آسانترین راه استفاده از  این متد که توسط    Jordan Checkman  نوشته شده، است.

توصیه میکنیم وبلاگ او را بطور کامل مطالعه کنید در این قسمت ، این متد را  بصورت مختصر مشاهده می کنید:

(function(window) {
    function define_library() {
        // Create the library object and all its properties and methods.
        var vanillaZoom = {};
        vanillaZoom.init = function(galleryId) {
            // Our library's logic goes here.
        }
        return vanillaZoom;
    }

    // Add the vanillaZoom object to global scope if its not already defined.
    if (typeof(vanillaZoom) === 'undefined') {
        window.vanillaZoom = define_library();
    } else {
        console.log("Library already defined.");
    }
})(window);

کد بالا در یک تابع قرار داد که به تنهایی اجرا می شود. به این صورت که، زمانی که فایل vanilla-zoom.js  به پروژه خود اضافه می کنیم، کتابخانه  بصورت اتوماتیک ذخیره شده و آبجکت  vanillaZoom   بهمراه تمام  متد ها برای استفاده کاربر  اماده می شود.

کتابخانه ما فقط یک متد –  vanillaZoom.init(galleryId)  دارد که کار آن انتخاب  عناصر DOM   گالری و اضافه کردن شنونده های رویداد ها به آن عناصر است.

ابتدا باید چک کنیم آیا  عناصر مناسب به فایل html اضافه شده است سپس آن ها را انتخاب نماییم. ما از jQuery نمی توانیم استفاده کنیم پس باید به  متد های native  جاوا اسکریپت برای کار با DOM متکی باشیم .

var container = document.querySelector(el); 
if (!container) {   
    console.error('Please specify the correct class of your gallery.');   
    return;
} 
var firstSmallImage = container.querySelector('.small-preview');
var zoomedImage = container.querySelector('.zoomed-image'); 
if (!zoomedImage) {   
    console.error('Please add a .zoomed-image element to your gallery.');   
    return;
} 
if (!firstSmallImage) {   
    console.error('Please add images with the .small-preview class to your gallery.');   
    return;
} else {    // Set the source of the zoomed image.    zoomedImage.style.backgroundImage = 'url('+ firstSmallImage.src +')';}

درخط  آخر از کد بالا ، آدرس یکی از تصاویر پیش نمایش را قرار دادیم و آن را بعنوان پس زمینه عنصری که قابلیت zoom دارد ، تنظیم کردیم.   قبل از اینکه vanillaZoom.init(galleryId)    فراخوانی شود، باید مطمئن شویم که گالری  خالی نیست.

زمانیکه یکی از تصاویر پیش نمایش کلیک شد نیز همان کار را انجام می دهیم.  به کاربر اجاره  انتخاب تصویر را می دهد تا با ذره بین آن را مشاهده کند.

container.addEventListener("click", function(event) { 
    var elem = event.target;  
    if (elem.classList.contains("small-preview")) {     
        zoomedImage.style.backgroundImage = 'url(' + elem.src + ')'; 
    }
});

عنصر ذره بین دارای یک جفت شنونده ی رویداد است . اولین شنونده  زمانی که نشانگر ماوس وارد  عنصر می شود ، اندازه تصویر  افزایش یافته و بدین ترتیب افکت zoom  ایجاد می شود.

zoomedImage.addEventListener('mouseenter', function(e) {   
    this.style.backgroundSize = "250%";
}, false);

بدین ترتیب  تصویر  خیلی بزرگ شده و  هم اندازه div والد خود نیست بلکه  فقط بخشی از تصویر قابل مشاهده است. حال ما می خواهیم کاربر بتواند بخشی از تصویر را  بوسیله ذره بین انتخاب  کند پس شنونده mousemove  را  برای تغییر موقعیت پس زمینه  اضافه می کنیم :

zoomedImage.addEventListener('mousemove', function(e) {

    // getBoundingClientReact gives us various information about the position of the element.
    var dimentions = this.getBoundingClientRect();

    // Calculate the position of the cursor inside the element (in pixels).
    var x = e.clientX - dimentions.left;
    var y = e.clientY - dimentions.top;

    // Calculate the position of the cursor as a percentage of the total size of the element.
    var xpercent = Math.round(100 / (dimentions.width / x));
    var ypercent = Math.round(100 / (dimentions.height / y));

    // Update the background position of the image.
    this.style.backgroundPosition = xpercent + '% ' + ypercent + '%';

}, false);

وقتی نشانگر ماوس ذره بین را رها می کند ، تصویر باید به حالت معمولی خود برگردد. این کار به سادگی با برگرد اندن  اندازه پس زمینه به   cover   و موقعیت به center.   امکان پذیر است.

zoomedImage.addEventListener('mouseleave', function(e) {   
    this.style.backgroundSize = "cover";    
    this.style.backgroundPosition = "center";
}, false);

پشتیبانی مرورگر ها از کتابخانه Zoom گالری تصاویر

این کتابخانه  درتمام  مرورگرهای به روز دسکتاپ کار می کند، با این حال برخی از  کد های css در flexbox روی نسخه های قدیمی IE به درستی نمایش نمی یابد.

متاسفانه افکت zoom روی بسیاری از دستگاه های لمسی ترجمه نمی شود . به همین دلیل و  فضای محدود صفحه ، بجای استفاده از این کتابخانه بهتر است تصاویر خود را  به روش های دیگری روی موبایل نمایش دهید.

در  فایل css به طور پیش فرض عنصر zoom را  مخفی کرده ایم و  بصورت عمودی تصاویر را نشان میدهد  اما شما  می توانید  از راه های دیگری مثل چرخشی استفاده کنید.