/*Featured Image Zoomer (May 8th, 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
*/
// Feb 21st, 2011: Script updated to v1.5, which now includes new feature by jscheuer1 (http://www.dynamicdrive.com/forums/member.php?u=2033) to show optional "magnifying lens" while over thumbnail image.
// March 1st, 2011: Script updated to v1.51. Minor improvements to inner workings of script.
jQuery.noConflict()
jQuery('head').append('');
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+'
Use Mouse Wheel to Zoom In/Out
');
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 : (val0)? 0 : (val')
.append('')
.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 = $('')
.css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor})
.appendTo(document.body);
} else {
$cursorshade = $(''); //dummy shade div to satisfy $tracker.data('specs')
}
$statusdiv = $('')
.html('')
.appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info
$tracker = $('')
.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=$('').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(''), 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);
});
}