Pada pembahasan kali ini, saya ingin mengulas tentang cara membuat gallery gambar dengan menggunakan cloud zoom. yaitu salah satu gallery gambar yang lumayan menarik karena jika kita lewatkan mouse di atas gambar nya maka akan di tampilkan gambar nya yang telah di Zoom/diperbesar. hasilnya kurang lebih seperti gambar berikut :
Library Cloud Zoom terdiri dari :
- jquery-1.8.2.min.js
- cloud-zoom.1.0.3.js
- cloud-zoom.1.0.3.min.js
- cloud-zoom.css
Langkah pertama, kita buat 1 file induk dengan nama index.php lalu letakkan kode berikut diantara tag <HEAD> … </HEAD>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript" src="cloud-zoom.1.0.3.min.js"></script> <link href="cloud-zoom.css" type="text/css" rel="stylesheet" />Kemudian kita tuliskan kode berikut diantara tag <BODY> … </BODY>
<a href="gambar/contoh-besar.jpg" id="zoom01" class="cloud-zoom" rel="position:'right', adjustX:20, adjustY:-3, tint:'#FFFFFF', softFocus:1, smoothMove:5, tintOpacity:0.8"> <img src="gambar/contoh-kecil.jpg"> </a> <p> </p> <a href="gambar/contoh-besar.jpg" rel="useZoom: 'zoom01', smallImage: 'gambar/contoh-kecil.jpg'" class="cloud-zoom-gallery"> <img src="gambar/contoh-kecil.jpg" width="100" /> </a> <a href="gambar/Sunset-besar.jpg" rel="useZoom: 'zoom01', smallImage: 'gambar/Sunset-kecil.jpg'" class="cloud-zoom-gallery"> <img src="gambar/Sunset-kecil.jpg" width="100" /> </a> <a href="gambar/Winter-besar.jpg" rel="useZoom: 'zoom01', smallImage: 'gambar/Winter-kecil.jpg'" class="cloud-zoom-gallery"> <img src="gambar/Winter-kecil.jpg" width="100" /> </a><script>jQuery('#zoom01, .cloud-zoom-gallery').CloudZoom();</script>Simpan file di atas beserta pluginnya dalam satu folder dalam web server root misal , di C:/xampp/htdocs/gallery. kemudian jalankan seperti biasa via browser : http://localhost/gallery
atau script lengkapnya dapat di download pada link berikut :Download Source Code Gallery dengan Cloud Zoom
Selamat mencoba.