تصاویر بندانگشتی برای بارگذاری سریع وبسایت و گرفتن حجم کردن از نظر فضا در وبسایت بسیار ایده‌آل هستند اما مشکلی که دارند سخت بودن در مشاهده کردن آن‌ها حتی روی صفحات بزرگ‌تر است.
با استفاده از پلاگین‌های بزرگ‌نمایی جاوااسکریپت شما هم می‌توانید تصاویر بندانگشتی داشته باشید و هم قابلیت بزرگ‌نمایی اختیاری را برای کاربران فعال نمایید. به همین دلیل ما در این مطلب قرار است شما را با ۱۲ مورد از بهترین پلاگین‌های موجود برای اضافه کردن این افکت به برگه‌های وبسایت‌تان آشنا کنیم.
خواه که شما یک وبسایت فروشگاهی داشته باشید و یا اینکه یک گالری ساده از تصاویر را در وبسایت‌تان پیاده‌سازی کنید این پلاگین‌ها مطمئنا کمک بسیار خوبی برای شما خواهند بود.
اگر دنبال افکت شناور برای بزرگ‌نمایی با حجم بسیار پایین می‌گردید، Magnify JS بهترین مورد است.
این پلاگین براساس رویداد هاور کار می‌کند، بنابراین کاربران نیاز به کلیک کردن روی آن ندارند. در حالیکه با هاور کردن شما بزرگ‌نمایی تصویر را مشاهده می‌کنید اما با این حال شما رزولوشن مناسب را نیز در اختیار دارید.
اگر می‌خواهید به کاربران کنترل‌های بیشتری را بدهید می توانید فراخوان‌های سفارشی را برای فعال یا غیرفعال کردن قابلیت زوم اضافه کنید. با استفاده از این پلاگین می‌توانید مقدار بزرگ‌کردن را نیز تغییر دهید.
ممکن است این مورد تمام ویژگی‌های مورد نیاز شما را نداشته باشد اما در هر حال پلاگینی سبک است.
در اینجا می‌توانید یک پلاگین بزرگ‌نمایی دیگر را مشاهده کنید که Blowup.js نام دارد و با استفاده از رویداد هاور کار می‌کند.
Blowup.js یک پلاگین جی‌کوئری است بنابراین برای اجرای آن به جی‌کوئری نیاز دارید. اما همچنین می‌توانید تابع را تنها با استفاده از یک خط جاوااسکریپت فراخوانی کنید.
می‌توانید با مشاهده گیت‌هاب مربوط به پروژه اطلاعات بیشتری علاوه بر نصب آن پیدا کنید. بعد از اینکه فایل‌های جاوااسکریپتی را اضافه کردید می‌توانید تابع blowup() را با پارامترهای اختیاری برای تعیین عرض/ ارتفاع، سایه، مقیاس زوم و اشاره گر ماوس قرار دهید.
بدون شک این مورد با داشتن ویژگی های اختیاری یکی از بهترین گزینه‌های موجود است.
اگر قصد دارید که از جی‌کوئری استفاده کنید، پس بهتر است نگاهی به jQuery Zoom نیز بیاندازید. این پلاگین کمی کوچک‌تر است و با رابط کاربری متفاوتی ارائه می‌شود.
وقتی این پلاگین را به برگه‌های خود اضافه کردید و یک تصویر بند انگشتی را هدف قرار دادید، براساس اندازه تصویر بندانگشتی به صورت خودکار زوم انجام می‌شود. بنابراین بجای اینکه یک المان برای زوم در نظر بگیرید می‌توانید از طریق کانتینر تصویر بند انگشتی زوم را اعمال کنید.
این ابزار با استفاده از رویداد کلیک و هاور پیاده‌سازی می‌شود، بنابراین می‌توانید از هر دو حالت استفاده کنید. برای مشاهده خروجی می‌توانید به پیش‌نمایش آن مراجعه کنید.
حجم کمتر از ۴ کیلوبایت ممکن است برای ویژگی‌هایی که Leroy Zoom ارائه می‌کند بسیار شگفت انگیز باشد.
به صفحه پیش‌نمایش برای مشاهده بهتر آن در مرورگر نگاه کنید. متوجه خواهید شد که در این پلاگین بجای قرار دادن دایره بزرگ‌نمایی در بالای تصویر، این پلاگین آن را در هر جایی از برگه که بخواهید قرار می‌دهد.
شما می‌توانید آن را براساس اشاره‌گر ماوس تغییر دهید و یا اینکه آن را در یک مکان ثابت قرار دهید.
میزان بزرگ‌نمایی در این پلاگین نیز قابل تنظیم است.
Magnifier.js کاملا خارج از اکوسیستم جی‌کوئری کار می‌کند. در حقیقت این ابزار به صورت تمام و کمال با استفاده از جاوااسکریپت نوشته شده و به شما اجازه بزرگ‌نمایی تصاویر را می‌دهد.
ویژگی منحصر به فرد این ابزار این است که قابلیت زوم از طریق اسکرول ماوس یا ترک‌پد لپ‌تاپ قابل کنترل است.
می‌توانید این مورد را روی یک تصویر یا یک گالری از تصاویر پیاده‌سازی کنید. هیچ اشتباهی در این پلاگین وجود ندارد و کار با آن بسیار ساده است.
خارج از تمام پلاگین‌های زوم تصویر Zoomple بسیار منحصر به فرد است. این مورد همراه با استایل‌های نمایشی پیش‌فرض مختلفی مانند المنت مربع و دایره همراه با المانی برای تاخیر در بارگذاری تصاویر ارائه می‌شود.
استفاده از این پلاگین برای حالت هاور بسیار مناسب است و همچنین قابلیت کنترل را دارد.
با استفاده از این پلاگین می‌توانید برای تصاویر از آدرس‌های سفارشی استفاده کنید و حتی زمان نهایی بارگذاری تصاویر را کنترل نمایید. می‌توانید موقعیت زوم را در پنجره تعیین کنید و استایل‌های منحصر به فردی را بدهید.
درست مانند نامی که دارد، EasyZoom شما را قادر می‌سازد که قابلیت زوم کردن را به آسانی با استفاده از جی‌کوئری به صفحات‌تان بیاورید. این پلاگین همچنین روی دستگاههای تاچ مانند تبلت‌ها و تلفن‌های هوشمند به خوبی کار می‌کند. ویژگی که در اکثر موارد غیر فعال است.
با زوم شدن تصویر شما می‌توانید موقعیت آن در صفحه را تنظیم کنید. این موضوع در گالری‌ها نیز به خوبی کار می‌کند. همانطور که گفته شد استفاده از این کتابخانه بسیار ساده است و قابلیت پیاده‌سازی راحتی را ارائه می دهد.
من اعتراف می‌کنم که Zoom.js نسبت به دیگر موارد متفاوت است. در این پلاگین خبری از استایل‌های زوم مانند موارد قبلی نیست.
بجای این، در این پلاگین شما با کلیک روی تصاویر آن‌ها را به پنجره پیش‌نمایش مانند می‌آورید. این حالت را می‌توانید در وبسایت Medium.com مشاهده کنید.
این پلاگین با تمام تصاویر در هر اندازه‌ای به خوبی کار می‌کند و پیاده‌سازی بسیار آسانی دارد.
چیزی که در رابطه با magnifyMe دوست دارم این است که روند زوم کردن در این پلاگین مشابه به حالت‌های سنتی است. این پلاگین از استایل عینک مانند کلاسیک استفاده می‌کند. همچنین یک استایل پیش‌فرض را در اختیار دارد که آن را واقعی تر نشان می‌دهد.
در نگاه اول ممکن است درست ندانید در رابطه با Mlens چه فکری کنید. این پلاگین رایگان با وجود حجم بسیار کمی که دارد کارایی بالایی را ارائه می‌دهد.
قابلیت زوم در این مورد تا حدودی شبیه به موارد قبلی است اما جزئیات بیشتری در این ابزار وجود دارد و شما می‌توانید کنترل‌های بیشتری را تعیین کنید.
این پلاگین به صورت کامل واکنشگرا است و می‌تواند به خوبی روی دستگاههای لمسی نیز کار کند. برای وبسایت‌هایی که مسئله دسترسی‌پذیری برای‌شان بسیار مهم است، این ابزار می‌تواند مفید عمل کند.
Zoomio پلاگین بزرگ‌نمایی تصاویر است که با موبایل نیز سازگاری دارد. به عنوان یک ابزار که کمتر شناخته شده است من به آن امتیاز خوبی می‌دهم.
این ابزار براساس جی‌کوئری ایجاد شده و اجازه می‌دهد که ویژگی‌های مختلفی را به رابط کابری اضافه کنید. در این ابزار همچنین شیوه‌های مختلفی برای زوم کردن پیاده‌سازی شده است.
Smooth Products پلاگینی است که به صورت منحصر به فرد برای وبسایت‌های فروشگاهی ایجاد شده است.
این مورد یک پلاگین رایگان جی‌کوئری است که برای تصاویر بندانگشتی ایجاد شده و شما می‌توانید با استفاده از رویداد هاور برای تصاویر قابلیت بزرگ‌نمایی را ایجاد کنید. صفحه پیش‌نمایش این ابزار نشان می‌دهد که این پلاگین برای وبسایت‌های فروشگاهی بسیار به خوبی عمل می‌کند.
تمام چیزهایی که نیاز دارید فایل‌های جاوااسکریپتی و CSS ای است. البته قابلیت افزودن جی‌کوئری نیز برای استفاده از افکت‌های مختلف دیگر مهیا است.
استفاده از این پلاگین در پلتفرم‌های شخص ثالث کمی دشوار است. اما با راهنمایی‌های موجود در صفحه گیت‌هاب می‌توانید کارهای‌تان را جلو ببرید.
در پایان
در لیست بالا سعی کردیم پلاگین‌های مختلفی که برای بزرگ‌نمایی کارکرد دارند را به شما معرفی کنیم. نیازی نیست که وسواس داشته باشید تنها کافی است براساس نیازتان جلو بروید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید