Zoom hình ảnh với plugin jquery - ElevateZoom

ElevateZoom là một plugin jquery zoom ảnh  dễ sử dụng và có nhiều tùy chọn phong phú. Dễ dàng tích hợp vào tính năng zoom ảnh sản phẩm trên một số website bán hàng...

Để sử dụng plugin này chúng ta cần sử dụng jQuery và khai báo plugin file vào phần head của website

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

Dưới đây là một số tùy chọn mà elevateZoom cung cấp cho chúng ta.

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:

<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:

$("#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:

$("#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:

<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>

- Tham số imageCrossfade cho phép ta cấu hình hiệu ứng faceIn & faceOut khi chuyển đôi giữa các hình ảnh trong gallery

4. Chú ý.

- Trong một số trường hợp khi tích hợp plugin vào website, các bạn làm đúng tất cả các bước, javascript không báo lỗi nhưng chức năng zoom vẫn không hoạt động thì hãy thử thêm đoạn CSS này vào. Mình đã gặp vấn đề tương tự và phải mò mẫm nguyên 1 ngày để tìm ra cái này.

  /*Css for Zoom Image*/
.zoomContainer{ z-index: 9999 !important;}
.zoomWindow{ z-index: 9999 !important;}

- Download ví dụ ở file đính kèm bài viết hoặc tham khảo thêm về plugin này tại đây

Còn tiếp...

Download Source

Related Post


Sử dụng printThis plugin jQuery để in một phần nội dung trang web.
Tuesday, July 8, 2014
Để in nội dung 1 trang web có khá nhiều cách, tuy nhiên printThis là một plugin mình thấy đơn giản và dễ sử dụng nhất, nó cho phép mình lựa chọn in một phần của trang web dựa vào class hoặc id của thẻ html bao ngoài nội dung cần in
Tích hợp google maps vào website
Tuesday, May 13, 2014
Trong bài này mình muốn giới thiệu một đoạn code nhỏ để tích hợp google maps vào website các bạn, cái này phù hợp để tích hợp vào trang liên hệ của 1 website, khi người dùng vào có thể thấy được ví trí công ty trên maps một cách rất trực quan
Search

Đăng ký nhận bài mới


Category

Blog Archive