jQuery Powerzoom
HTML
<script src="http://www.dynamicdrive.com/dynamicindex4/ddpowerzoomer.js"></script>
<div>
<img src="\\10.155.141.55\iDCS_LabelInsight_REPO\PROCESSED\4849458\4849458.tiff"/>
</div>
JavaScript
/*Image Power Zoomer v1.1 (June 18th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
//June 18th, 10: Adds ability to specify a different, higher resolution version of the original image as the image shown inside the magnifying glass.
jQuery.noConflict()
var ddpowerzoomer={
dsetting: {defaultpower:2, powerrange:[2,7], magnifiersize:[75, 75]},
mousewheelevt: (/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel", //FF doesn't recognize mousewheel as of FF3.x
$magnifier: {outer:null, inner:null, image:null},
activeimage: null,
movemagnifier:function(e, moveBol, zoomdir){
var activeimage=ddpowerzoomer.activeimage //get image mouse is currently over
var activeimginfo=activeimage.info
var coords=activeimginfo.coords //get offset coordinates of image relative to upper left corner of page
var $magnifier=ddpowerzoomer.$magnifier
var magdimensions=activeimginfo.magdimensions //get dimensions of magnifier
var power=activeimginfo.power.current
var powerrange=activeimginfo.power.range
var x=e.pageX-coords.left //get x coords of mouse within image (where top corner of image is 0)
var y=e.pageY-coords.top
if (moveBol==true){
if (e.pageX>=coords.left && e.pageX<=coords.right && e.pageY>=coords.top && e.pageY<=coords.bottom) //if mouse is within currently within boundaries of active base image
$magnifier.outer.css({left:e.pageX-magdimensions[0]/2, top:e.pageY-magdimensions[1]/2}) //move magnifier so it follows the cursor
else{ //if mouse is outside base image
ddpowerzoomer.activeimage=null
$magnifier.outer.hide() //hide magnifier
}
}
else if (zoomdir){ //if zoom in
var od=activeimginfo.dimensions //get dimensions of image
...