Zoom hình ảnh với jquery: sexsyZoom

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

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.