ستروکیت

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

در این مقاله قصد داریم تا پلاگین کارآمد EasyZoom را به شما معرفی کنیم. این پلاگین همانطور که از نامش پیداست یک پلاگین بسیار راحت jquery ست که می‌توانید براحتی در پروژه‌های خود از آن استفاده کنید و از کار کردن با آن لذت ببرید.

پس با ما همراه باشید.

افزونه Easy Zoom:

EasyZoom افزونه‌ای زیبا و بهینه برای زوم و بزرگنمایی تصاویر شما در وب سایت است که همانطور که پیش از این به آن اشاره شد براساس ساختار jquery پیاده‌سازی شده‌است.

این پلاگین برخلاف بسیاری از پلاگین‌های دیگر که برای بزرگ نمایی تصاویر طراحی شده‌اند بر روی کلیه دستگاه‌های لمسی (Touch) نیز قابل استفاده‌است. از سویی دیگر شما می‌توانید به راحتی آن را با کمک دستورات Css شخصی‌سازی کنید.

نحوه استفاده:

۱- دانلود پلاگین

از طریق لینکی که در پایین مقاله قرار دارد، پلاگین Easyzoom را دانلود کنید.

۲- فراخوانی فایل‌های پلاگین

فایل‌های easyzoom.css و easyzoom.js را در پروژه خود فراخوانی کنید.

<link rel="stylesheet" type="text/css" href="css/easyzoom.css">
<script src="js/easyzoom.js"></script>

نکته: پیش از فراخوانی فایل easyzoom.js حتماً اطمینان حاصل کنید کتابخانه Jquery را فراخوانی کرده‌اید. میتوانید اگر فایل کتابخانه jquery را در پروژه خود ندارید با کمک CDN آن را فراخوانی کنید.

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

۳- رعایت ساختار HTML

پلاگین Easyzoom به ساختار بخصوصی وابسته نیست. تنها در استفاده از آن کافی است ساختار HTMLیی زیر را رعایت کنید.

• یک المان دربردارنده به همراه کلاس easyzoom easyzoom--overlay
• یک المان لینک، شامل آدرس به تصویر با سایز بزرگتر
• و در نهایت المان img با آدرس تصویر با سایز استاندارد

کلاس easyzoom easyzoom--overlay بسته به حالت‌های نمایش داده شده در دمو متفاوت است.

• بزرگنمایی بر روی خود تصویر : easyzoom easyzoom--overlay
• بزرگنمایی در باکس مجاور : easyzoom easyzoom--adjacent
• بزرگنمایی به همراه تصاویر کوچک : easyzoom easyzoom--overlay easyzoom--with-thumbnails
• امکان فعال / غیرفعال کردن حالت بزرگنمایی : easyzoom easyzoom--overlay easyzoom--with-toggle

<div class="easyzoom easyzoom--overlay">
 <a href="images/zoom.jpg">
 <img src="images/standard.jpg" alt="" />
 </a>
</div>

۴- شخصی سازی فایل css

/* Shrink wrap strategy 1 */
.easyzoom {
    float: left;
}
.easyzoom img {
    display: block;
}


/* Shrink wrap strategy 2 */
.easyzoom {
    display: inline-block;
}
.easyzoom img {
    vertical-align: bottom;
}

۵- فراخوانی پلاگین easyzoom

// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Get an instance API
var api = $easyzoom.data('easyZoom');

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