Anda di halaman 1dari 7

Membuat Efek Zoom pada Galeri Foto dengan JQuery Zoomooz | achmatim.

net

Membuat Efek Zoom pada Galeri Foto dengan JQuery Zoomooz


Ditulis oleh Achmad Solichin (achmatim@gmail.com) 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


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: 1 <scripttype="text/javascript"src="zoomooz/lib/jquery 1.4.4.js"></script> 2 <scripttype="text/javascript" src="zoomooz/lib/sylvester.js"></script> 3 <scripttype="text/javascript" src="zoomooz/js/purecssmatrix.js"></script> 4 <scripttype="text/javascript" src="zoomooz/js/jquery.animtrans.js"></script> 5 <scripttype="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. Halaman 1 dari 7

Membuat Efek Zoom pada Galeri Foto dengan JQuery Zoomooz | achmatim.net

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:

0 <body> 1 <divid="headline"> 2 <h1>GaleriFoto</h1> 3 <p>Klikpadagambaruntukmemperbesarfotodanklikdi luarfotountukmemperkecilnya.Kerenkan?</p> 4 </div> 5 <divid="gallery"class="zoom"> 6 <ul> 7 <liclass="zoom"><img src="http://lorempixum.com/600/600/people/1"/></li> 8 <liclass="zoom"><img src="http://lorempixum.com/600/600/people/2"/></li> 9 <liclass="zoom"><img src="http://lorempixum.com/600/600/people/3"/></li> 10 <liclass="zoom"><img src="http://lorempixum.com/600/600/people/4"/></li> 11 <liclass="zoom"><img src="http://lorempixum.com/600/600/people/5"/></li> 12 <liclass="zoom"><img src="http://lorempixum.com/600/600/people/6"/></li> 13 <liclass="zoom"><img src="http://lorempixum.com/600/600/people/7"/></li> 14 <liclass="zoom"><img src="http://lorempixum.com/600/600/people/8"/></li> Halaman 2 dari 7

Membuat Efek Zoom pada Galeri Foto dengan JQuery Zoomooz | achmatim.net 15 16 17 18 19 20 21 22 23 24 25 26 27 <liclass="zoom"><img src="http://lorempixum.com/600/600/people/9"/></li> <liclass="zoom"><img src="http://lorempixum.com/600/600/people/10"/></li> <liclass="zoom"><img src="http://lorempixum.com/600/600/nature/1"/></li> <liclass="zoom"><img src="http://lorempixum.com/600/600/nature/2"/></li> <liclass="zoom"><img src="http://lorempixum.com/600/600/nature/3"/></li> <liclass="zoom"><img src="http://lorempixum.com/600/600/nature/4"/></li> <liclass="zoom"><img src="http://lorempixum.com/600/600/nature/5"/></li> <liclass="zoom"><img src="http://lorempixum.com/600/600/nature/6"/></li> <liclass="zoom"><img src="http://lorempixum.com/600/600/nature/7"/></li> <liclass="zoom"><img src="http://lorempixum.com/600/600/nature/8"/></li> </ul> </div> <body>

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: 1 2 3 4 5 6 7 8 9 10 11 12 <styletype="text/css"> *{ margin:0; padding:0; } /*TextStyles*/ #headline{ textalign:center; margin:20px0; }

Halaman 3 dari 7

Membuat Efek Zoom pada Galeri Foto dengan JQuery Zoomooz | achmatim.net 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 h1{ fontfamily:'Arvo',Georgia,Times,serif; fontsize:50px; lineheight:65px; } p{ fontfamily:'PTSans',Helvetica,Arial,sansserif; fontsize:13px; lineheight:25px; } /*GalleryStyles*/ #gallery{ width:720px; height:370px; margin:0auto; padding:10px; background:#383131; } /*ListStyles*/ ul{ liststyletype:none; position:absolute; width:720px; } #galleryulli{ float:left; margin:10px; background:white; height:100px; width:100px; } #galleryulli:hover{ border:3pxsolidwhite; margin:7px; } #galleryulliimg{ height:100px; width:100px; }

Halaman 4 dari 7

Membuat Efek Zoom pada Galeri Foto dengan JQuery Zoomooz | achmatim.net 60 </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. 1 2 3 4 5 6 7 8 9 10 11 12 13 <scripttype="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.

Halaman 5 dari 7

Membuat Efek Zoom pada Galeri Foto dengan JQuery Zoomooz | achmatim.net

Gambar 1: Tampilan Awal Halaman Galeri Foto

Gambar 2: Tampilan Foto Saat Diklik (Zooming) Halaman 6 dari 7

Membuat Efek Zoom pada Galeri Foto dengan JQuery Zoomooz | achmatim.net

Demo dan Download


Lihat demo program di http://achmatim.net/_demo/jquery-zoomoozgallery/ Download source program lengkap di http://achmatim.net/_demo/jquery-zoomooz-gallery/zoom-gallery.zip Baca tutorial secara online di http://achmatim.net/2011/05/29/membuat-efek-zoom-pada-galeri-fotodengan-jquery-zoomooz/

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

Tentang Penulis
Achmad Solichin. Adalah Lulusan Teknik Informatika, Fakultas Teknologi Informasi, Universitas Budi Luhur, Jakarta (S1, 2005) dan Magister Teknologi Informasi, Universitas Indonesia (S2, 2010). Kegiatan sehari-hari adalah sebagai Dosen di Universitas Budi Luhur (http://www.budiluhur.ac.id). Kegiatan lain aktif sebagai programmer, web developer, system analyst dan memberikan pelatihan di berbagai bidang komputer serta membuat tutorialtutorial praktis di bidang komputer. Penulis memiliki situs utama di http://achmatim.net yang berisi berbagai tutorial praktis di bidang komputer serta menyediakan buku gratis komputer. Penulis dapat dihubungi melalui email di achmatim@gmail.com, YM achmatim, Facebook achmatim dan Twitter achmatim.

Lisensi Dokumen
Seluruh isi dalam dokumen ini dapat digunakan, dimodifikasi dan disebarluaskan secara bebas untuk tujuan pendidikan, pembelajaran dan bukan komersial (non profit), dengan syarat tidak menghilangkan, menghapus atau mengubah atribut penulis dokumen ini dan pernyataan dalam lisensi dokumen yang disertakan di setiap dokumen. Tidak diperbolehkan mengkomersialkan tutorial ini kecuali mendapatkan ijin terlebih dahulu dari penulis.

Halaman 7 dari 7