Cara Membuat Jquery Zoom Image

Zoom Image adalah efek pembesaran gambar. Efek pembesaran ini akan lebih smoot karena diserta dengan jquery. Ok baiklah sekarang ikuti cara membuat jquery zoom image.

Log in ke blog anda
Klik Rancangan
Edit HTML
Masukkan kode berikut di atas ]]></b:skin>

ul.thumb{float:left; list-style:none; margin:0; padding:10px; width:360px}
ul.thumb li{margin:0; padding:5px; float:left; position:relative;  width:110px; height:110px}
ul.thumb li img{width:100px; height:100px; -ms-interpolation-mode:bicubic; border:1px solid #ddd; padding:5px; background:#f0f0f0; position:absolute; left:0; top:0}
ul.thumb li img.hover{background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center}

Sekarang masukkan kode berikut di atas 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>

Sekarang Klik Simpan atau Save Template

Tambahkan kode di bawah ini bila ingin memberikan efek zoom pada gambar anda

<ul class="thumb">
<li><a href="ALAMAT LINK ANDA"><img src="ALAMAT GAMBAR ANDA" alt="JUDUL GAMBAR" /></a></li>
</ul>

Ganti tulisan merah dengan alamat link anda dan tulisan biru dengan alamat gambar anda, serta tulisan hijau dengan judul gambar anda. Jika anda ingin menambahkan beberapa gambar maka kodenya seperti di bawah ini, artinya anda tinggal menambah kode sebelum tag penutup </ul>, menjadi seperti di bawah ini.

<ul class="thumb">
<li><a href="#"><img src="picture1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture4 Link" alt="" /></a></li>
<li><a href="#"><img src="picture5 Link" alt="" /></a></li>
</ul>

Merah: kode sebelum ditambahkan
Biru: kode sesudah ditambahkan
Hijau: tag penutup

Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"