دموها

برای مشاهد دمو ماوس را روی عکس ها قرار و حرکت دهید

دمو با عکس یک تیکه

دمو با عکس دوتیکه ایی

اموزش استفاده

HTML

اگر میخواهید عکس های شما به اینگونه باشند باید مثل کد زیر در قالب خود اعمال کنید و حتما باید درون (<div class="easyzoom">) باشه

<div class="easyzoom">
    <a href="zoom.jpg">
        <img src="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;
}

JavaScript

نوبت به جاوا و جی کوئری می رسه که مثل استایل باید فراخوانی بشه در قالب

// Instantiate EasyZoom plugin
var $easyzoom = $('.easyzoom').easyZoom();

// Get the instance API
var api = $easyzoom.data('easyZoom');