TUTORIAL MEMBUAT POWER ZOOMER PADA GAMBAR: Power Zoomer v1.1

Ok guys....kali ini ane share bagaimana cara membuat power zoomer pada gambar. Script ini masih dikembangkan oleh dynamicdrive.com dan mempunyai efek zoom yang berbeda. Beberapa gambar yang patut dilihat lebih dekat itulah alasan mengapa ada Power Zoomer. Power Zoomer ini memberi setiap gambar pada halaman Anda kemampuan untuk diperbesar saat mouse digerakkan diatasnya.  Sebuah "Kaca Pembesar" yang muncul diatas gambar memungkinkan pengguna memperbesar pada setiap bagian gambar yang diikuti kursor.  Selain itu, kekuatan pembesaran dapat disesuaikan dengan cepat dengan memutar roda mouse belakang atau sebaliknya,  seperti yang telah diterapkan juga oleh program-program grafis.

Masih menggunakan jQuery, karena itulah efek ini dapat memperbesar gambar dalam ukuran kecil dan sedikit terlihat fantastis, jadi intinya kita lihat saja contohnya dibawah ini.

Kelebihan lainnya anda dapat menerapkan efek zoom ke koleksi gambar sekaligus. Cukup mengubah pemilih jQuery Anda untuk menargetkan grup yang diinginkan gambar.  Langsung aja ke TKP........

• Log in ke Blog Anda
• Klik RancanganKlik Rancangan
• Klik Edit HTML
• Masukkan kode berikut sebelum kode </head> dan Simpan Template

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript: src="http://cheahab.googlecode.com/files/ddpowerzoom.js">

/***********************************************
* Image Power Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
 $('#myimage').addpowerzoom()
})
</script>

*untuk satu Gambar pada halaman

atau

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://cheahab.googlecode.com/files/ddpowerzoom.js' type='text/javascript'>
/***********************************************
* Image Power Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){ //fire on DOM ready
    $('img#gallerya').addpowerzoom({magnifiersize:[150,150]})
    $('img#galleryb').addpowerzoom({magnifiersize:[150,150]})
    $('img#galleryc').addpowerzoom({magnifiersize:[150,150]})
    $('img#galleryd').addpowerzoom({magnifiersize:[150,150]})
    $('img#gallerye').addpowerzoom({magnifiersize:[150,150]})
    $('img#galleryf').addpowerzoom({magnifiersize:[150,150]})
    $('img.#galleryg').addpowerzoom({powerrange:[2,5]})
    $('img.#galleryh').addpowerzoom({powerrange:[2,8],magnifiersize:[100,100]})
})
</script>

*untuk beberapa gambar didalam satu halaman (recommended)

• Selanjutnya, ketika Anda ingin memberikan efek power zoomer pada gambar Anda, baik itu dalam postingan Anda, dalam galeri foto pribadi Anda dan sebagainya, berikan kode berikut kedalamnya.

<img id="myimage" src="ocean.gif" style="width:200px; height:150px" />

*untuk satu Gambar pada halaman

 atau

<img id="gallerya" src="ocean.gif" style="width:200px; height:150px" />
<img id="gallerya" src="ocean.gif" style="width:200px; height:150px" />
<img id="galleryc" src="ocean.gif" style="width:200px; height:150px" />
<img id="galleryd" src="ocean.gif" style="width:200px; height:150px" />
<img id="gallerye" src="ocean.gif" style="width:200px; height:150px" />
<img id="galleryf" src="ocean.gif" style="width:200px; height:150px" />
<img id="galleryg" src="ocean.gif" style="width:200px; height:150px" />
<img id="galleryh" src="ocean.gif" style="width:200px; height:150px" />

*untuk beberapa gambar didalam satu halaman (recommended)

• Ganti kode berwarna merah dengan kode gambar Anda.
• Kalau mau ganti kode berwarna biru sesuaikan dengan ukuran yang anda inginkan.

Catatan Penting:

• Sebaiknya javascriptnya anda simpan di file hosting anda sendiri agar script ini bekerja dengan baik. Silahkan download scriptnya di sini.
• Setelah anda Dowload scriptnya klik save page as, simpan dengan nama dan berikan kode .js di belakangnya. Setelah itu download file yang anda simpan tadi ke file hosting anda, lalu copy link location dari script yang anda simpan di file hosting anda....kalau anda belum bisa atau bingung bagaimana cara menyimpannya, silahkan baca di sini.
• Selanjutnya ganti kode http://cheahab.googlecode.com/files/ddpowerzoom.js pada script diatas dengan kode anda yang anda simpan di file hosting anda. Ane yakin script ini akan berjalan lancar gan....ok selamat mencoba !

Artikel Terkait