Membuat Image Zoom JQuery

Kali Ini saya Ingin Memberitahu cara membuat efek gambar JQuery
Fungsi zooming itu sendiri bisa digunakan untuk memperbesar gambar dengan mode preview.
gak Pake lama Langsung Kasih Cara nya
Cekidot


Sebelumnya Untuk Menampilkan HasilNya Saya Beri Contoh


Klik Gambar Untuk melihat Contoh

1. login ke akun bloggermu
2. masuk ke Rancangan>>Edit HTML
3. Cari Kode ]]></b:skin> Untuk mempermudah Klik CTRL+F
4. Masukan kode DIbawah ini Diatas 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;
}

---

5. Cari Kode </head>
6. Masukan Kode dibawah INi diatas Kode </head>

---

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

---

Lalu save ..
Semoga bermanfaat .. Terima Kasih KunjunganNya
Wasalam

Sumber : Az ComSoft