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

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

 JAVA SCRIPT

$('#sexsy_zoom_01').elevateZoom();

DEMO – CODE :

jquery-image-zooming

Demo link: http://webtopviet.com/demo/sexsy-zoom/basic-zoom.html

2. Inner Zoom

CODE HTML

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

 JAVA SCRIPT

$('#sexsy_zoom_01').elevateZoom({
 zoomType: "inner",
 cursor: "crosshair",
 zoomWindowFadeIn: 500,
 zoomWindowFadeOut: 750
 });

DEMO – CODE :

Demo link: http://webtopviet.com/demo/sexsy-zoom/inner-zoom.html

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

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

 JAVA SCRIPT

//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;
	});

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

Your email address will not be published. Required fields are marked *

clear formPost comment