Zoomer Efect On Image

Demo

Step 1: Insert the following style sheet to the HEAD section of your page:

<style type="text/css"> .magnifyarea{ /* CSS to add shadow to magnified image. Optional */ box-shadow: 5px 5px 7px #818181; -webkit-box-shadow: 5px 5px 7px #818181; -moz-box-shadow: 5px 5px 7px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true); background: white; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" > /*********************************************** http://cybersorce.blogspot.in/ ***********************************************/ jQuery.noConflict() jQuery('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>'); var featuredimagezoomer={ loadinggif: 'spinningred.gif', //full path or URL to "loading" gif magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image /////NO NEED TO EDIT BEYOND HERE//////////////// dsetting: { //default settings magnifierpos: 'right', magnifiersize:[200, 200], cursorshadecolor: '#fff', cursorshadeopacity: 0.3, cursorshadeborder: '1px solid black', cursorshade: false, leftoffset: 15, //offsets here are used (added to) the width of the magnifyarea when rightoffset: 10 //calculating space requirements and to position it visa vis any drop shadow }, isie: (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)return true;@end @*/return false;})(), //is this IE? showimage: function($, $tracker, $mag, showstatus){ var specs=$tracker.data('specs'), d=specs.magpos, fiz=this; var coords=$tracker.data('specs').coords //get coords of tracker (from upper corner of document) specs.windimensions={w:$(window).width(), h:$(window).height()}; //remember window dimensions var magcoords={} //object to store coords magnifier DIV should move to magcoords.left = coords.left + (d === 'left'? -specs.magsize.w - specs.lo : $tracker.width() + specs.ro); //switch sides for magnifiers that don't have enough room to display on the right if there's room on the left: if(d!=='left' && magcoords.left + specs.magsize.w + specs.lo >= specs.windimensions.w && coords.left - specs.magsize.w >= specs.lo){ magcoords.left = coords.left - specs.magsize.w - specs.lo; } else if(d==='left' && magcoords.left < specs.ro) { //if there's no room on the left, move to the right magcoords.left = coords.left + $tracker.width() + specs.ro; } $mag.css({left: magcoords.left, top:coords.top}).show(); //position magnifier DIV on page specs.$statusdiv.html('Current Zoom: '+specs.curpower+'<div style="font-size:80%">Use Mouse Wheel to Zoom In/Out</div>'); if (showstatus) //show status DIV? (only when a range of zoom is defined) fiz.showstatusdiv(specs, 400, 2000); }, hideimage: function($tracker, $mag, showstatus){ var specs=$tracker.data('specs'); $mag.hide(); if (showstatus) this.hidestatusdiv(specs); }, showstatusdiv: function(specs, fadedur, showdur){ clearTimeout(specs.statustimer) specs.$statusdiv.fadeIn(fadedur) //show status div specs.statustimer=setTimeout(function(){featuredimagezoomer.hidestatusdiv(specs)}, showdur) //hide status div after delay }, hidestatusdiv: function(specs){ specs.$statusdiv.stop(true, true).hide() }, getboundary: function(b, val, specs){ //function to set x and y boundaries magnified image can move to (moved outside moveimage for efficiency) if (b=="left"){ var rb=-specs.imagesize.w*specs.curpower+specs.magsize.w return (val>0)? 0 : (val<rb)? rb : val } else{ var tb=-specs.imagesize.h*specs.curpower+specs.magsize.h return (val>0)? 0 : (val<tb)? tb : val } }, moveimage: function($tracker, $maginner, $cursorshade, e){ var specs=$tracker.data('specs'), csw = Math.round(specs.magsize.w/specs.curpower), csh = Math.round(specs.magsize.h/specs.curpower), csb = specs.csborder, fiz = this, imgcoords=specs.coords, pagex=(e.pageX || specs.lastpagex), pagey=(e.pageY || specs.lastpagey), x=pagex-imgcoords.left, y=pagey-imgcoords.top; $cursorshade.css({ // keep shaded area sized and positioned proportionately to area being magnified visibility: '', width: csw, height: csh, top: Math.min(specs.imagesize.h-csh-csb, Math.max(0, y-(csb+csh)/2)) + imgcoords.top, left: Math.min(specs.imagesize.w-csw-csb, Math.max(0, x-(csb+csw)/2)) + imgcoords.left }); var newx=-x*specs.curpower+specs.magsize.w/2 //calculate x coord to move enlarged image var newy=-y*specs.curpower+specs.magsize.h/2 $maginner.css({left:fiz.getboundary('left', newx, specs), top:fiz.getboundary('top', newy, specs)}) specs.$statusdiv.css({left:pagex-10, top:pagey+20}) specs.lastpagex=pagex //cache last pagex value (either e.pageX or lastpagex), as FF1.5 returns undefined for e.pageX for "DOMMouseScroll" event specs.lastpagey=pagey }, magnifyimage: function($tracker, e, zoomrange){ if (!e.detail && !e.wheelDelta){e = e.originalEvent;} var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down var zoomdir=(delta<=-120)? "out" : "in" var specs=$tracker.data('specs') var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower var newpower=(zoomdir=="in")? Math.min(power+1, zoomrange[1]) : Math.max(power-1, zoomrange[0]) //get new power var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier magnifier.$image.css({width:nd[0], height:nd[1]}) specs.curpower=newpower //set current power to new power after magnification specs.$statusdiv.html('Current Zoom: '+specs.curpower) this.showstatusdiv(specs, 0, 500) $tracker.trigger('mousemove') }, init: function($, $img, options){ var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(), fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0}; setting.largeimage = setting.largeimage || $img.get(0).src; $magnifier=$('<div class="magnifyarea" style="position:absolute;width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />') .append('<div style="position:relative;left:0;top:0;" />') .appendTo(document.body) //create magnifier container //following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other: if(setting.cursorshade){ $cursorshade = $('<div class="cursorshade" style="visibility:hidden;position:absolute;left:0;top:0;" />') .css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor}) .appendTo(document.body); } else { $cursorshade = $('<div />'); //dummy shade div to satisfy $tracker.data('specs') } $statusdiv = $('<div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;" />') .html('<img src="'+this.loadinggif+'" />') .appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info $tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />') .css({backgroundImage: (this.isie? 'url(cannotbe)' : 'none')}) .appendTo(document.body); $(window).resize(function(){ //in case resizing the window repostions the image var o = $img.offset(); $tracker.css({left: o.left, top: o.top}); }); function getspecs($maginner, $bigimage){ //get specs function var magsize={w:$magnifier.width(), h:$magnifier.height()} var imagesize={w:w, h:h} var power=(setting.zoomrange)? setting.zoomrange[0] : ($bigimage.width()/w).toFixed(5) $tracker.data('specs', { $statusdiv: $statusdiv, statustimer: null, magnifier: {$outer:$magnifier, $inner:$maginner, $image:$bigimage}, magsize: magsize, magpos: setting.magnifierpos, imagesize: imagesize, curpower: power, coords: getcoords(), csborder: $cursorshade.outerWidth(), lo: setting.leftoffset, ro: setting.rightoffset }) } function getcoords(){ //get coords of thumb image function var offset=$tracker.offset() //get image's tracker div's offset from document return {left:offset.left, top:offset.top} } $tracker.mouseover(function(e){ $cursorshade.add($magnifier).add($statusdiv).removeClass('featuredimagezoomerhidden'); $tracker.data('premouseout', false); }).mouseout(function(e){ $cursorshade.add($magnifier).add($statusdiv.not('.preloadevt')).addClass('featuredimagezoomerhidden'); $tracker.data('premouseout', true); }).mousemove(function(e){ //save tracker mouse position for initial magnifier appearance, if needed lastpage.pageX = e.pageX; lastpage.pageY = e.pageY; }); $tracker.one('mouseover', function(e){ var $maginner=$magnifier.find('div:eq(0)') var $bigimage=$('<img src="'+setting.largeimage+'"/>').appendTo($maginner) var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0] $img.css({opacity:0.1}) //"dim" image while large image is loading var imgcoords=getcoords() $statusdiv.css({left:imgcoords.left+w/2-$statusdiv.width()/2, top:imgcoords.top+h/2-$statusdiv.height()/2, visibility:'visible'}) $bigimage.bind('loadevt', function(){ //magnified image ONLOAD event function (to be triggered later) $img.css({opacity:1}) //restore thumb image opacity $statusdiv.empty().css({border:'1px solid black', background:'#C0C0C0', padding:'4px', font:'bold 13px Arial', opacity:0.8}).hide().removeClass('preloadevt'); if($tracker.data('premouseout')){ $statusdiv.addClass('featuredimagezoomerhidden'); } if (setting.zoomrange){ //if set large image to a specific power var nd=[w*setting.zoomrange[0], h*setting.zoomrange[0]] //calculate dimensions of new enlarged image $bigimage.css({width:nd[0], height:nd[1]}) } getspecs($maginner, $bigimage) //remember various info about thumbnail and magnifier $magnifier.css({display:'none', visibility:'visible'}) $tracker.mouseover(function(e){ //image onmouseover $tracker.data('specs').coords=getcoords() //refresh image coords (from upper left edge of document) fiz.showimage($, $tracker, $magnifier, showstatus) }) $tracker.mousemove(function(e){ //image onmousemove fiz.moveimage($tracker, $maginner, $cursorshade, e) }) if (!$tracker.data('premouseout')){ fiz.showimage($, $tracker, $magnifier, showstatus); fiz.moveimage($tracker, $maginner, $cursorshade, lastpage); } $tracker.mouseout(function(e){ //image onmouseout fiz.hideimage($tracker, $magnifier, showstatus) }).css({cursor: fiz.magnifycursor}); if (setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]){ //if zoom range enabled $tracker.bind('DOMMouseScroll mousewheel', function(e){ fiz.magnifyimage($tracker, e, setting.zoomrange); e.preventDefault(); }); } }) //end $bigimage onload if ($bigimage.get(0).complete){ //if image has already loaded (account for IE, Opera not firing onload event if so) $bigimage.trigger('loadevt') } else{ $bigimage.bind('load', function(){$bigimage.trigger('loadevt')}) } }) }, iname: (function(){var itag = jQuery('<img />'), iname = itag.get(0).tagName; itag.remove(); return iname;})() }; jQuery.fn.addimagezoom=function(options){ var $=jQuery; return this.each(function(){ //return jQuery obj if (this.tagName !== featuredimagezoomer.iname) return true; //skip to next matched element featuredimagezoomer.init($, $(this), options); }); } </script> <script type="text/javascript"> jQuery(document).ready(function($){ $('#image1').addimagezoom({ zoomrange: [3, 10], magnifiersize: [300,300], magnifierpos: 'right', cursorshade: true, largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option! }) $('#image2').addimagezoom({ zoomrange: [5, 5], magnifiersize: [400,400], magnifierpos: 'right', cursorshade: true, cursorshadecolor: 'pink', cursorshadeopacity: 0.3, cursorshadeborder: '1px solid red', largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option! }) $('#image3').addimagezoom() }) </script>

Step 2: Add the below HTML  to the body of your page.

<p><img id="image1" border="0" src="http://i44.tinypic.com/11icnk5.jpg" style="width:300px;height:225px" /><p> <p><img id="image2" border="0" src="http://i44.tinypic.com/11icnk5.jpg" style="width:300px;height:225px" /><p> <p><img id="image3" border="0" src="http://i44.tinypic.com/11icnk5.jpg" style="width:300px;height:225px" /><p>