| 1 | /*Featured Image Zoomer (May 8th, 2010)
|
|---|
| 2 | * This notice must stay intact for usage
|
|---|
| 3 | * Author: Dynamic Drive at http://www.dynamicdrive.com/
|
|---|
| 4 | * Visit http://www.dynamicdrive.com/ for full source code
|
|---|
| 5 | */
|
|---|
| 6 |
|
|---|
| 7 | // 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.
|
|---|
| 8 | // March 1st, 2011: Script updated to v1.51. Minor improvements to inner workings of script.
|
|---|
| 9 |
|
|---|
| 10 | jQuery.noConflict()
|
|---|
| 11 |
|
|---|
| 12 | jQuery('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>');
|
|---|
| 13 |
|
|---|
| 14 | var featuredimagezoomer={
|
|---|
| 15 | loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
|
|---|
| 16 | magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image
|
|---|
| 17 |
|
|---|
| 18 | /////NO NEED TO EDIT BEYOND HERE////////////////
|
|---|
| 19 | dsetting: { //default settings
|
|---|
| 20 | magnifierpos: 'right',
|
|---|
| 21 | magnifiersize:[200, 200],
|
|---|
| 22 | cursorshadecolor: '#fff',
|
|---|
| 23 | cursorshadeopacity: 0.3,
|
|---|
| 24 | cursorshadeborder: '1px solid black',
|
|---|
| 25 | cursorshade: false,
|
|---|
| 26 | leftoffset: 15, //offsets here are used (added to) the width of the magnifyarea when
|
|---|
| 27 | rightoffset: 10 //calculating space requirements and to position it visa vis any drop shadow
|
|---|
| 28 | },
|
|---|
| 29 | isie: (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)return true;@end @*/return false;})(), //is this IE?
|
|---|
| 30 |
|
|---|
| 31 | showimage: function($, $tracker, $mag, showstatus){
|
|---|
| 32 | var specs=$tracker.data('specs'), d=specs.magpos, fiz=this;
|
|---|
| 33 | var coords=$tracker.data('specs').coords //get coords of tracker (from upper corner of document)
|
|---|
| 34 | specs.windimensions={w:$(window).width(), h:$(window).height()}; //remember window dimensions
|
|---|
| 35 | var magcoords={} //object to store coords magnifier DIV should move to
|
|---|
| 36 | magcoords.left = coords.left + (d === 'left'? -specs.magsize.w - specs.lo : $tracker.width() + specs.ro);
|
|---|
| 37 | //switch sides for magnifiers that don't have enough room to display on the right if there's room on the left:
|
|---|
| 38 | if(d!=='left' && magcoords.left + specs.magsize.w + specs.lo >= specs.windimensions.w && coords.left - specs.magsize.w >= specs.lo){
|
|---|
| 39 | magcoords.left = coords.left - specs.magsize.w - specs.lo;
|
|---|
| 40 | } else if(d==='left' && magcoords.left < specs.ro) { //if there's no room on the left, move to the right
|
|---|
| 41 | magcoords.left = coords.left + $tracker.width() + specs.ro;
|
|---|
| 42 | }
|
|---|
| 43 | $mag.css({left: magcoords.left, top:coords.top}).show(); //position magnifier DIV on page
|
|---|
| 44 | specs.$statusdiv.html('Current Zoom: '+specs.curpower+'<div style="font-size:80%">Use Mouse Wheel to Zoom In/Out</div>');
|
|---|
| 45 | if (showstatus) //show status DIV? (only when a range of zoom is defined)
|
|---|
| 46 | fiz.showstatusdiv(specs, 400, 2000);
|
|---|
| 47 | },
|
|---|
| 48 |
|
|---|
| 49 | hideimage: function($tracker, $mag, showstatus){
|
|---|
| 50 | var specs=$tracker.data('specs');
|
|---|
| 51 | $mag.hide();
|
|---|
| 52 | if (showstatus)
|
|---|
| 53 | this.hidestatusdiv(specs);
|
|---|
| 54 | },
|
|---|
| 55 |
|
|---|
| 56 | showstatusdiv: function(specs, fadedur, showdur){
|
|---|
| 57 | clearTimeout(specs.statustimer)
|
|---|
| 58 | specs.$statusdiv.fadeIn(fadedur) //show status div
|
|---|
| 59 | specs.statustimer=setTimeout(function(){featuredimagezoomer.hidestatusdiv(specs)}, showdur) //hide status div after delay
|
|---|
| 60 | },
|
|---|
| 61 |
|
|---|
| 62 | hidestatusdiv: function(specs){
|
|---|
| 63 | specs.$statusdiv.stop(true, true).hide()
|
|---|
| 64 | },
|
|---|
| 65 |
|
|---|
| 66 | getboundary: function(b, val, specs){ //function to set x and y boundaries magnified image can move to (moved outside moveimage for efficiency)
|
|---|
| 67 | if (b=="left"){
|
|---|
| 68 | var rb=-specs.imagesize.w*specs.curpower+specs.magsize.w
|
|---|
| 69 | return (val>0)? 0 : (val<rb)? rb : val
|
|---|
| 70 | }
|
|---|
| 71 | else{
|
|---|
| 72 | var tb=-specs.imagesize.h*specs.curpower+specs.magsize.h
|
|---|
| 73 | return (val>0)? 0 : (val<tb)? tb : val
|
|---|
| 74 | }
|
|---|
| 75 | },
|
|---|
| 76 |
|
|---|
| 77 | moveimage: function($tracker, $maginner, $cursorshade, e){
|
|---|
| 78 | var specs=$tracker.data('specs'), csw = Math.round(specs.magsize.w/specs.curpower), csh = Math.round(specs.magsize.h/specs.curpower),
|
|---|
| 79 | csb = specs.csborder, fiz = this, imgcoords=specs.coords, pagex=(e.pageX || specs.lastpagex), pagey=(e.pageY || specs.lastpagey),
|
|---|
| 80 | x=pagex-imgcoords.left, y=pagey-imgcoords.top;
|
|---|
| 81 | $cursorshade.css({ // keep shaded area sized and positioned proportionately to area being magnified
|
|---|
| 82 | visibility: '',
|
|---|
| 83 | width: csw,
|
|---|
| 84 | height: csh,
|
|---|
| 85 | top: Math.min(specs.imagesize.h-csh-csb, Math.max(0, y-(csb+csh)/2)) + imgcoords.top,
|
|---|
| 86 | left: Math.min(specs.imagesize.w-csw-csb, Math.max(0, x-(csb+csw)/2)) + imgcoords.left
|
|---|
| 87 | });
|
|---|
| 88 | var newx=-x*specs.curpower+specs.magsize.w/2 //calculate x coord to move enlarged image
|
|---|
| 89 | var newy=-y*specs.curpower+specs.magsize.h/2
|
|---|
| 90 | $maginner.css({left:fiz.getboundary('left', newx, specs), top:fiz.getboundary('top', newy, specs)})
|
|---|
| 91 | specs.$statusdiv.css({left:pagex-10, top:pagey+20})
|
|---|
| 92 | specs.lastpagex=pagex //cache last pagex value (either e.pageX or lastpagex), as FF1.5 returns undefined for e.pageX for "DOMMouseScroll" event
|
|---|
| 93 | specs.lastpagey=pagey
|
|---|
| 94 | },
|
|---|
| 95 |
|
|---|
| 96 | magnifyimage: function($tracker, e, zoomrange){
|
|---|
| 97 | var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
|
|---|
| 98 | var zoomdir=(delta<=-120)? "out" : "in"
|
|---|
| 99 | var specs=$tracker.data('specs')
|
|---|
| 100 | var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower
|
|---|
| 101 | var newpower=(zoomdir=="in")? Math.min(power+1, zoomrange[1]) : Math.max(power-1, zoomrange[0]) //get new power
|
|---|
| 102 | var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier
|
|---|
| 103 | magnifier.$image.css({width:nd[0], height:nd[1]})
|
|---|
| 104 | specs.curpower=newpower //set current power to new power after magnification
|
|---|
| 105 | specs.$statusdiv.html('Current Zoom: '+specs.curpower)
|
|---|
| 106 | this.showstatusdiv(specs, 0, 500)
|
|---|
| 107 | $tracker.trigger('mousemove')
|
|---|
| 108 | },
|
|---|
| 109 |
|
|---|
| 110 | init: function($, $img, options){
|
|---|
| 111 | var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
|
|---|
| 112 | fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0};
|
|---|
| 113 | setting.largeimage = setting.largeimage || $img.get(0).src;
|
|---|
| 114 | $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;" />')
|
|---|
| 115 | .append('<div style="position:relative;left:0;top:0;" />')
|
|---|
| 116 | .appendTo(document.body) //create magnifier container
|
|---|
| 117 | //following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other:
|
|---|
| 118 | if(setting.cursorshade){
|
|---|
| 119 | $cursorshade = $('<div class="cursorshade" style="visibility:hidden;position:absolute;left:0;top:0;" />')
|
|---|
| 120 | .css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor})
|
|---|
| 121 | .appendTo(document.body);
|
|---|
| 122 | } else {
|
|---|
| 123 | $cursorshade = $('<div />'); //dummy shade div to satisfy $tracker.data('specs')
|
|---|
| 124 | }
|
|---|
| 125 | $statusdiv = $('<div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;" />')
|
|---|
| 126 | .html('<img src="'+this.loadinggif+'" />')
|
|---|
| 127 | .appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info
|
|---|
| 128 | $tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />')
|
|---|
| 129 | .css({backgroundImage: (this.isie? 'url(cannotbe)' : 'none')})
|
|---|
| 130 | .appendTo(document.body);
|
|---|
| 131 | $(window).resize(function(){ //in case resizing the window repostions the image
|
|---|
| 132 | var o = $img.offset();
|
|---|
| 133 | $tracker.css({left: o.left, top: o.top});
|
|---|
| 134 | });
|
|---|
| 135 |
|
|---|
| 136 | function getspecs($maginner, $bigimage){ //get specs function
|
|---|
| 137 | var magsize={w:$magnifier.width(), h:$magnifier.height()}
|
|---|
| 138 | var imagesize={w:w, h:h}
|
|---|
| 139 | var power=(setting.zoomrange)? setting.zoomrange[0] : ($bigimage.width()/w).toFixed(5)
|
|---|
| 140 | $tracker.data('specs', {
|
|---|
| 141 | $statusdiv: $statusdiv,
|
|---|
| 142 | statustimer: null,
|
|---|
| 143 | magnifier: {$outer:$magnifier, $inner:$maginner, $image:$bigimage},
|
|---|
| 144 | magsize: magsize,
|
|---|
| 145 | magpos: setting.magnifierpos,
|
|---|
| 146 | imagesize: imagesize,
|
|---|
| 147 | curpower: power,
|
|---|
| 148 | coords: getcoords(),
|
|---|
| 149 | csborder: $cursorshade.outerWidth(),
|
|---|
| 150 | lo: setting.leftoffset,
|
|---|
| 151 | ro: setting.rightoffset
|
|---|
| 152 | })
|
|---|
| 153 | }
|
|---|
| 154 |
|
|---|
| 155 | function getcoords(){ //get coords of thumb image function
|
|---|
| 156 | var offset=$tracker.offset() //get image's tracker div's offset from document
|
|---|
| 157 | return {left:offset.left, top:offset.top}
|
|---|
| 158 | }
|
|---|
| 159 |
|
|---|
| 160 | $tracker.mouseover(function(e){
|
|---|
| 161 | $cursorshade.add($magnifier).add($statusdiv).removeClass('featuredimagezoomerhidden');
|
|---|
| 162 | $tracker.data('premouseout', false);
|
|---|
| 163 | }).mouseout(function(e){
|
|---|
| 164 | $cursorshade.add($magnifier).add($statusdiv.not('.preloadevt')).addClass('featuredimagezoomerhidden');
|
|---|
| 165 | $tracker.data('premouseout', true);
|
|---|
| 166 | }).mousemove(function(e){ //save tracker mouse position for initial magnifier appearance, if needed
|
|---|
| 167 | lastpage.pageX = e.pageX;
|
|---|
| 168 | lastpage.pageY = e.pageY;
|
|---|
| 169 | });
|
|---|
| 170 |
|
|---|
| 171 | $tracker.one('mouseover', function(e){
|
|---|
| 172 | var $maginner=$magnifier.find('div:eq(0)')
|
|---|
| 173 | var $bigimage=$('<img src="'+setting.largeimage+'"/>').appendTo($maginner)
|
|---|
| 174 | var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]
|
|---|
| 175 | $img.css({opacity:0.1}) //"dim" image while large image is loading
|
|---|
| 176 | var imgcoords=getcoords()
|
|---|
| 177 | $statusdiv.css({left:imgcoords.left+w/2-$statusdiv.width()/2, top:imgcoords.top+h/2-$statusdiv.height()/2, visibility:'visible'})
|
|---|
| 178 | $bigimage.bind('loadevt', function(){ //magnified image ONLOAD event function (to be triggered later)
|
|---|
| 179 | $img.css({opacity:1}) //restore thumb image opacity
|
|---|
| 180 | $statusdiv.empty().css({border:'1px solid black', background:'#C0C0C0', padding:'4px', font:'bold 13px Arial', opacity:0.8}).hide().removeClass('preloadevt');
|
|---|
| 181 | if($tracker.data('premouseout')){
|
|---|
| 182 | $statusdiv.addClass('featuredimagezoomerhidden');
|
|---|
| 183 | }
|
|---|
| 184 | if (setting.zoomrange){ //if set large image to a specific power
|
|---|
| 185 | var nd=[w*setting.zoomrange[0], h*setting.zoomrange[0]] //calculate dimensions of new enlarged image
|
|---|
| 186 | $bigimage.css({width:nd[0], height:nd[1]})
|
|---|
| 187 | }
|
|---|
| 188 | getspecs($maginner, $bigimage) //remember various info about thumbnail and magnifier
|
|---|
| 189 | $magnifier.css({display:'none', visibility:'visible'})
|
|---|
| 190 | $tracker.mouseover(function(e){ //image onmouseover
|
|---|
| 191 | $tracker.data('specs').coords=getcoords() //refresh image coords (from upper left edge of document)
|
|---|
| 192 | fiz.showimage($, $tracker, $magnifier, showstatus)
|
|---|
| 193 | })
|
|---|
| 194 | $tracker.mousemove(function(e){ //image onmousemove
|
|---|
| 195 | fiz.moveimage($tracker, $maginner, $cursorshade, e)
|
|---|
| 196 | })
|
|---|
| 197 | if (!$tracker.data('premouseout')){
|
|---|
| 198 | fiz.showimage($, $tracker, $magnifier, showstatus);
|
|---|
| 199 | fiz.moveimage($tracker, $maginner, $cursorshade, lastpage);
|
|---|
| 200 | }
|
|---|
| 201 | $tracker.mouseout(function(e){ //image onmouseout
|
|---|
| 202 | fiz.hideimage($tracker, $magnifier, showstatus)
|
|---|
| 203 | }).css({cursor: fiz.magnifycursor});
|
|---|
| 204 | if (setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]){ //if zoom range enabled
|
|---|
| 205 | $tracker.bind('DOMMouseScroll mousewheel', function(e){
|
|---|
| 206 | fiz.magnifyimage($tracker, e, setting.zoomrange);
|
|---|
| 207 | e.preventDefault();
|
|---|
| 208 | });
|
|---|
| 209 | }
|
|---|
| 210 | }) //end $bigimage onload
|
|---|
| 211 | if ($bigimage.get(0).complete){ //if image has already loaded (account for IE, Opera not firing onload event if so)
|
|---|
| 212 | $bigimage.trigger('loadevt')
|
|---|
| 213 | }
|
|---|
| 214 | else{
|
|---|
| 215 | $bigimage.bind('load', function(){$bigimage.trigger('loadevt')})
|
|---|
| 216 | }
|
|---|
| 217 | })
|
|---|
| 218 | },
|
|---|
| 219 |
|
|---|
| 220 | iname: (function(){var itag = jQuery('<img />'), iname = itag.get(0).tagName; itag.remove(); return iname;})()
|
|---|
| 221 | };
|
|---|
| 222 |
|
|---|
| 223 | jQuery.fn.addimagezoom=function(options){
|
|---|
| 224 | var $=jQuery;
|
|---|
| 225 | return this.each(function(){ //return jQuery obj
|
|---|
| 226 | if (this.tagName !== featuredimagezoomer.iname)
|
|---|
| 227 | return true; //skip to next matched element
|
|---|
| 228 | featuredimagezoomer.init($, $(this), options);
|
|---|
| 229 | });
|
|---|
| 230 | } |
|---|
