Efek Zoom Pada Gambar Dengan Jquery

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, contoh seperti Link di bawah ini :

clik kalau sobat ingin melihat..

CLick disini, jika ingin melhat contohnya

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

Ccara 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. Save 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.

NaraSumber

Posted in: Tuto BLog