مطالب عمومی

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

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

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

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

1525 نفر
2 دقیقه
بروزرسانی در: آبان 9, 1400

فهرست مطالب

بعد از آموزش اسکریپت زوم (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 آدرس تصویر بزرگتر را باید قرار دهید.

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

 

[/free_vip]

3/5 - (3 امتیاز)
بدون دیدگاه
انتشار: مهر 26, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا