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 :
Plugin 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 insertkan file plugin cloud zoom nya diantara tag <HEAD> ... </HEAD>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>kemudian kita tuliskan diantara tag <BODY> ... </BODY>
<script type="text/javascript" src="cloud-zoom.1.0.3.min.js"></script>
<link href="cloud-zoom.css" type="text/css" rel="stylesheet" />
<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">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
<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>
Selamat Mencoba !
atau script lengkapnya dapat di download pada link berikut :
Download Source Code Contoh Gallery dengan Cloud Zoom
Originally Posted By : Suwondo.NET
Tidak ada komentar:
Posting Komentar