Pasang Efek jQuery Image Zoom Versi 2.0

Pada artikel kali ini saya akan membahas tentang cara Memasang Efek jQuery Image Zoom Versi 2.0. Untuk menggunakan trik ini kita akan memanfaatkan plugin jQuery yang dibuat oleh Andreas Lagerkvist. Plugin jQuery ini akan memberikan efek pada gambar di artikel blog kita , nanti ketika si pembaca meng-klik salah satu gambar di artikel blog kita maka gambar akan ditampilkan pada halaman yang sama dengan efek membesar dan jika si pembaca meng-klik tombol [X] maka gambar akan kembali seperti semula.

Demo

Menarik bukan ? kalau kamu berminat silakan ikuti langkah dibawah ini :

1. Login ke Blogger => Rancangan => Edit HTML

2. Cari kode ini

]]></b:skin>

3. Masukan kode CSS dibawah ini diatas kode no 2

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;
}

4. Cari kode ini

</head>

5. Masukan kode JavaScript ini dibawah tepat diatas kode no 4

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type="text/javascript" src="http://andreaslagerkvist.com/aFramework/Modules/Base/jquery.imageZoom.js"/>
<script type="text/javascript">
 jQuery(document.body).imageZoom();
</script>

6. Selesai

Semoga Bermanfaat