Membuat Efek Zoom Pada Gambar Dengan jQuery

Bismillah
Sobat bingung apa itu dan bagaimana kegunaannya, nah menurut saya pribadi Membuat Efek Zoom Pada Gambar adalah keuntungan 40% dari blog yang mungkin dapat menyempurnakan gambar apabila bentuk dari gambar itu kecil, tutorial ini menggunakan kode jQuery maka efek yang ditampilkan pun cukup bagus dan indah dan berikut tutorialnya..
untuk contoh bisa KLIK Gambar Disamping ....

---

Membuat Efek Zoom Pada Gambar

---

Langkah 1

• Login ke Blogger
• Masuk ke "Rancangan - Edit HTML"
• Cheklist "Expand Template Widget"

Langkah 2
Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya

/* Zoom Image
------------------------------- */
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;
}

Langkah 3
Selanjutnya cari kode </head> kemudian sisipkan kode berikut diatasnya

<!-- Zoom Image code script -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://koderator.googlecode.com/files/zoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>

Langkah 4

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email