Zoom ảnh với jquery plugin ElevateZoom

Khai báo thư viện sử dụng plugin

1 2	`<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>` `<script src="js/jquery.elevatezoom.js"></script>`

1. Basic Zoom

- Plugin yêu cầu 1 đến 2 hình ảnh để thực hiện công việc Zoom. Một hình ảnh thumbnails kích thước nhỏ và 1 hình ảnh kích thước thật (big image) là hình ảnh sẽ hiện thị khi Zoom, bạn cũng có thể dùng duy nhất 1 hình ảnh nhưng việc sử dụng 2 hình ảnh được khuyến cáo là nên dùng.

HTML:

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

- Ở đây src là đường dẫn của ảnh thumbnails, data-zoom-image là đường dẫn của hình ảnh lớn.

Javascript:

1	`$("#zoom_01").elevateZoom();`

2. Tints

- Bạn có thể dễ dàng thiết lập màu sắc và thuộc tính Opacity khi hover zoom lên hình ảnh bằng cách thay đổi các tham số tintColour và tintOpacity

Javascript:

1	`$("#zoom_02").elevateZoom({tint:true, tintColour:'#F90', tintOpacity:0.5});`

3. Gallery & Lightbox

- Plugin hỗ trợ zoom cho 1 danh sách hình ảnh (gallery), cho phép chuyển đổi giữa các hình ảnh để zoom với hiệu ứng khá đẹp mắt.

HTML:

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

  <div id="gal1">

    <a href="#" data-image="images/small/image1.png" data-zoom-image="images/large/image1.jpg">

      <img id="zoom_01" src="images/thumb/image1.jpg" />

    </a>

    <a href="#" data-image="images/small/image2.png" data-zoom-image="images/large/image2.jpg">

      <img id="zoom_01" src="images/thumb/image2.jpg" />

    </a>

    <a href="#" data-image="images/small/image3.png" data-zoom-image="images/large/image3.jpg">

      <img id="zoom_01" src="images/thumb/image3.jpg" />

    </a>

    <a href="#" data-image="images/small/image4.png" data-zoom-image="images/large/image4.jpg">

      <img id="zoom_01" src="images/thumb/image4.jpg" />

    </a>

  </div>

Javascript:

1

2

3

4

5

6

<script>

    //initiate the plugin and pass the id of the div containing gallery images

    $("#zoom_01").elevateZoom({ gallery: 'gal1', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif' });

    //pass the images to Fancybox

    $("#zoom_01").bind("click", function (e) { var ez = $('#zoom_01').data('elevateZoom'); $.fancybox(ez.getGalleryList()); return false; });

  </script>