Zoom ini pernah lihat kan sob Cloud Zoom on Blog,
yang membuat satu gambar kecil jika disorot akan menjadi gambar besar
karena dikombinasikan dengan menggunakan jQuery plugin. Mirip dengan
trik berikut sih hasil dari zoom image itu thumbnail pure CSS.
Sama-sama pas disorot kursor akan terlihat gambar besarnya. Sekarang
keluar versi jQuery tapi dengan script yg lumayan minimalis bagi sobat
yg tertarik akan Image Zoom ini.
Kok setiap full post page efek pada blog ini jadi tidak berfungsi
yak...deuh pusying nih kalo udah dapat masalah macam error-error macam
taik Kotok arghhh 
Ramuan Easy Image Zoom jQuery Plugin
Ramuan Easy Image Zoom jQuery Plugin
CSS
Letakan diatas/sebelum kode ]]></b:skin>
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:600px;
left:300px;
overflow:hidden;
-moz-box-shadow:0 0 10px #777;
-webkit-box-shadow:0 0 10px #777;
box-shadow:0 0 10px #777;
line-height:400px;
text-align:center;
}
Lihat kode CSS warna merah itu, jika gambar hover image terasa kurang pas, maka itu rubah² saja sampai terasa cucok jQuery Plugin
Masukan diatas kode tag penutup </body><script type='text/javascript'>//<![CDATA[(function($){$.fn.easyZoom=function(_1){var _2={id:"easy_zoom",parent:"body",append:true,preload:"Loading...",error:"There has been a problem with loading the image."};var _3;var _4=new Image();var _5=false;var _6=true;var _7;var w1,w2,h1,h2,rw,rh;var _8=false;var _1=$.extend(_2,_1);this.each(function(){_3=this;var _9=this.tagName.toLowerCase();if(_9=="a"){var _a=$(this).attr("href");_4.src=_a+"?"+(new Date()).getTime()+" ="+(new Date()).getTime();$(_4).error(function(){_6=false;});_4.onload=function(){_5=true;_4.onload=function(){};};$(this).css("cursor","crosshair").click(function(e){e.preventDefault();}).mouseover(function(e){_c(e);}).mouseout(function(){_d();}).mousemove(function(e){_b(e);});}});function _c(e){_d();var _e=$("<div id=\""+_1.id+"\">"+_1.preload+"</div>");if(_1.append){_e.appendTo(_1.parent);}else{_e.prependTo(_1.parent);}if(!_6){_f();}else{if(_5){_10(e);}else{_11(e);}}};function _11(e){if(_5){_10(e);clearTimeout(_7);}else{_7=setTimeout(function(){_11(e);},200);}};function _10(e){_8=true;$(_4).css({"position":"absolute","top":"0","left":"0"});$("#"+_1.id).html("").append(_4);w1=$("img",_3).width();h1=$("img",_3).height();w2=$("#"+_1.id).width();h2=$("#"+_1.id).height();w3=$(_4).width();h3=$(_4).height();w4=$(_4).width()-w2;h4=$(_4).height()-h2;rw=w4/w1;rh=h4/h1;_b(e);};function _d(){_8=false;$("#"+_1.id).remove();};function _f(){$("#"+_1.id).html(_1.error);};function _b(e){if(_8){var p=$("img",_3).offset();var pl=e.pageX-p.left;var pt=e.pageY-p.top;var xl=pl*rw;var xt=pt*rh;xl=(xl>w4)?w4: xl;xt=(xt>h4)?h4: xt;$("#"+_1.id+" img").css({"left": xl*(-1),"top": xt*(-1)});}};};})(jQuery);//]]></script><script type='text/javascript'>jQuery(function($){$('a.zoom').easyZoom();});</script>
Save
Ketika ingin memosting, syntax gambar yg musti digunakan harus seperti ini <p><a href="http://link-gambar-resolusi-gede/large.jpg" class="zoom"><img src="http://link-gambar-resolusi-kecil/small.jpg" alt=""></a></p> Screenshot pada demo blog setelah finish
See you...
Repost from : http://beben-koben.blogspot.com/2011/02/image-zoom-jquery-plugin.html
