آموزش اسکریپت زوم (zoom) به همراه گالری عکس

در این آموزش jquery یک اسکریپت بسیار جذاب را برای شما آماده کرده ایم که میتوانید در وب سایت های خود از آن استفاده کنید. در این اسکریپت علاوه بر اینکه میتوانید تصویر خود را در حالت زوم مشاهده کنید، این امکان به شما داده میشود که با کلیک بر روی عکس، مجموعه ای از تصاویر را به صورت اسلاید مشاهده کنید.

مشاهده دمو

[free_vip]

Arrayدر ابتدا کدهای جی کوئری و سی اس اس مورد نیاز را فراخوانی میکنیم :

[html]

<script type="text/javascript" src="js/jquery.min.1.7.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-plus.js"></script>
<script type="text/javascript" src="js/jquery.ez-plus.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-plus.css" media="screen"/>

[/html]

سپس کدهای html مربوطه را اضافه میکنیم :

[html]

<div class="zoom-left">
    <img style="width:411px" id="img_01" src="images/small/image3.jpg" data-zoom-image="images/large/image3.jpg"/>
    <div id="gal1">
        <a href="#" class="elevatezoom-gallery" data-update="" data-image="images/small/image1.jpg" data-zoom-image="images/large/image1.jpg">
            <img id="img_01" src="images/small/image1.jpg"/>
        </a>
        <a href="#" class="elevatezoom-gallery" data-image="images/small/image2.jpg" data-zoom-image="images/large/image2.jpg">
            <img id="" src="images/small/image2.jpg" />
        </a>
        <a href="tester" class="elevatezoom-gallery" data-image="images/small/image3.jpg" data-zoom-image="images/large/image3.jpg">
            <img id="" src="images/small/image3.jpg"/>
        </a>
        <a href="tester" class="elevatezoom-gallery" data-image="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/small/image4.jpg"
data-zoom-image="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/large/image4.jpg" class="slide-content">
            <img id="" src="images/small/image4.jpg"/>
        </a>
    </div><!–#gal1–>
</div><!–.zoom-left–>
[/html]

اولین تگ <img />، عکسی را نشان میدهد که در حالت بزرگ نمایش داده میشود، شما باید در قسمت آدرس عکس (src)، آدرس تصویر مورد نظرتان را قرار دهید و مقدار صفت data-zoom-image، آدرس عکسی که در حالت اسلاید میخواهید نمایش داده شود را مشخص میکند.

در بین عنصر <div> با آیدی gal1، تصاویر کوچک قرار داده میشوند. در قسمت آدرس هر تگ <img /> داخل gal1، باید آدرس تصویر کوچکی که میخواهید نمایش داده شود را بنویسید. اگر دقت کنید میبینید که در این قسمت هر تگ img، داخل یک تگ a قرار دارد. در این تگ باید مقدار صفت data-image با آدرسی که در تگ داخلی img میدهید یکسان باشد و مقدار صفت data-zoom-image باید آدرس عکسی باشد که مربوط به همان تصویر در حالت بزرگ است.

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

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

[/free_vip]

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

1 Comment
    • سید محمد مهدی موسوی
    • ۱۳۹۴-۰۷-۱۵
    پاسخ

    فوق العاده بود ….

    باز هم بارک الله ….

    :)