Efect Zoom JQuery

Bismillahirohmanirohim, ane lagi belajar buat jquery d blog nih gan mohon bantuannya. niatnya sih buat efect zoom gambar gitu ane kasi contoh gambar d bawah ini ya

Alhamdulillah berhasil gan, ni dia caranya :

1. kita kudu masukkin library jquerynya dulu

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2. tambahin lagi class buat efect yg kita inginkan untuk zoom ini kita menggunakan jquery.magnifier.js

<script src='http://www.dynamicdrive.com/dynamicindex4/jquery.magnifier.js' type='text/javascript'>

3. copy kedua code tersebut pada template anda dalam tag <head></head> entah sesudah <head> atau sebelum </head>

4. kemudian masukkan gambar yg anda inginkan, saya beri contoh gambar keroro d atas

<img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 166px; height: 157px;" src="http://4.bp.blogspot.com/_xYAOdculG5g/TR5BpdrKCxI/AAAAAAAAAPk/va6Dsfx3Nk8/s400/keroro_etb.jpg" alt="" class="magnify" border="0">

perhatikan class="magnify", itu adalah tambahan untuk memanggil class mangifier.

5. selesai.

~selamat mencoba~

Popular posts from this blog

Lupa Nomor Anggota Perpustakaan Nasional Republik Indonesia Online (PNRI)

Membaca EPUB dengan Readium

Menampilkan Format Angka dalam Rupiah dengan PHP