Membuat Efek Zoom pada Galeri Foto dengan JQuery Zoomooz

Everyone loves images. Image atau Foto memang tidak bisa terpisahkan dari suatu  website. Keberadaan image tentunya akan mempercantik tampilan suatu website. Di dalam suatu website, image dapat berfungsi sebagai background, header, logo, header slider, menu navigasi, dan masih banyak yang lainnya. Selain itu, koleksi image atau foto yang kita miliki juga dapat ditampilkan dalam suatu galeri foto (image gallery) yang akan melengkapi isi dari website kita.

Masih terkait dengan image dan foto, dalam tutorial singkat ini, kita akan membahas mengenai bagaimana membuat galeri foto (image gallery) yang memiliki efek zoom (zooming effect) jika diklik pada salah satu foto. Kita akan menggunakan JQuery dan plugin Zoomooz untuk membuat efek zoom. Penasaran? Langsung aja kita mulai.

Step 1: Import Library Jquery dan Zoomooz.js

Pertama-tama, kita harus mendownload semua library yang diperlukan. Untuk JQuery dapat didownload di situs resminya, http://jquery.com dan untuk plugin Zoomooz dapat didownload di http://janne.aukia.com/zoomooz/. Setelah didownload dan diekstrak, pastikan bahwa kita mengetahui letaknya.

Import library JQuery dan Zoomooz sebagai berikut:

Code block

<script type="text/javascript" src="zoomooz/lib/jquery-1.4.4.js"></script>
<script type="text/javascript" src="zoomooz/lib/sylvester.js"></script>
<script type="text/javascript" src="zoomooz/js/purecssmatrix.js"></script>
<script type="text/javascript" src="zoomooz/js/jquery.animtrans.js"></script>
<script type="text/javascript" src="zoomooz/js/jquery.zoomooz.js"></script>

Pada baris ke-1 potongan source di atas, diimport library JQuery versi 1.4.4. Sesuaikan dengan versi yang Anda gunakan. Sedangkan pada baris 2-5, kita mengimport beberapa file library yang diperlukan, termasuk library inti zoomooz.js.

Step 2: Persiapkan dan Tampilkan Foto / Image di halaman dengan HTML

Namanya galeri foto ya harus ada fotonya, kalo ga ada fotonya ya aneh toh… hehe. Foto atau image yang akan ditampilkan dapat berasal dari berbagai macam sumber. Antara lain dapat diambil dari kumpulan foto yang kita miliki sendiri, dapat juga diambil dari situs kumpulan foto yang banyak tersedia di internet seperti Flickr, Photobucket, Google Picasa dll. Dalam contoh tutorial ini, kita akan mengambil image / foto dari situs LoremPixum.com yang menyediakan ribuan image siap pakai secara gratis. Cukup dengan mengarahkan source image ke alamat dengan format http://lorempixum.com/600/600/ maka akan menghasilkan gambar secara random dengan ukuran 600 x 600 pixel. Kita juga dapat mengambil image dalam kategori tertentu yang sudah disediakan dengan format http://lorempixum.com/600/600/nature/.

Sementara itu, untuk menampilkan gambar, kita akan “bungkus” dalam sebuah list (un-ordered list). Kita juga membungkus list dalam suatu <div> dengan id “gallery” dan class “zoom”. Hal tersebut untuk mempermudah CSS dan JQuery mengatur tampilan maupun pengaturan. Berikut ini potongan program untuk menampilkan gambar:

Code block

<div id="headline">
	<h1>Galeri Foto</h1>
	<p>Klik pada gambar untuk memperbesar foto dan klik di luar foto untuk memperkecilnya. Keren kan?</p>
</div>
 
<div id="gallery" class="zoom">
	<ul>
		<li class="zoom"><img src="http://lorempixum.com/600/600/people/1"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/people/2"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/people/3"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/people/4"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/people/5"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/people/6"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/people/7"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/people/8"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/people/9"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/people/10"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/nature/1"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/nature/2"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/nature/3"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/nature/4"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/nature/5"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/nature/6"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/nature/7"/></li>
		<li class="zoom"><img src="http://lorempixum.com/600/600/nature/8"/></li>
	</ul>
</div>

Step 3: Percantik Galeri Foto dengan CSS

Tanpa peran CSS, tampilannya tentu masih kurang menarik. Terlihat cukup berantakan. Kita akan memberikan “tugas” kepada CSS untuk mengatur tampilan halaman secara umum seperti font, perataan dan sebagainya, lalu untuk mengatur tampilan image agar berjajar dalam sejumlah baris dan kolom. CSS juga yang akan mengatur ukuran halaman menjadi lebih kecil (thumbnail) dengan ukuran 100 x 100 pixel.

Berikut ini potongan program CSS yang kita gunakan:

Code block

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
 
/*Text Styles*/
 
#headline {
	text-align: center;
	margin: 20px 0;
}
 
h1 {
	font-family: 'Arvo', Georgia, Times, serif;
	font-size: 50px;
	line-height: 65px;
}
 
p {
	font-family: 'PT Sans', Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 25px;
}
/*Gallery Styles*/
 
#gallery {
	width: 720px;
	height: 370px;
	margin: 0 auto;
	padding: 10px;
	background: #383131;
}
 
/*List Styles*/
ul {
	list-style-type: none;
	position: absolute;
	width: 720px;
}
 
#gallery ul li {
	float: left;
	margin: 10px;
	background: white;
	height: 100px;
	width: 100px;
}
 
#gallery ul li:hover {
	border: 3px solid white;
	margin: 7px;
}
 
#gallery ul li img{
	height: 100px;
	width: 100px;
}
 
</style>

Step 4: Terapkan Efek Zoom

Langkah terakhir sebelum kita lihat hasilnya adalah menerapkan efek zoom saat suatu image / foto diklik. Untuk melakukannya tidaklah sulit, karena cukup memanggil fungsi yang sudah didefinisikan oleh plugin JQuery, yaitu Zoomooz. Berikut ini potongan programnya.

Code block

<script type="text/javascript">
$(document).ready(function() {
	$(".zoom").click(function(evt) {
		evt.stopPropagation();
		$(this).zoomTo();
	});
	$(window).click(function(evt) {
		evt.stopPropagation();
		$("body").zoomTo();
	});
	$("body").zoomTo();
});
</script>

Untuk membuat suatu object memiliki efek perbesar (zoom) saat diklik, cukup dengan memanggil fungsi zoomTo(). Pada baris 3-6 terlihat selector class “zoom” akan menjadikan image dan area gallery memiliki efek zooming. Sementara itu, baris 7-11 akan menjadikan halaman secara keseluruhan juga memiliki efek zoom saat diklik.

Step 5: Coba dan Lihat hasilnya.

Terakhir, mari kita lihat dan coba hasilnya.

Tampilan Awal Halaman Galeri Foto

Demo dan Download

• Lihat demo program secara langsung disini.
• Download Program Lengkap (termasuk JQuery dan plugin Zoomooz)
• Download Tutorial Lengkap (PDF)

Referensi

• Situs Resmi JQuery, http://jquery.com
• Plugin Zoomooz.js, http://janne.aukia.com/zoomooz/
• Create an Awesome Zooming Web Page With jQuery, http://designshack.co.uk/?p=20521