Sekarang ini telah marak bermunculan website untuk belanja secara online. Mereka menawarkan produk-produknya pada websitenya sebagai pengganti dari display seperti pada toko fisiknya. Dengan begitu pengunjung dapat melihat barang yang mereka cari dengan melihat gambarnya atau pun deskripsi yang ditulis oleh pemilik website. Maka jangan heran jika website toko online sekarang mempunyai format yang hampir mirip. Yang paling penting dari toko online adalah gambar dari produk yang akan dijual. Kualitas gambar sangat menentukan calon pembeli yang berkunjung.

Mengenai gambar pada toko online, kalian pasti sering menggunakan fitur zoom pada website toko online. Karena fitur zoom ini memang sangat membantu untuk melihat detail dari produk yang kita cari. Sesuai dengan pembahasan kali ini kita akan belajar bagaimana cara membuat zoom gambar dengan jquery Zoom. Jquery zoom ini adalah plugin yang kalian bisa gunakan untuk membuat efek zoom pada gambar seperti halnya toko online pada umumnya.

Caranya cukup mudah, kalian hanya perlu mendownload pluginnya di http://www.jacklmoore.com/zoom/. Download pluginya lalu ekstrak filenya pada folder kalian. Kira kira seperti ini tampilanya setelah kita download.

Lalu ambil file jquery.zoom.js didalam folder tersebut.

Setelah sudah maka selanjutnya kalian cari gambar untuk prakteknya dan simpan dalam satu folder dengan file jquery.zoom.js tadi. Sehingga hasilnya akan seperti ini.

 

Langkah selanjutnya kalian buat file htmlnya. Salin contoh code dibawah ini.

zoom.html

Setelah sudah kalian simpan filenya dalam satu folder dengan gambar dan jquery,zoom.js seperti barusan. Dan jika hasilnya maka akan seperti ini.

gambar diatas adalah tampilan awal.

Setelah kalian arahkan mouse pada gambar maka hasilnya akan seperti gambar diatas. Detail gambar akan terlihat lebih jelas karena gambar tersebut telah kita zoom.

Mudah bukan ?

Sekian pembahasan mengenai membuat zoom gambar dengan jquery Zoom. Semoga bermanfaat.