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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

- 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