Efek Zoom Dan Hover Pada Gambar Dengan jQuery

Kali ini saya akan membahas bagaimana cara memberi efek zoom (membesar) dan hover pada gambar dengan jQuery.

Images Demo

Dan berikut cara memberi efek zoom dan hover pada gambar dengan jQuery :

1. Login ke Blog kamu.

2. Pilih Rancangan.

3. Pilih Edit HTML.

4. Cari kode ]]></b:skin>

5. Setelah ketemu letakan kode dibawah ini tepat diatas kode nomor 4.

/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px ; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFbCq3O09A4Dovg7sQfyRmY7U_OVPFPvDmDUl9PSJUjQbYHjcl_qqmdsDfXN8OKwFbeJqwWMjbZ2ZkuU4edP7n8K8fHyccGPy8epnnyW9_gP7UTBjLecwmDEyTChdI6LNN0GSXmkowRa61/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Kamu bisa ubah kode yang berwarna biru adalah ukuran tinggi (height) dan lebar (width) gambar.

dan kode yang berwarna merah adalah lebar keseluruhan dari widget tersebut.

6. Selanjutnya cari kode </head> setelah ketemu letakan kode dibawah ini tepat diatas kode </head>

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);
} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});
//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {
var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});
});
</script>

Simpan Template.

Langkah terakhir kembali kemenu awal rancangan pilih Add Gadget, pilih HTML Java Script.

Copy kode dibawah ini :

<ul class="thumb">
<li><a href="#"><img src="http://3.bp.blogspot.com/-jWrr1QP04vU/T7c5kL-CTSI/AAAAAAAACnc/IfwA9I0J_6Q/s1600/Naruto+Shippuden+263,+Blazer+Blog.jpg" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 5 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 6 Link" alt="" /></a></li>
</ul>

Ganti kode yang berwarna merah dan kata picture 2,3,4,5,6 Link dengan URL gambar lainnya.

Kode yang berwarna merah adalah contoh.

Ganti tanda # dengan URL yang dituj saat gambar di klik.

Simpan dan lihat hasilnya, semoga sukses. 

*Sumber: Blazer Blog