Image Zoom jQuery Plugin

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 otok arghhh b-(

Contoh cloud zoom

Contoh thumbnail pure CSS

Prikitiwww...

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...\m/

Resource by: http://cssglobe.com/post/9711/jquery-plugin-easy-image-zoom