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

OK gan...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 sebabnya mengapa ada Gambar Power Zoomer. Ini memberi setiap gambar pada halaman Anda kemampuan untuk diperbesar saat mouse digerakkan di atasnya. Sebuah "kaca pembesar" yang muncul di atas gambar memungkinkan pengguna memperbesar pada setiap bagian gambar yang diikuti oleh kursor. Selain itu, kekuatan pembesaran dapat disesuaikan dengan cepat dengan memutar roda mouse belakang atau sebagainya, seperti dalam program-program grafis yang banyak digunakan.

Masih menggunakan jQuery, karena itulah efek ini dapat memper besar gambar dalam ukuran kecil dan sedikit terlihat fantastis...yeaahhhh habir berlebihan brooo...jadi intinya kita lihat saja contohnya di sini. Kelebihan lainnya anda dapat menerapkan kekuatan efek zoom ke koleksi gambar sekaligus. Cukup mengubah pemilih jQuery Anda untuk menargetkan grup yang diinginkan gambar. Ok gan langsung aja yah...

• Log in ke blog sobat
• Klik Rancangan
• Klik Edit HTML
• Masukkan kode berikut setelah ]]></b:skin> 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://blackkapuas.googlecode.com/files/ddpowerzoomer.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>

• Selanjutnya, ketika anda ingin memberikan efek power zoomer, berikan kode berikut kedalamnya.

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

• Ganti kode berwarna merah dengan kode gambar anda.
• Kalau mau ganti kode berwarna biru sesuai 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 berwarna biru di bawah ini dengan kode anda yang anda simpan di file hosting anda. Ane yakin script ini akan berjalan lancar gan....ok selamat mencoba dan sukses selalu.

<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://blackkapuas.googlecode.com/files/ddpowerzoomer.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>

Sebenarnya script ini bisa untuk zoom pada kelompok gambar dan akan terlihat sedikit lebih bagus, tapi kayaknya ane dah lemas nulisnya gan...mungkin lain kali...kalau ada kesempatan dan makasih atas kunjungannya.....jangan segan-segan komentar atau memberi masukan untuk memperbaiki segala kekurang yang ane miliki....salam persahabatan sesama blogger.

''keep spirits and do the best''