آموزش اسکریپت زوم داخلی با قابلیت زوم اسکرول

بعد از آموزش اسکریپت زوم (zoom) به همراه گالری عکس، یک افکت ساده از این پلاگین را به شما آموزش میدهیم. این پلاگین بسیار حرفه ای برای زوم کردن اتوماتیک در حالت Hover بر روی تصاویر وب سایت بکار میرود. با استفاده از این اسکریپت، دیگر نیازی به کلیک بر روی تصویر مورد نظر برای بزرگنمایی ندارید و فقط کافیست موس بر روی تصویر تغییر مکان دهد تا بصورت یک ذره بین، عمل بزرگ نمایی انجام شود.

مشاهده دمو

[free_vip]

در ابتدا کدهای جی کوئری و کد فراخوانی اسکریپت مورد نظر را در بین تگ head قرار میدهیم :

[html]

<script src=’js/jquery-1.8.3.min.js’></script>
<script src=’js/jquery.elevatezoom.js’></script>

<script>
$(‘#zoom_01′).elevateZoom({
    zoomType: "inner",
    cursor: "crosshair",
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 750,
    lensFadeIn: 500,
    lensFadeOut: 500,
    scrollZoom : true
});
</script>

[/html]

 

 

سپس تگ عکس مورد نظر را قرار میدهیم :

[html]

<img id="zoom_01" src=’images/small/image1.png’ data-zoom-image="images/large/image1.jpg"/>

[/html]

 

دقت کنید که حتما باید عکس ها شبیه هم و فقط در دو اندازه کوچک و بزرگ باشند. اندازه تصاویر دست خود شماست. دقت کنید که در صفت data-zoom-image آدرس تصویر بزرگتر را باید قرار دهید.

شما میتوانید فایل کامل این اسکریپت را از لینک پایین دانلود کنید :

[onliner_button type=”edu-demo” url=’https://onliner.ir/demo-education/jquery/elevat-inner-zoom/elevateZoom-onliner.ir.zip’]دانلود دمو[/onliner_button]

[/free_vip]

دیدگاه خود را برای ما ارسال کنید

No Comments