Membuat Image Power Zoomer

Image Power Zoomer Adalah sebuah efek yang dapat memberikan kemampuan untuk memperbesar suatu gambar pada halaman anda, saat mouse roll di atasnya.

Sebuah "kaca pembesar" akan muncul di atas gambar mengikuti gerakan cursor dan memungkinkan pengguna memperbesar pada setiap bagian gambar. efek ini sering dijumpai dalam program-program grafis.

Demo:

(Letakan cursor diatas gambar...)

Demo 1 (default power: 2x. Range: 2x to 7x. Magnifier size: 150px by 150px):

Demo 2/3 (3rd demo uses a different, higher res version of original image as the magnified image):

Cara Memasang Image Power Zoomer

Langkah Pertama:

Letakan script berikut ini diatas kode </head>

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

<script type="text/javascript" src="ddpowerzoomer.js">

/***********************************************
* Image Power Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Langkah Kedua:

Gunakan contoh kode script berikut ini untuk membuat Image Power Zoomer dan letakan dimanapun anda ingin menampilkannya pada halaman anda.

<img id="myimage" src="http://archivesiugi.googlecode.com/files/Foto%20Yogya.jpg" style="width:500px; height:450px"/>

<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom({
defaultpower: 2,
powerrange: [2,5],
largeimage: null,
magnifiersize: [100,100] //<--no comma following last option!
})
})
</script>

sumber: dynamicdrive