Trang chủ » Blog » Hướng dẫn sử dụng thư viện elevatezoom để Zoom ảnh

Hướng dẫn sử dụng thư viện elevatezoom để Zoom ảnh

Posted on 04/07/2020 by Admin

[blog]
Hướng dẫn các bạn sử dụng sử dụng thư viện elevatezoom để Zoom ảnh mà các mẫu giao diện blog bán hàng mình thường dùng. Elevatezoom là một thư viện jQuery dễ dàng thiết lập và tùy chỉnh để Zoom ảnh của bạn.

Đầu tiên thư viện chúng ta cần dùng là elevatezoom phiên bản 3.0.8

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js'/>

Các bạn copy thư viện trên dán trước thẻ đóng </body>

Tiếp theo cấu trúc HTML để đăng hình dùng thư viện cho hình ảnh là

<img id="zoom_01" src='image1.png' data-zoom-image="image1.jpg"/>

Chúng ta đặt cho cái hình 1 thẻ ID nào đó và phải có data-zoom-image để nó lấy hình và Zoom khi chúng ta rê chuột vô nhé.

Kèm theo đoạn script để thiết lập Zoom ảnh

Cơ bản

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $('#zoom_01').elevateZoom();

    })

    //]]>

</script>

Dưới đây là các ví dụ về Zoom ảnh và cách thiết lập script

Kiểu 1 - Tints (Hình Zoom phóng ra ngoài ảnh, có nền)

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $("#zoom_01").elevateZoom({

            tint: true,

            tintColour: '#F90',

            tintOpacity: 0.5

        });

    })

    //]]>

</script>

Kiểu 2 : Inner Zoom (Hình Zoom nằm bên trong)

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $("#zoom_02").elevateZoom({

            zoomType: "inner",

            cursor: "crosshair"

        });

    })

    //]]>

</script>

Kiểu 3 : Fade in / Fade Out Settings (Hình Zoom nằm ngoài kèm hiệu ứng, không nền)

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $("#zoom_03").elevateZoom({

            zoomWindowFadeIn: 500,

            zoomWindowFadeOut: 500,

            lensFadeIn: 500,

            lensFadeOut: 500

        });

    })

    //]]>

</script>

Kiểu 4 : Lens Zoom (Giống như kính lúp Zoom bên trong)

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $("#zoom_04").elevateZoom({

            zoomType: "lens",

            lensShape: "round",

            lensSize: 200

        });

    })

    //]]>

</script>

Kiểu 5 : scrollZoom (Lăn chuột để thu - phóng) kết hợp với những kiểu trên để scrollZoom

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $("#zoom_05").elevateZoom({

            scrollZoom: true

        });

    })

    //]]>

</script>

Kiểu 6 : Image Constrain (Kính lúp hình vuông)

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $("#zoom_06").elevateZoom({

            constrainType: "height",

            constrainSize: 274,

            zoomType: "lens",

            containLensZoom: true,

            gallery: 'gallery_01',

            cursor: 'pointer'

        });

    })

    //]]>

</script>

Kiểu 7: Window Position (Zoom theo vị trí)

Các vị trí được zoom sẽ hiển thị theo số như trong hình dưới

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $("#zoom_07").elevateZoom({

            zoomWindowPosition: 1

        });

    })

    //]]>

</script>

Các bạn thay vị trí muốn hiển thị vô số 1 của 15 vị trí như hình trên

Kiểu 8 : Dùng cho bộ sưu tập Gallery (Cái này dùng thường xuyên để áp dụng cho mẫu giao diện blog bán hàng, bộ sư tập gallery ảnh sản phẩm)

Chúng ta sẽ viết HTML như sau

<img id="img_01" src="image1.jpg" data-zoom-image="image1.jpg" />



<div id="gallery_01">

    <a href="#" data-image="image1.jpg" data-zoom-image="image1.jpg">

        <img id="img_01" src="image1.jpg" />

    </a>

    <a href="#" data-image="image2.jpg" data-zoom-image="image2.jpg">

        <img id="img_01" src="image2.jpg" />

    </a>

    <a href="#" data-image="image3.jpg" data-zoom-image="image3.jpg">

        <img id="img_01" src="image3.jpg" />

    </a>

    <a href="#" data-image="image4.jpg" data-zoom-image="image4.jpg">

        <img id="img_01" src="image4.jpg" />

    </a>

</div>

Đoạn script sẽ được viết như sau

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $("#img_01").elevateZoom({

            constrainType: "height",

            constrainSize: 274,

            zoomType: "lens",

            containLensZoom: true,

            gallery: 'gallery_01',

            cursor: 'pointer',

            galleryActiveClass: "active"

        });

        $("#img_01").bind("click", function(e) {

            var ez = $('#img_01').data('elevateZoom');

            $.fancybox(ez.getGalleryList());

            return false;

        });

    })

    //]]>

</script>

Và CSS để active khi chúng ta click vô hình nhỏ, chúng ta cài mặc định border màu trắng, khi click vô thì màu viền thành đen. Như vậy thì sẽ không bị thay đổi kích thước, di chuyển.

<style>

#gallery_01 img {

    border: 2px solid white;

}

.active img {

    border: 2px solid #333 !important;

}

</style>

Trên đây là những kiểu Zoom ảnh sử dụng thư viện elevatezoom mà mình hay áp dụng trong quá trình thiết kế mẫu giao diện blogspot bán hàng.

Thư viện người lập trình đã viết sẵn, chúng ta chỉ việc sử dụng và dùng, rất đơn giản và nhanh gọn.

[/blog]

Bài viết cùng chủ đề:

Bài viết mới nhất