fbpx

Tag: cách sử dụng jquery easyzoom

Phóng to hình ảnh với jQuery EasyZoom

Giới thiệu và cài đặt

Zoom hình ảnh

Tác giả: Alen Grakalic

Website: http://i-like-robots.github.io/EasyZoom

Plugin này được tạo ra để giúp chúng ta có thể hiển thị những hình ảnh cỡ lớn giúp người dùng có thể xem rõ hình ảnh hơn. Nhất là ở những Website bán hàng, khi mà người dùng rất cần một hình ảnh chân thật, to và rõ ràng để họ có thể xem sản phẩm một cách tốt nhất trước khi quyết định mua.

Plugin này ra đời để giúp ta làm điều đó bằng cách tải hình ảnh lớn khi chúng ta rê chuột vào hình ảnh nhỏ, tạo cảm giác cho người xem như chúng ta đang dùng chức năng Zoom In (Phóng to) hình ảnh lên vậy.

Để có thể sử dụng Plugin các bạn cần theo các bước sau:

  1. Truy cập vào https://github.com/i-like-robots/EasyZoom/zipball/master . Sau đó hãy tải file nén về và giải nén ra và chúng ta sẽ có cấu trúc thư mục như sau:

Cau truc thu muc

 

  1. Các bạn hãy tìm 2 file cần thiết sau đây: easyzoom.js  và easyzoom.css .
  2. Tiến hành thêm thư viện vào trong website của chúng ta, nhưng các bạn cũng cần phải tải thư viện jQuery tại http://jquery.com về trước nhé:

 

Them thu vien

  1. (Tùy chọn) Nếu như bạn không có sẵn hình ảnh để Demo Plugin này có thể Copy luôn thư mục example-images  bên trong để sử dụng.
  2. Cài đặt hoàn tất

Sử dụng

Để sử dụng Plugin này, các bạn cần phải làm chính xác những gì tôi hướng dẫn. Bởi vì, website của tác giả hướng dẫn rất sơ sài. Và chủ yếu nhờ vào cách sử dụng của tác giả và tôi hiểu ra cách sử dụng của nó.

Tính năng Overlay (Che Phủ)

Đầu tiên, các bạn cần chuẩn bị các hình ảnh ở những bước trước chúng ta đã làm, sau đó hãy tạo ra một file và bạn có thể tùy nghi đặt tên, ở đây tôi sẽ đặt là overlay.html  và có cấu trúc như sau:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>EasyZoom - Thienanblog.com</title>
	<link rel="stylesheet" type="text/css" href="css/easyzoom.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/easyzoom.js"></script>
	<style type="text/css">
	.wrap {
		width: 940px;
		margin: 0px auto;
		padding: 5px 15px;
	}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="easyzoom easyzoom--overlay ten-class-tu-dat">
			<a href="img/2_zoom.jpg">
				<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
				<img src="img/2_standard.jpg" alt="" width="500" height="400"> 
			</a>
		</div>
	</div>
	<script type="text/javascript">
		// Instantiate EasyZoom instances
		var $easyzoom = $('.ten-class-tu-dat').easyZoom();
	</script>
</body>
</html>

Khi chạy ví dụ trên các bạn sẽ thấy như sau:

Overlay

 

Vậy do đâu Plugin này có thể chạy được, các bạn hãy chú ý các điểm sau:

  1. <div class=”easyzoom easyzoom–overlay ten-class-tu-dat”>  : các tên lớp cần thiết để Plugin có thể chạy. Và trong đó bạn để ý easyzoom—overlay  chính là tên tính năng sẽ chạy khi thiết lập.
  2. Bên trong <div class=”easyzoom easyzoom–overlay ten-class-tu-dat”>  sẽ có cấu trúc như sau:
<a href="img/2_zoom.jpg">
	<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
	<img src="img/2_standard.jpg" alt="" width="500" height="400"> 
</a>
  1. <a href=”img/2_zoom.jpg”>  : chứa thẻ href chính là đường dẫn đến hình ảnh lớn của bạn.
  2. <img src=”img/2_standard.jpg” alt=”” width=”500″ height=”400″>  : Chứa hình ảnh nhỏ và hiển thị ra bên ngoài trước khi người dùng rê chuột vào. Các bạn lưu ý chiều rộng và chiều cao (Width & Height), các bạn phải ấn định nhỏ hơn tấm hình lớn nhé và có thể tùy nghi chọn kích thước phù hợp với website của mình.
  3. Đoạn mã trong cặp thẻ <script>  đơn giản chỉ như sau:
