Membuat Zoom Gambar dengan Jquery Zoom

Jika kalian sering membuka situs belanja online, pastinya kalian sering menemukan sebuah fitur yang selalu ada disetiap toko online. Yaitu fitur zoom barang produk dengan tujuan agar pengunjung dapat melihat lebih detail barang yang nantinya akan mereka beli. Lalu bagaimana caranya kita bisa membuat fitur seperti itu ?. Sesuai dengan pembahasan kita kali ini, kita akan belajar membuat zoom gambar dengan Jquery Zoom. Jquery Zoom ini adalah plugin yang bisa kalian pergunakan untuk membantu membuat fitur zoom seperti toko online.

Caranya terbilang cukup mudah. Namun kalian harus mengerti dasar mengenai HTML, CSS, dan juga javascript atau Jquery. Baiklah langsung kita mulai saja, pertama kalian harus mendownload file jquery zoom terlebih dahulu. Kalian bisa download di http://www.jacklmoore.com/zoom/. Setelah didownload, kalian ekstrak filenya sehingga menjadi seperti ini.

Lalu kalian bisa mencopy file seperti pada gambar dibawah ini. Kemudian pindahkan ke folder baru dimana folder tersebut akan menjadi tempat kita membuat fitur zoom.

Selanjutnya carilah gambar yang akan dijadikan objek untuk fitur zoom ini. Lalu letakkan pada satu folder dengan file jquery zoom tadi.

Langkah terakhir adalah kita mulai membuat scriptnya dengan bahan yang telah kita siapkan barusan. Kalian bisa salin contoh code berikut ini agar menyingkat waktu pengerjaan.

zoom.html

<html>
<head>
	<meta charset="UTF-8">
	<title>zoom jquery</title>
	<link rel="stylesheet" href="style.css">	
</head>
<body>
	<div class="container">
		<span class='zoom' id='ex1'>
			<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
			<p>Hover</p>
		</span>
	</div>
</body>
</html>

Setelah sudah, sekarang kalian tambahkan script ini setelah penutup div container.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’></script>
<script src=’jquery.zoom.js’></script>
<script>
$(document).ready(function(){
$(‘#ex1’).zoom();
});
</script>

Selanjutnya buat file cssnya seperti ini.

style.css

/* styles unrelated to zoom */
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

/* these styles are for the demo, but are not required for the plugin */
.zoom {
	display:inline-block;
	position: relative;
}

/* magnifying glass icon */
.zoom:after {
	content:'';
	display:block; 
	width:33px; 
	height:33px; 
	position:absolute; 
	top:0;
	right:0;
	background:url(icon.png);
}

.zoom img {
	display: block;
}

.zoom img::selection { background-color: transparent; }

.container{
	width: 500px;
	margin:auto;
}

Setelah sudah semuanya kalian simpan file tersebut dengan format dan nama masing-masing, dan lihat hasilnya pada browser kalian. Jika berhasil maka hasilnya akan seperti ini.