Membuat Efek Zoom Gambar Dengan Jquery

Ada banyak cara untuk membuat tampilan gambar di blog kita menjadi lebih menarik, agar tidak standar2 saja :) . Salah satu caranya dengan efek zooming yang akan saya bahas kali ini dengan menggunakan Jquery. Cara kerjanya adalah jika ada seorang pengunjung blog kawan2 melakukan klik (baik itu klik kiri ataupun klik kanan) pada gambar yang ada di blog kita, maka gambar tersebut akan ditampilkan tetap pada halaman tersebut tapi dengan efek membesar dengan lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan dengan efek mengecil dengan lembut. Hal ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali. Seperti contoh, silahkan kawan2 klik gambar dibawah ini :

Langsung kita praktekan step by step nya :


1. Log in ke blogger kawan2.
2. Disini saya preaktekan dengan blogger tampilan baru, klik "setting" lalu "Template".

3. Klik "Edit HTML", pilih "Procced" untuk masuk ke lembar HTML.
4. Ada baiknya untuk backup HTML anda terlebih dahulu.
5. Centang "Expand Widget Templates".
6. Cari kode berikut ]]></b:skin> ,bisa dengan : ctrl + F.
7. Masukan kode dibawah ini, sebelum kode ]]></b:skin> :

div.jquery-image-zoom {

line-height: 0;

font-size: 0;

z-index: 10;

border: 5px solid #fff;

margin: -5px;

-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

}

div.jquery-image-zoom a {

background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;

display: block;

width: 25px;

height: 25px;

position: absolute;

left: -17px;

top: -17px;

/* IE-users are prolly used to close-link in right-hand corner */

*left: auto;

*right: -17px;

text-decoration: none;

text-indent: -100000px;

outline: 0;

z-index: 11;

}

div.jquery-image-zoom a:hover {

background-position: left -25px;

}

div.jquery-image-zoom img,

div.jquery-image-zoom embed,

div.jquery-image-zoom object,

div.jquery-image-zoom div {

width: 100%;

height: 100%;

margin: 0;

}

 
 8. Cari kode berikut </head> ,bisa dengan : ctrl + F.
 9. Masukan kode dibawah ini, diatas kode </head> :

<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.min.js'/>

<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/>

<script type="text/javascript">

jQuery(document.body).imageZoom();

</script>

 10. Klik "Save Template".

Sekian tips dari saya semoga membantu kawan2.
Selamat berbloging ria.