Tutorial ini tanpa sengaja k'ian dapatkan dari Dynamic Drive dalam artikelnya jQuery Magnify Imager v1.1 beberapa hari yang lalu. Dan secara tidak sengaja pula k'ian berhasil menerapkannya disalah satu blog k'ian (All About Kian) dalam salah satu postingan yang k'ian buat. dari pada kelamaan kamu bisa lihat demonya disini.

Dari contoh demo diatas, k'ian akan mencoba menjelaskan sedikit mengenai fungsi dari script ini. yaitu : Script magnify berfungsi membuat gambar menjadi besar atau dizoom ketika salah satu gambar diklik, hal ini ditandai dengan munculnya gambar kaca pembesar ketika kursor mouse kita arahkan kesalah satu gambar. sebagai contoh :
Arahkan kursor mouse kamu pada gambar diatas, kemudian klik. maka kamu akan melihat gambar diatas membesar 3x lipat dari ukuran gambar aslinya. Cara ini sungguh efektif untuk mempermudah pengunjung melihat gambar-gambar atau foto-foto yang mereka inginkan tanpa harus membuka jendela baru pada browser kita. Langkah yang bisa kamu lakukan untuk mendapatkannya cukup dengan meng-copy kode bawah ini..
Kemudian masuk ke menu Layouts-->> edit HTML -->> dan letakkan 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://sites.google.com/site/kianbersama/javascript/jquery.magnifier.js">
</script>

Selanjutnya simpan.

Langkah berikut adalah penerapan pada gambarnya :

• Ambil URL gambar yang akan kamu pasang, contoh :

<img src="http://i317.photobucket.com/albums/mm393/d_otherside_band/header.jpg"/>

• Kemudian tambahkan kode class="magnify" didalam kode URL gambar tadi. maka hasilnya akan sebagai berikut :

<img src="hhttp://i317.photobucket.com/albums/mm393/d_otherside_band/header.jpg" class="magnify"/>

Kode class="magnify" harus selalu kamu tambah pada setiap URL gambar yang akan kamu posting atau tampilkan.

Nb : jika ingin memasang banyak gambar dengan ukuran yang sama atau dengan ukuran yang kamu inginkan. bisa kamu tambahkan kode width="....px;" height="...px;". maka jika kode ini kita tambahkan didalam URL gambar dengan ukuran 100 x 150 (lebar=100 dan tinggi=150), maka kodenya akan menjadi seperti ini.

<img src="http://i317.photobucket.com/albums/mm393/d_otherside_band/header.jpg" class="magnify" width="100px;" height="150px;"/>

Lakukan perubahan ukuran gambar sesuai dengan keinginan kamu. selamat mencoba dan jangan lupa comment.