<script type="text/javascript">
	// Instantiate EasyZoom instances
	var $easyzoom = $('.ten-class-tu-dat').easyZoom();
</script>
  1. Như vậy là bạn đã hoàn tất việc chạy Ví dụ đầu tiên với tính năng “Overlay” rồi đấy.

Tính năng Ajacent (Liền kề)

Các bạn có thể chuẩn bị cấu trúc HTML như sau và lưu tên file là ajacent.html :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>EasyZoom - Thienanblog.com</title>
	<link rel="stylesheet" type="text/css" href="css/easyzoom.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/easyzoom.js"></script>
	<style type="text/css">
	.wrap {
		width: 940px;
		margin: 0px auto;
		padding: 5px 15px;
	}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="easyzoom easyzoom--adjacent ten-class-tu-dat">
			<a href="img/2_zoom.jpg">
				<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
				<img src="img/2_standard.jpg" alt="" width="500" height="400"> 
			</a>
		</div>
	</div>
	<script type="text/javascript">
		// Instantiate EasyZoom instances
		var $easyzoom = $('.ten-class-tu-dat').easyZoom();
	</script>
</body>
</html>

Khi chạy ví dụ trên các bạn sẽ thấy như sau:

4. Ajacent

Tính năng này giúp chúng ta khi rê chuột vô hình ảnh, thì đồng thời Plugin sẽ tạo ra một hình ảnh nữa nằm bên phải và có chiều dài và cao bằng với hình ảnh được rê chuột. Tính năng này các bạn thường thấy ở các Website bán hàng như Ebay.

Và trong ví dụ này, cách sử dụng cũng giống ở ví dụ trước ở tính năng “Overlay” chỉ khác duy nhất chính là tên class mà các bạn sử dụng là <div class=”easyzoom easyzoom–adjacent ten-class-tu-dat”>  và trong đó class easyzoom—adjacent  đại diện cho tính năng “Ajacent”.

Tính năng Thumbnail – Overlay (Hình thu nhỏ – Che Phủ)

Tính năng này là sự kết hợp giữa thư viện hình ảnh (Gallery) nhờ vào các hình ảnh thu nhỏ kết hợp với tính năng “Overlay” để phóng to hình ảnh được chọn và rê chuột vào.

Các bạn cần chuẩn bị cấu trúc file thumbnail-overlay.html  như sau:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>EasyZoom - Thienanblog.com</title>
	<link rel="stylesheet" type="text/css" href="css/easyzoom.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/easyzoom.js"></script>
	<style type="text/css">
	.wrap {
		width: 940px;
		margin: 0px auto;
		padding: 5px 15px;
	}

	ul {
		list-style: none;
	}

	ul li {
		float:left;
		margin: 5px;
	}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails ten-class-tu-dat">
			<a href="img/3_zoom_1.jpg">
				<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
				<img src="img/3_standard_1.jpg" alt="" width="640" height="360">
			</a>
		</div>
		<ul class="thumbnails">
			<li>
				<a href="img/3_zoom_1.jpg" data-standard="img/3_standard_1.jpg">
					<img src="img/3_thumbnail_1.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="img/3_zoom_2.jpg" data-standard="img/3_standard_2.jpg">
					<img src="img/3_thumbnail_2.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="img/3_zoom_3.jpg" data-standard="img/3_standard_3.jpg">
					<img src="img/3_thumbnail_3.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="img/3_zoom_4.jpg" data-standard="img/3_standard_4.jpg">
					<img src="img/3_thumbnail_4.jpg" alt="">
				</a>
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		// Instantiate EasyZoom instances
		var $easyzoom = $('.ten-class-tu-dat').easyZoom();
		var api = $easyzoom.data('easyZoom');

		$('ul').on('click', 'a', function(event) {
			event.preventDefault();
			api.swap($(this).data('standard'), $(this).attr('href'));
		});
	</script>
