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
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
Selamat! Ente telah memiliki blog dengan nama domain sendiri.. 
See you...
Repost from : http://beben-koben.blogspot.com/2011/02/image-zoom-jquery-plugin.html
Kamu Blogger .?
Ingin sharing/berbagi sesama Blogger?. Klik Disini..
Jangan takut , Kamu pasti di Confirm kok .. disini kita gak lihat kamu blogger pemula/senior .. intinya disini kita diharuskan untuk mampu bersosialisasi dan berbagi ilmu / informasi yang kita miliki atau belajar lebih tentang blogger.
*Selamat Bergabung .. :)
