آموزش ایجاد گالری تصاویر با قابلیت Zoom با جاوا اسکریپت Vanillia

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

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

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

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

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

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

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

 

 

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

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

 

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

 

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

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

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

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

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

 

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

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

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

 

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

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

 

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

 

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

 

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

 

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

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

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

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

 

نویسنده مطلب
سمیرا عظیمی

مهندسی نرم افزار خوندم و برنامه نویس هستم. عاشق رباتیک و نجوم و برنامه نویسی هستم.

دیدگاه کاربران

این وب سایت متعلق است به آذین وب (طراحی سایت در اصفهان) و تمامی حقوق آن محفوظ است.

طـبق ماده 12 فصل سوم قانون جرائم رایانه ای هرگونه کپی برداری از قالب پیگرد قانونی دارد.