modify with new option
$('#image1').addimagezoom({
ID:'image1',
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg' //<-- No comma after last option!
})
modify function
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};
featuredimagezoomer[setting.ID]=setting;
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});
});
modify function
$tracker.one('mouseover', function(e){
var $maginner=$magnifier.find('div:eq(0)')
var $bigimage=$('<img id="'+setting.ID+'Large" 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;})()
};
new function
function Swap(id,thumb,large){
var t=document.getElementById(id),m=document.getElementById(id+'Large');
if (t&&featuredimagezoomer[id]){
t.src=thumb;
featuredimagezoomer[id].largeimage=large||thumb;
if (m){
m.src=large||thumb;
}
}
}
HTML
<p><img id="image1" border="0" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" style="width:300px;height:225px" /><p>
<input type="button" name="" value="Swap" onmouseup="Swap('image1','http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg','http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg');"/>
<input type="button" name="" value="Swap" onmouseup="Swap('image1','http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg');"/>
see also
http://www.vicsjavascripts.org.uk/ImageViewerIV/ImageViewerIV.htm