Senin, 21 Oktober 2013

Membuat gallery gambar pada PHP dengan Cloud Zoom

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>
<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 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>&nbsp;</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
Selamat Mencoba ! Cool
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