Cara Membesarkan Gambar dengan Magnify (Javascript)

Teknik Memperbesarkan Gambar Dengan Magnify Script ini. atau saya sebut dengan Gambar akan membesar pada saat kita klik. Biasanya saat pengunjung ingin melihat detail gambar maka mereka akan mengklik gambar, namun apa yang terjadi? mereka marah di arahkan ke halaman baru dan saat ingin kembali ke blog harus menunggu loading lagi, masih mending jika loading blog tersebut cepat kurang dari 5 detik, namun apabila loading blog tersebut berat??? saya rasa blog anda akan di tinggalkan pengunjung saat itu juga.sperti blog saya ini.hehee..

Jika anda mengalami hal yang saya ilustrasikan di atas maka anda berada di tempat yang benar, saat ini karena posting hari ini saya akan membahas permainan animasi pada gambar, yang mana dengan trik ini saat gambar di klik maka akan membesar secara otomatis tanpa harus beralih ke halaman baru.
untuk demonya silahkan klik gambar dibawah :

Bagaimana sobb?? keren gk, aplgi sy ksh bonus gambar cewek.wkwkkwkk
OKE langsung saja ke TKP, berikut cara membuatnya :
1. Login dahulu ke Blogger
2. Kemudian Klik Tata Letak » Edit HTML
3. Jangan lupa Centang Expand Template Widget
4. Lalu cari kode berikut </head> Tekan Ctrl+F (mozzilla) untuk mempermudah pencarian. Kemudian letakkan kode berikut diatasnya.

<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://ut2a-4down-blogspot-com.googlecode.com/files/Gambar%20Magnify2.js"></script>

NB:: teks yang berwarna biru adlah script pendukung, jika sobat sudah memasangnya ditemplate sobat, maka kode diatas tdk perlu lagi. :D

5. Selanjutnya save template..
6. Berikut ini adalah format kode yang akan kita gunakan untuk menjalankan fungsi image diatas.

• <img border="0" height="93" width="93" src="http://i2.hunantv.com/p1/20120711/0833268779.jpg" class="magnify" data-magnifyto="700" data-magnifyduration="850" />

KET::

class="magnify" >> Ini adalah eksekusi scriptnya.
data-magnifyto="700" >> Ini untuk Mengatur lebar dengan pixel, atau
data-magnifyby="2.5" >> Ini untuk mengatur lebar.
data-magnifyduration="850" >> Durasi waktu saat pembesaran gambar.

Semoga bermanfaat gan. :D

Berbagi :