JQuery Zoom hình ảnh – Zoom hình ảnh sử dụng JQuery – JQuery image Zoom and Gallery.
Hiện nay JQuery Zoom hình ảnh được sử dụng rất nhiều ở các trang web: zoom sản phẩm, zoom hình ảnh, dự án…
Hôm nay mình giới thiệu đến các bạn JQuery Zoom sử dung elevateZoom giúp phóng to hình ảnh với nhiều tính năng: zoom phóng to, gallery nhiều hình ảnh kết hợp với zoom. Đồng thời kết hợp với SexsyZoom đảm bản các bạn sẽ zoom phê lòi mắt 😀 :v
1. Basic Zoom
Plugin sử dụng 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 (full 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 thì hình ảnh khi zoom lên sẽ chuẩn, rõ nét và đẹp hơn.
Hình ảnh full được đặt trong thẻ : data-zoom-image . Hình ảnh hiển thị được đặt trong thẻ: src của hình ảnh.
CODE HTML
[sourcecode language=”html”]<img id=”sexsy_zoom_01″ src=’images/small/image1.png’ data-zoom-image=”images/large/image1.jpg”/>[/sourcecode]
JAVA SCRIPT
[sourcecode language=”html”]
$(‘#sexsy_zoom_01’).elevateZoom();
[/sourcecode]
DEMO – CODE :
2. Inner Zoom
CODE HTML
[sourcecode language=”html”]<img id=”sexsy_zoom_01″ src=’images/small/image1.png’ data-zoom-image=”images/large/image1.jpg”/>[/sourcecode]
JAVA SCRIPT
[sourcecode language=”html”]
$(‘#sexsy_zoom_01’).elevateZoom({
zoomType: “inner”,
cursor: “crosshair”,
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
[/sourcecode]
DEMO – CODE :
2. Gallery kết hợp Zoom
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.
CODE HTML
[sourcecode language=”html”]
<div id=”wrapper”>
<div id=”sexsyWrapper”>
<img id=”sexsy_zoom” width=”500″ height=”310″ data-zoom-image=”images/large/image3.jpg” src=”images/small/image3.png” />
</div>
<div id=”sexsy-gallery”>
<a data-zoom-image=”images/large/image1.jpg” data-image=”images/small/image1.png” data-update=”” class=”elevatezoom-gallery active” href=”#”>
<img width=”100″ src=”images/small/image1.png”>
</a>
<a data-zoom-image=”images/large/image3.jpg” data-image=”images/small/image3.png” class=”elevatezoom-gallery” href=”tester”>
<img width=”100″ src=”images/small/image3.png”>
</a>
<a data-zoom-image=”images/large/image2.jpg” data-image=”images/small/image2.png” class=”elevatezoom-gallery” href=”tester”>
<img width=”100″ src=”images/small/image2.png”>
</a>
<a data-zoom-image=”images/large/image4.jpg” data-image=”images/small/image4.png” class=”elevatezoom-gallery” href=”tester”>
<img width=”100″ src=”images/small/image4.png”>
</a>
</div>
</div>
[/sourcecode]
JAVA SCRIPT
[sourcecode language=”html”]
//Khoi tao plugin va truyen id cua the div chua dung hinh anh gallery
$(“#sexsy_zoom”).elevateZoom({
gallery:’sexsy-gallery’,
cursor: ‘pointer’,
galleryActiveClass: ‘active’,
imageCrossfade: true,
loadingIcon: ‘images/spinner.gif’
});
//Dua hinh anh vao Fancybox
$(“#sexsy_zoom”).bind(“click”, function(e) {
var ez = $(‘#sexsy_zoom’).data(‘elevateZoom’);
$.fancybox(ez.getGalleryList());
return false;
});
[/sourcecode]
DEMO – CODE
Còn cập nhật thêm các plugin khác …………
P/S hình ảnh hơi mạnh tí, hy vọng là hứng thú cho các bác xóa tan mệt mỏi 😀 !