</body>
</html>

Khi chạy ví dụ trên chúng ta sẽ được như sau:

5.Thumbnail - Overlay

 

Rất đẹp mắt đúng không nào, chỉ khác ở các ví dụ một tí đó chính là chúng ta cần đến thẻ <ul> để hiển thị các hình ảnh nhỏ bên dưới để người dùng có thể chọn nó. Và đây chính là cấu trúc chung khi các bạn sử dụng Plugin này:

<ul class="thumbnails">
	<li>
		<a href="img/3_zoom_1.jpg" data-standard="img/3_standard_1.jpg">
			<img src="img/3_thumbnail_1.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="img/3_zoom_2.jpg" data-standard="img/3_standard_2.jpg">
			<img src="img/3_thumbnail_2.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="img/3_zoom_3.jpg" data-standard="img/3_standard_3.jpg">
			<img src="img/3_thumbnail_3.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="img/3_zoom_4.jpg" data-standard="img/3_standard_4.jpg">
			<img src="img/3_thumbnail_4.jpg" alt="">
		</a>
	</li>
</ul>

Trong đó, <a href=”img/3_zoom_1.jpg” data-standard=”img/3_standard_1.jpg”>  có thuộc tính href chính là đường dẫn đến hình ảnh phóng lớn và data-standard  là hình ảnh thu nhỏ ở phía dưới hình chính của chúng ta.

Và các bạn lại cần phải chú ý một điểm vẫn giống các ví dụ trước đó chính là thẻ <div class=”easyzoom easyzoom–overlay easyzoom–with-thumbnails ten-class-tu-dat”>  đã có thêm 1 class mới chính là easyzoom–with-thumbnails  để giúp nó hiểu đây chính là thư viện hình ảnh.

Tuy nhiên, khác biệt lớn nhất chính là đoạn mã Javascript:

<script type="text/javascript">
	// Instantiate EasyZoom instances
	var $easyzoom = $('.ten-class-tu-dat').easyZoom();
	var api = $easyzoom.data('easyZoom');

	$('ul').on('click', 'a', function(event) {
		event.preventDefault();
		api.swap($(this).data('standard'), $(this).attr('href'));
	});
</script>

Trong đó, $easyzoom.data(‘easyZoom’) sẽ trả về cho chúng ta một Object chứa các phương thức để chúng ta có thể cấu hình Plugin này. Và mỗi khi sự kiện click lên tấm hình ở thư viện thì nó sẽ bị đoạn mã ngăn chặn không cho refresh lại trang thông qua phương thức event.preventDefault() . Và ở cách dùng api.swap()  thì các bạn có thể hiểu đơn giản tiếng anh nó đã có nghĩa là “hoán đổi”, và hoán đổi cái gì? Chính là đường dẫn hình ảnh trong data-standard  mà chúng ta truyền vào href trong thẻ <a>  của chúng ta. Giúp cho Plugin hiểu là hình ảnh mới đã được cấu hình các hình ảnh nhỏ và hình ảnh phóng to.

Và có một điều thú vị là khi các bạn thay đổi easyzoom easyzoom—overlay  trong thẻ <div class=”easyzoom easyzoom–overlay easyzoom–with-thumbnails ten-class-tu-dat”>  các bạn sẽ lại có được luôn cả tính năng “Ajacent” mà chúng ta đã được thử qua trước đó.

Tóm tắt các tính năng cơ bản trong jQuery EasyZoom

Tên tính năng Class được sử dụng
Overlay easyzoom easyzoom–overlay
Ajacent easyzoom easyzoom–ajacent
Thumbnail – Overlay easyzoom easyzoom–overlay easyzoom–with-thumbnails
Thumbnail – Ajacent easyzoom easyzoom–ajacent  easyzoom–with-thumbnails

Qua bài viết này, các bạn đã có thể sử dụng được các tính năng cơ bản nhất của Plugin rồi, ngoài ra các bạn cũng nên tham khảo thêm trong tài liệu của tác giả để có thể hiểu về Plugin này hơn nếu như có nhu cầu chuyên sâu và cao cấp hơn.

Các bạn có thể tải toàn bộ Source tại đây

Xin cám ơn các độc giả đã đón xem bài viết này.