Effect zOOmer Pada Gambar dengan Jquery

Bismillah ... Postingan Kali ini saya akan memberikan trik sederhana namun mungkin akan sangat menarik untuk dipraktekkan. Postingan ini saya beri judul Effect zOOmer pada gambar dengan jquery. Dari judulnya saja terdapat kata jQuery, dengan kata lain trik ini memang menggunakan fitur jQuery.

Adapun zOOmer nya sendiri berarti membesar, dalam artian ketika gambar di KlIK, maka gambar tersebut akan membesar. Untuk contohnya sendiri, silahkan kalian KLIK gambar dibawah ini :

Untuk mengembalikan ukuran gambar kembali ke ukuran semula, kalian tinggal KLIK kembali gambar tersebut.

Gimana cara membuatnya ...?

cara membuat effect tersebut sangat simple, silahkan kalian ikuti tahap-tahapnya dibawah ini :

1. Login ke blogger kalian
2. Pilih Rancangan ---> EDIT HTML (centang expand tempate widget)
3. Simpan script berikut diatas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://z33s.googlecode.com/files/BesaR.txt.js">
</script>

Keterangan :
Simpan file Js berwarna merah diatas dihosting penyimpanan file kalian, selain itu, jika Script file Js yang berwarna biru sudah ada pada template kalian, kalian tidak usah menyimpan lagi file Js diatas dan kalian hanya menyimpan file Js berwarna merah.

4. SIMPAN template kalian

5. Untuk pemanggilan script diatas pada gambar kalian gunakan kode berikut:

<img class="magnify" magnifyby="3" style="width: 200px; height: 250px;" src="URLGAMBARKALIAN" alt="" id="BLOGGER_PHOTO_ID_6060538624190533589" border="0" />

Keterangan :

• Ganti kode warna merah dengan URL gambar milik kalian
• Untuk ukuran kalian bisa mengganti angka pada kode width: 200px; height: 250px;
• Lakukan Cara No. 5 untuk setiap gambar yang ingin kalian beri effect zOOmer.

Selesai dan semoga bermanfaat ...