jQuery elevateZoom Demo

").append(e.replace(yn,"")).find(i):e)}),this},v.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(e,t){v.fn[t]=function(e){return this.on(t,e)}}),v.each(["get","post"],function(e,n){v[n]=function(e,r,i,s){return v.isFunction(r)&&(s=s||i,i=r,r=t),v.ajax({type:n,url:e,data:r,success:i,dataType:s})}}),v.extend({getScript:function(e,n){return v.get(e,t,n,"script")},getJSON:function(e,t,n){return v.get(e,t,n,"json")},ajaxSetup:function(e,t){return t?Ln(e,v.ajaxSettings):(t=e,e=v.ajaxSettings),Ln(e,t),e},ajaxSettings:{url:cn,isLocal:dn.test(ln[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded; charset=UTF-8",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":Tn},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":e.String,"text html":!0,"text json":v.parseJSON,"text xml":v.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:Cn(Sn),ajaxTransport:Cn(xn),ajax:function(e,n){function T(e,n,s,a){var l,y,b,w,S,T=n;if(E===2)return;E=2,u&&clearTimeout(u),o=t,i=a||"",x.readyState=e>0?4:0,s&&(w=An(c,x,s));if(e>=200&&e<300||e===304)c.ifModified&&(S=x.getResponseHeader("Last-Modified"),S&&(v.lastModified[r]=S),S=x.getResponseHeader("Etag"),S&&(v.etag[r]=S)),e===304?(T="notmodified",l=!0):(l=On(c,w),T=l.state,y=l.data,b=l.error,l=!b);else{b=T;if(!T||e)T="error",e<0&&(e=0)}x.status=e,x.statusText=(n||T)+"",l?d.resolveWith(h,[y,T,x]):d.rejectWith(h,[x,T,b]),x.statusCode(g),g=t,f&&p.trigger("ajax"+(l?"Success":"Error"),[x,c,l?y:b]),m.fireWith(h,[x,T]),f&&(p.trigger("ajaxComplete",[x,c]),--v.active||v.event.trigger("ajaxStop"))}typeof e=="object"&&(n=e,e=t),n=n||{};var r,i,s,o,u,a,f,l,c=v.ajaxSetup({},n),h=c.context||c,p=h!==c&&(h.nodeType||h instanceof v)?v(h):v.event,d=v.Deferred(),m=v.Callbacks("once memory"),g=c.statusCode||{},b={},w={},E=0,S="canceled",x={readyState:0,setRequestHeader:function(e,t){if(!E){var n=e.toLowerCase();e=w[n]=w[n]||e,b[e]=t}return this},getAllResponseHeaders:function(){return E===2?i:null},getResponseHeader:function(e){var n;if(E===2){if(!s){s={};while(n=pn.exec(i))s[n[1].toLowerCase()]=n[2]}n=s[e.toLowerCase()]}return n===t?null:n},overrideMimeType:function(e){return E||(c.mimeType=e),this},abort:function(e){return e=e||S,o&&o.abort(e),T(0,e),this}};d.promise(x),x.success=x.done,x.error=x.fail,x.complete=m.add,x.statusCode=function(e){if(e){var t;if(E<2)for(t in e)g[t]=[g[t],e[t]];else t=e[x.status],x.always(t)}return this},c.url=((e||c.url)+"").replace(hn,"").replace(mn,ln[1]+"//"),c.dataTypes=v.trim(c.dataType||"*").toLowerCase().split(y),c.crossDomain==null&&(a=wn.exec(c.url.toLowerCase()),c.crossDomain=!(!a||a[1]===ln[1]&&a[2]===ln[2]&&(a[3]||(a[1]==="http:"?80:443))==(ln[3]||(ln[1]==="http:"?80:443)))),c.data&&c.processData&&typeof c.data!="string"&&(c.data=v.param(c.data,c.traditional)),kn(Sn,c,n,x);if(E===2)return x;f=c.global,c.type=c.type.toUpperCase(),c.hasContent=!vn.test(c.type),f&&v.active++===0&&v.event.trigger("ajaxStart");if(!c.hasContent){c.data&&(c.url+=(gn.test(c.url)?"&":"?")+c.data,delete c.data),r=c.url;if(c.cache===!1){var N=v.now(),C=c.url.replace(bn,"$1_="+N);c.url=C+(C===c.url?(gn.test(c.url)?"&":"?")+"_="+N:"")}}(c.data&&c.hasContent&&c.contentType!==!1||n.contentType)&&x.setRequestHeader("Content-Type",c.contentType),c.ifModified&&(r=r||c.url,v.lastModified[r]&&x.setRequestHeader("If-Modified-Since",v.lastModified[r]),v.etag[r]&&x.setRequestHeader("If-None-Match",v.etag[r])),x.setRequestHeader("Accept",c.dataTypes[0]&&c.accepts[c.dataTypes[0]]?c.accepts[c.dataTypes[0]]+(c.dataTypes[0]!=="*"?", "+Tn+"; q=0.01":""):c.accepts["*"]);for(l in c.headers)x.setRequestHeader(l,c.headers[l]);if(!c.beforeSend||c.beforeSend.call(h,x,c)!==!1&&E!==2){S="abort";for(l in{success:1,error:1,complete:1})x[l](c[l]);o=kn(xn,c,n,x);if(!o)T(-1,"No Transport");else{x.readyState=1,f&&p.trigger("ajaxSend",[x,c]),c.async&&c.timeout>0&&(u=setTimeout(function(){x.abort("timeout")},c.timeout));try{E=1,o.send(b,T)}catch(k){if(!(E<2))throw k;T(-1,k)}}return x}return x.abort()},active:0,lastModified:{},etag:{}});var Mn=[],_n=/\?/,Dn=/(=)\?(?=&|$)|\?\?/,Pn=v.now();v.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Mn.pop()||v.expando+"_"+Pn++;return this[e]=!0,e}}),v.ajaxPrefilter("json jsonp",function(n,r,i){var s,o,u,a=n.data,f=n.url,l=n.jsonp!==!1,c=l&&Dn.test(f),h=l&&!c&&typeof a=="string"&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Dn.test(a);if(n.dataTypes[0]==="jsonp"||c||h)return s=n.jsonpCallback=v.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,o=e[s],c?n.url=f.replace(Dn,"$1"+s):h?n.data=a.replace(Dn,"$1"+s):l&&(n.url+=(_n.test(f)?"&":"?")+n.jsonp+"="+s),n.converters["script json"]=function(){return u||v.error(s+" was not called"),u[0]},n.dataTypes[0]="json",e[s]=function(){u=arguments},i.always(function(){e[s]=o,n[s]&&(n.jsonpCallback=r.jsonpCallback,Mn.push(s)),u&&v.isFunction(o)&&o(u[0]),u=o=t}),"script"}),v.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(e){return v.globalEval(e),e}}}),v.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),v.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=i.head||i.getElementsByTagName("head")[0]||i.documentElement;return{send:function(s,o){n=i.createElement("script"),n.async="async",e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,i){if(i||!n.readyState||/loaded|complete/.test(n.readyState))n.onload=n.onreadystatechange=null,r&&n.parentNode&&r.removeChild(n),n=t,i||o(200,"success")},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(0,1)}}}});var Hn,Bn=e.ActiveXObject?function(){for(var e in Hn)Hn[e](0,1)}:!1,jn=0;v.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&Fn()||In()}:Fn,function(e){v.extend(v.support,{ajax:!!e,cors:!!e&&"withCredentials"in e})}(v.ajaxSettings.xhr()),v.support.ajax&&v.ajaxTransport(function(n){if(!n.crossDomain||v.support.cors){var r;return{send:function(i,s){var o,u,a=n.xhr();n.username?a.open(n.type,n.url,n.async,n.username,n.password):a.open(n.type,n.url,n.async);if(n.xhrFields)for(u in n.xhrFields)a[u]=n.xhrFields[u];n.mimeType&&a.overrideMimeType&&a.overrideMimeType(n.mimeType),!n.crossDomain&&!i["X-Requested-With"]&&(i["X-Requested-With"]="XMLHttpRequest");try{for(u in i)a.setRequestHeader(u,i[u])}catch(f){}a.send(n.hasContent&&n.data||null),r=function(e,i){var u,f,l,c,h;try{if(r&&(i||a.readyState===4)){r=t,o&&(a.onreadystatechange=v.noop,Bn&&delete Hn[o]);if(i)a.readyState!==4&&a.abort();else{u=a.status,l=a.getAllResponseHeaders(),c={},h=a.responseXML,h&&h.documentElement&&(c.xml=h);try{c.text=a.responseText}catch(p){}try{f=a.statusText}catch(p){f=""}!u&&n.isLocal&&!n.crossDomain?u=c.text?200:404:u===1223&&(u=204)}}}catch(d){i||s(-1,d)}c&&s(u,f,c,l)},n.async?a.readyState===4?setTimeout(r,0):(o=++jn,Bn&&(Hn||(Hn={},v(e).unload(Bn)),Hn[o]=r),a.onreadystatechange=r):r()},abort:function(){r&&r(0,1)}}}});var qn,Rn,Un=/^(?:toggle|show|hide)$/,zn=new RegExp("^(?:([-+])=|)("+m+")([a-z%]*)$","i"),Wn=/queueHooks$/,Xn=[Gn],Vn={"*":[function(e,t){var n,r,i=this.createTween(e,t),s=zn.exec(t),o=i.cur(),u=+o||0,a=1,f=20;if(s){n=+s[2],r=s[3]||(v.cssNumber[e]?"":"px");if(r!=="px"&&u){u=v.css(i.elem,e,!0)||n||1;do a=a||".5",u/=a,v.style(i.elem,e,u+r);while(a!==(a=i.cur()/o)&&a!==1&&--f)}i.unit=r,i.start=u,i.end=s[1]?u+(s[1]+1)*n:n}return i}]};v.Animation=v.extend(Kn,{tweener:function(e,t){v.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;r-1,f={},l={},c,h;a?(l=i.position(),c=l.top,h=l.left):(c=parseFloat(o)||0,h=parseFloat(u)||0),v.isFunction(t)&&(t=t.call(e,n,s)),t.top!=null&&(f.top=t.top-s.top+c),t.left!=null&&(f.left=t.left-s.left+h),"using"in t?t.using.call(e,f):i.css(f)}},v.fn.extend({position:function(){if(!this[0])return;var e=this[0],t=this.offsetParent(),n=this.offset(),r=er.test(t[0].nodeName)?{top:0,left:0}:t.offset();return n.top-=parseFloat(v.css(e,"marginTop"))||0,n.left-=parseFloat(v.css(e,"marginLeft"))||0,r.top+=parseFloat(v.css(t[0],"borderTopWidth"))||0,r.left+=parseFloat(v.css(t[0],"borderLeftWidth"))||0,{top:n.top-r.top,left:n.left-r.left}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||i.body;while(e&&!er.test(e.nodeName)&&v.css(e,"position")==="static")e=e.offsetParent;return e||i.body})}}),v.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);v.fn[e]=function(i){return v.access(this,function(e,i,s){var o=tr(e);if(s===t)return o?n in o?o[n]:o.document.documentElement[i]:e[i];o?o.scrollTo(r?v(o).scrollLeft():s,r?s:v(o).scrollTop()):e[i]=s},e,i,arguments.length,null)}}),v.each({Height:"height",Width:"width"},function(e,n){v.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){v.fn[i]=function(i,s){var o=arguments.length&&(r||typeof i!="boolean"),u=r||(i===!0||s===!0?"margin":"border");return v.access(this,function(n,r,i){var s;return v.isWindow(n)?n.document.documentElement["client"+e]:n.nodeType===9?(s=n.documentElement,Math.max(n.body["scroll"+e],s["scroll"+e],n.body["offset"+e],s["offset"+e],s["client"+e])):i===t?v.css(n,r,i,u):v.style(n,r,i,u)},n,o?i:t,o,null)}})}),e.jQuery=e.$=v,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return v})})(window); -------------------------------------------------------------------------------- /jquery.elevateZoom-3.0.8.min.js: -------------------------------------------------------------------------------- 1 | /* jQuery elevateZoom 3.0.8 - Demo's and documentation: - www.elevateweb.co.uk/image-zoom - Copyright (c) 2013 Andrew Eades - www.elevateweb.co.uk - Dual licensed under the LGPL licenses. - http://en.wikipedia.org/wiki/MIT_License - http://en.wikipedia.org/wiki/GNU_General_Public_License */ 2 | "function"!==typeof Object.create&&(Object.create=function(d){function h(){}h.prototype=d;return new h}); 3 | (function(d,h,l,m){var k={init:function(b,a){var c=this;c.elem=a;c.$elem=d(a);c.imageSrc=c.$elem.data("zoom-image")?c.$elem.data("zoom-image"):c.$elem.attr("src");c.options=d.extend({},d.fn.elevateZoom.options,b);c.options.tint&&(c.options.lensColour="none",c.options.lensOpacity="1");"inner"==c.options.zoomType&&(c.options.showLens=!1);c.$elem.parent().removeAttr("title").removeAttr("alt");c.zoomImage=c.imageSrc;c.refresh(1);d("#"+c.options.gallery+" a").click(function(a){c.options.galleryActiveClass&& 4 | (d("#"+c.options.gallery+" a").removeClass(c.options.galleryActiveClass),d(this).addClass(c.options.galleryActiveClass));a.preventDefault();d(this).data("zoom-image")?c.zoomImagePre=d(this).data("zoom-image"):c.zoomImagePre=d(this).data("image");c.swaptheimage(d(this).data("image"),c.zoomImagePre);return!1})},refresh:function(b){var a=this;setTimeout(function(){a.fetch(a.imageSrc)},b||a.options.refresh)},fetch:function(b){var a=this,c=new Image;c.onload=function(){a.largeWidth=c.width;a.largeHeight= 5 | c.height;a.startZoom();a.currentImage=a.imageSrc;a.options.onZoomedImageLoaded(a.$elem)};c.src=b},startZoom:function(){var b=this;b.nzWidth=b.$elem.width();b.nzHeight=b.$elem.height();b.isWindowActive=!1;b.isLensActive=!1;b.isTintActive=!1;b.overWindow=!1;b.options.imageCrossfade&&(b.zoomWrap=b.$elem.wrap('

'),b.$elem.css("position","absolute"));b.zoomLock=1;b.scrollingLock=!1;b.changeBgSize=!1;b.currentZoomLevel=b.options.zoomLevel; 6 | b.nzOffset=b.$elem.offset();b.widthRatio=b.largeWidth/b.currentZoomLevel/b.nzWidth;b.heightRatio=b.largeHeight/b.currentZoomLevel/b.nzHeight;"window"==b.options.zoomType&&(b.zoomWindowStyle="overflow: hidden;background-position: 0px 0px;text-align:center;background-color: "+String(b.options.zoomWindowBgColour)+";width: "+String(b.options.zoomWindowWidth)+"px;height: "+String(b.options.zoomWindowHeight)+"px;float: left;background-size: "+b.largeWidth/b.currentZoomLevel+"px "+b.largeHeight/b.currentZoomLevel+ 7 | "px;display: none;z-index:100;border: "+String(b.options.borderSize)+"px solid "+b.options.borderColour+";background-repeat: no-repeat;position: absolute;");if("inner"==b.options.zoomType){var a=b.$elem.css("border-left-width");b.zoomWindowStyle="overflow: hidden;margin-left: "+String(a)+";margin-top: "+String(a)+";background-position: 0px 0px;width: "+String(b.nzWidth)+"px;height: "+String(b.nzHeight)+"px;float: left;display: none;cursor:"+b.options.cursor+";px solid "+b.options.borderColour+";background-repeat: no-repeat;position: absolute;"}"window"== 8 | b.options.zoomType&&(lensHeight=b.nzHeight

');d("body").append(b.zoomContainer);b.options.containLensZoom&&"lens"==b.options.zoomType&&b.zoomContainer.css("overflow", 12 | "hidden");"inner"!=b.options.zoomType&&(b.zoomLens=d("

").appendTo(b.zoomContainer).click(function(){b.$elem.trigger("click")}),b.options.tint&&(b.tintContainer=d("

").addClass("tintContainer"),b.zoomTint=d("

"),b.zoomLens.wrap(b.tintContainer),b.zoomTintcss=b.zoomLens.after(b.zoomTint),b.zoomTintImage=d('

').appendTo(b.zoomLens).click(function(){b.$elem.trigger("click")})));isNaN(b.options.zoomWindowPosition)?b.zoomWindow=d("

").appendTo("body").click(function(){b.$elem.trigger("click")}):b.zoomWindow=d("

").appendTo(b.zoomContainer).click(function(){b.$elem.trigger("click")});b.zoomWindowContainer=d("

").addClass("zoomWindowContainer").css("width",b.options.zoomWindowWidth);b.zoomWindow.wrap(b.zoomWindowContainer);"lens"==b.options.zoomType&&b.zoomLens.css({backgroundImage:"url('"+b.imageSrc+"')"});"window"==b.options.zoomType&&b.zoomWindow.css({backgroundImage:"url('"+b.imageSrc+"')"});"inner"==b.options.zoomType&&b.zoomWindow.css({backgroundImage:"url('"+b.imageSrc+ 15 | "')"});b.$elem.bind("touchmove",function(a){a.preventDefault();b.setPosition(a.originalEvent.touches[0]||a.originalEvent.changedTouches[0])});b.zoomContainer.bind("touchmove",function(a){"inner"==b.options.zoomType&&b.showHideWindow("show");a.preventDefault();b.setPosition(a.originalEvent.touches[0]||a.originalEvent.changedTouches[0])});b.zoomContainer.bind("touchend",function(a){b.showHideWindow("hide");b.options.showLens&&b.showHideLens("hide");b.options.tint&&"inner"!=b.options.zoomType&&b.showHideTint("hide")}); 16 | b.$elem.bind("touchend",function(a){b.showHideWindow("hide");b.options.showLens&&b.showHideLens("hide");b.options.tint&&"inner"!=b.options.zoomType&&b.showHideTint("hide")});b.options.showLens&&(b.zoomLens.bind("touchmove",function(a){a.preventDefault();b.setPosition(a.originalEvent.touches[0]||a.originalEvent.changedTouches[0])}),b.zoomLens.bind("touchend",function(a){b.showHideWindow("hide");b.options.showLens&&b.showHideLens("hide");b.options.tint&&"inner"!=b.options.zoomType&&b.showHideTint("hide")})); 17 | b.$elem.bind("mousemove",function(a){!1==b.overWindow&&b.setElements("show");if(b.lastX!==a.clientX||b.lastY!==a.clientY)b.setPosition(a),b.currentLoc=a;b.lastX=a.clientX;b.lastY=a.clientY});b.zoomContainer.bind("mousemove",function(a){!1==b.overWindow&&b.setElements("show");if(b.lastX!==a.clientX||b.lastY!==a.clientY)b.setPosition(a),b.currentLoc=a;b.lastX=a.clientX;b.lastY=a.clientY});"inner"!=b.options.zoomType&&b.zoomLens.bind("mousemove",function(a){if(b.lastX!==a.clientX||b.lastY!==a.clientY)b.setPosition(a), 18 | b.currentLoc=a;b.lastX=a.clientX;b.lastY=a.clientY});b.options.tint&&"inner"!=b.options.zoomType&&b.zoomTint.bind("mousemove",function(a){if(b.lastX!==a.clientX||b.lastY!==a.clientY)b.setPosition(a),b.currentLoc=a;b.lastX=a.clientX;b.lastY=a.clientY});"inner"==b.options.zoomType&&b.zoomWindow.bind("mousemove",function(a){if(b.lastX!==a.clientX||b.lastY!==a.clientY)b.setPosition(a),b.currentLoc=a;b.lastX=a.clientX;b.lastY=a.clientY});b.zoomContainer.add(b.$elem).mouseenter(function(){!1==b.overWindow&& 19 | b.setElements("show")}).mouseleave(function(){b.scrollLock||b.setElements("hide")});"inner"!=b.options.zoomType&&b.zoomWindow.mouseenter(function(){b.overWindow=!0;b.setElements("hide")}).mouseleave(function(){b.overWindow=!1});b.minZoomLevel=b.options.minZoomLevel?b.options.minZoomLevel:2*b.options.scrollZoomIncrement;b.options.scrollZoom&&b.zoomContainer.add(b.$elem).bind("mousewheel DOMMouseScroll MozMousePixelScroll",function(a){b.scrollLock=!0;clearTimeout(d.data(this,"timer"));d.data(this,"timer", 20 | setTimeout(function(){b.scrollLock=!1},250));var e=a.originalEvent.wheelDelta||-1*a.originalEvent.detail;a.stopImmediatePropagation();a.stopPropagation();a.preventDefault();0=b.minZoomLevel&&b.changeZoomLevel(b.currentZoomLevel-b.options.scrollZoomIncrement):b.options.maxZoomLevel?b.currentZoomLevel<=b.options.maxZoomLevel&&b.changeZoomLevel(parseFloat(b.currentZoomLevel)+b.options.scrollZoomIncrement):b.changeZoomLevel(parseFloat(b.currentZoomLevel)+b.options.scrollZoomIncrement); 21 | return!1})},setElements:function(b){if(!this.options.zoomEnabled)return!1;"show"==b&&this.isWindowSet&&("inner"==this.options.zoomType&&this.showHideWindow("show"),"window"==this.options.zoomType&&this.showHideWindow("show"),this.options.showLens&&this.showHideLens("show"),this.options.tint&&"inner"!=this.options.zoomType&&this.showHideTint("show"));"hide"==b&&("window"==this.options.zoomType&&this.showHideWindow("hide"),this.options.tint||this.showHideWindow("hide"),this.options.showLens&&this.showHideLens("hide"), 22 | this.options.tint&&this.showHideTint("hide"))},setPosition:function(b){if(!this.options.zoomEnabled)return!1;this.nzHeight=this.$elem.height();this.nzWidth=this.$elem.width();this.nzOffset=this.$elem.offset();this.options.tint&&"inner"!=this.options.zoomType&&(this.zoomTint.css({top:0}),this.zoomTint.css({left:0}));this.options.responsive&&!this.options.scrollZoom&&this.options.showLens&&(lensHeight=this.nzHeightthis.nzHeight-this.zoomLens.height()/2-2*this.options.lensBorderSize,this.Eloppos=this.mouseLeft<0+this.zoomLens.width()/2,this.Eroppos=this.mouseLeft>this.nzWidth-this.zoomLens.width()/2-2*this.options.lensBorderSize);"inner"==this.options.zoomType&&(this.Etoppos=this.mouseTopthis.nzHeight- 26 | this.nzHeight/2/this.heightRatio,this.Eloppos=this.mouseLeft<0+this.nzWidth/2/this.widthRatio,this.Eroppos=this.mouseLeft>this.nzWidth-this.nzWidth/2/this.widthRatio-2*this.options.lensBorderSize);0>=this.mouseLeft||0>this.mouseTop||this.mouseLeft>this.nzWidth||this.mouseTop>this.nzHeight?this.setElements("hide"):(this.options.showLens&&(this.lensLeftPos=String(this.mouseLeft-this.zoomLens.width()/2),this.lensTopPos=String(this.mouseTop-this.zoomLens.height()/2)),this.Etoppos&&(this.lensTopPos=0), 27 | this.Eloppos&&(this.tintpos=this.lensLeftPos=this.windowLeftPos=0),"window"==this.options.zoomType&&(this.Eboppos&&(this.lensTopPos=Math.max(this.nzHeight-this.zoomLens.height()-2*this.options.lensBorderSize,0)),this.Eroppos&&(this.lensLeftPos=this.nzWidth-this.zoomLens.width()-2*this.options.lensBorderSize)),"inner"==this.options.zoomType&&(this.Eboppos&&(this.lensTopPos=Math.max(this.nzHeight-2*this.options.lensBorderSize,0)),this.Eroppos&&(this.lensLeftPos=this.nzWidth-this.nzWidth-2*this.options.lensBorderSize)), 28 | "lens"==this.options.zoomType&&(this.windowLeftPos=String(-1*((b.pageX-this.nzOffset.left)*this.widthRatio-this.zoomLens.width()/2)),this.windowTopPos=String(-1*((b.pageY-this.nzOffset.top)*this.heightRatio-this.zoomLens.height()/2)),this.zoomLens.css({backgroundPosition:this.windowLeftPos+"px "+this.windowTopPos+"px"}),this.changeBgSize&&(this.nzHeight>this.nzWidth?("lens"==this.options.zoomType&&this.zoomLens.css({"background-size":this.largeWidth/this.newvalueheight+"px "+this.largeHeight/this.newvalueheight+ 29 | "px"}),this.zoomWindow.css({"background-size":this.largeWidth/this.newvalueheight+"px "+this.largeHeight/this.newvalueheight+"px"})):("lens"==this.options.zoomType&&this.zoomLens.css({"background-size":this.largeWidth/this.newvaluewidth+"px "+this.largeHeight/this.newvaluewidth+"px"}),this.zoomWindow.css({"background-size":this.largeWidth/this.newvaluewidth+"px "+this.largeHeight/this.newvaluewidth+"px"})),this.changeBgSize=!1),this.setWindowPostition(b)),this.options.tint&&"inner"!=this.options.zoomType&& 30 | this.setTintPosition(b),"window"==this.options.zoomType&&this.setWindowPostition(b),"inner"==this.options.zoomType&&this.setWindowPostition(b),this.options.showLens&&(this.fullwidth&&"lens"!=this.options.zoomType&&(this.lensLeftPos=0),this.zoomLens.css({left:this.lensLeftPos+"px",top:this.lensTopPos+"px"})))},showHideWindow:function(b){"show"!=b||this.isWindowActive||(this.options.zoomWindowFadeIn?this.zoomWindow.stop(!0,!0,!1).fadeIn(this.options.zoomWindowFadeIn):this.zoomWindow.show(),this.isWindowActive= 31 | !0);"hide"==b&&this.isWindowActive&&(this.options.zoomWindowFadeOut?this.zoomWindow.stop(!0,!0).fadeOut(this.options.zoomWindowFadeOut):this.zoomWindow.hide(),this.isWindowActive=!1)},showHideLens:function(b){"show"!=b||this.isLensActive||(this.options.lensFadeIn?this.zoomLens.stop(!0,!0,!1).fadeIn(this.options.lensFadeIn):this.zoomLens.show(),this.isLensActive=!0);"hide"==b&&this.isLensActive&&(this.options.lensFadeOut?this.zoomLens.stop(!0,!0).fadeOut(this.options.lensFadeOut):this.zoomLens.hide(), 32 | this.isLensActive=!1)},showHideTint:function(b){"show"!=b||this.isTintActive||(this.options.zoomTintFadeIn?this.zoomTint.css({opacity:this.options.tintOpacity}).animate().stop(!0,!0).fadeIn("slow"):(this.zoomTint.css({opacity:this.options.tintOpacity}).animate(),this.zoomTint.show()),this.isTintActive=!0);"hide"==b&&this.isTintActive&&(this.options.zoomTintFadeOut?this.zoomTint.stop(!0,!0).fadeOut(this.options.zoomTintFadeOut):this.zoomTint.hide(),this.isTintActive=!1)},setLensPostition:function(b){}, 33 | setWindowPostition:function(b){var a=this;if(isNaN(a.options.zoomWindowPosition))a.externalContainer=d("#"+a.options.zoomWindowPosition),a.externalContainerWidth=a.externalContainer.width(),a.externalContainerHeight=a.externalContainer.height(),a.externalContainerOffset=a.externalContainer.offset(),a.windowOffsetTop=a.externalContainerOffset.top,a.windowOffsetLeft=a.externalContainerOffset.left;else switch(a.options.zoomWindowPosition){case 1:a.windowOffsetTop=a.options.zoomWindowOffety;a.windowOffsetLeft= 34 | +a.nzWidth;break;case 2:a.options.zoomWindowHeight>a.nzHeight&&(a.windowOffsetTop=-1*(a.options.zoomWindowHeight/2-a.nzHeight/2),a.windowOffsetLeft=a.nzWidth);break;case 3:a.windowOffsetTop=a.nzHeight-a.zoomWindow.height()-2*a.options.borderSize;a.windowOffsetLeft=a.nzWidth;break;case 4:a.windowOffsetTop=a.nzHeight;a.windowOffsetLeft=a.nzWidth;break;case 5:a.windowOffsetTop=a.nzHeight;a.windowOffsetLeft=a.nzWidth-a.zoomWindow.width()-2*a.options.borderSize;break;case 6:a.options.zoomWindowHeight> 35 | a.nzHeight&&(a.windowOffsetTop=a.nzHeight,a.windowOffsetLeft=-1*(a.options.zoomWindowWidth/2-a.nzWidth/2+2*a.options.borderSize));break;case 7:a.windowOffsetTop=a.nzHeight;a.windowOffsetLeft=0;break;case 8:a.windowOffsetTop=a.nzHeight;a.windowOffsetLeft=-1*(a.zoomWindow.width()+2*a.options.borderSize);break;case 9:a.windowOffsetTop=a.nzHeight-a.zoomWindow.height()-2*a.options.borderSize;a.windowOffsetLeft=-1*(a.zoomWindow.width()+2*a.options.borderSize);break;case 10:a.options.zoomWindowHeight>a.nzHeight&& 36 | (a.windowOffsetTop=-1*(a.options.zoomWindowHeight/2-a.nzHeight/2),a.windowOffsetLeft=-1*(a.zoomWindow.width()+2*a.options.borderSize));break;case 11:a.windowOffsetTop=a.options.zoomWindowOffety;a.windowOffsetLeft=-1*(a.zoomWindow.width()+2*a.options.borderSize);break;case 12:a.windowOffsetTop=-1*(a.zoomWindow.height()+2*a.options.borderSize);a.windowOffsetLeft=-1*(a.zoomWindow.width()+2*a.options.borderSize);break;case 13:a.windowOffsetTop=-1*(a.zoomWindow.height()+2*a.options.borderSize);a.windowOffsetLeft= 37 | 0;break;case 14:a.options.zoomWindowHeight>a.nzHeight&&(a.windowOffsetTop=-1*(a.zoomWindow.height()+2*a.options.borderSize),a.windowOffsetLeft=-1*(a.options.zoomWindowWidth/2-a.nzWidth/2+2*a.options.borderSize));break;case 15:a.windowOffsetTop=-1*(a.zoomWindow.height()+2*a.options.borderSize);a.windowOffsetLeft=a.nzWidth-a.zoomWindow.width()-2*a.options.borderSize;break;case 16:a.windowOffsetTop=-1*(a.zoomWindow.height()+2*a.options.borderSize);a.windowOffsetLeft=a.nzWidth;break;default:a.windowOffsetTop= 38 | a.options.zoomWindowOffety,a.windowOffsetLeft=a.nzWidth}a.isWindowSet=!0;a.windowOffsetTop+=a.options.zoomWindowOffety;a.windowOffsetLeft+=a.options.zoomWindowOffetx;a.zoomWindow.css({top:a.windowOffsetTop});a.zoomWindow.css({left:a.windowOffsetLeft});"inner"==a.options.zoomType&&(a.zoomWindow.css({top:0}),a.zoomWindow.css({left:0}));a.windowLeftPos=String(-1*((b.pageX-a.nzOffset.left)*a.widthRatio-a.zoomWindow.width()/2));a.windowTopPos=String(-1*((b.pageY-a.nzOffset.top)*a.heightRatio-a.zoomWindow.height()/ 39 | 2));a.Etoppos&&(a.windowTopPos=0);a.Eloppos&&(a.windowLeftPos=0);a.Eboppos&&(a.windowTopPos=-1*(a.largeHeight/a.currentZoomLevel-a.zoomWindow.height()));a.Eroppos&&(a.windowLeftPos=-1*(a.largeWidth/a.currentZoomLevel-a.zoomWindow.width()));a.fullheight&&(a.windowTopPos=0);a.fullwidth&&(a.windowLeftPos=0);if("window"==a.options.zoomType||"inner"==a.options.zoomType)1==a.zoomLock&&(1>=a.widthRatio&&(a.windowLeftPos=0),1>=a.heightRatio&&(a.windowTopPos=0)),a.largeHeight 41 | a.nzWidth?("lens"==a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"}),a.zoomWindow.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"})):("lens"!=a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvaluewidth+"px "+a.largeHeight/a.newvalueheight+"px"}),a.zoomWindow.css({"background-size":a.largeWidth/a.newvaluewidth+"px "+a.largeHeight/a.newvaluewidth+"px"})), 42 | a.changeBgSize=!1),a.zoomWindow.css({backgroundPosition:a.windowLeftPos+"px "+a.windowTopPos+"px"}),a.scrollingLock=!1,a.loop=!1):(a.changeBgSize&&(a.nzHeight>a.nzWidth?("lens"==a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"}),a.zoomWindow.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"})):("lens"!=a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvaluewidth+ 43 | "px "+a.largeHeight/a.newvaluewidth+"px"}),a.zoomWindow.css({"background-size":a.largeWidth/a.newvaluewidth+"px "+a.largeHeight/a.newvaluewidth+"px"})),a.changeBgSize=!1),a.zoomWindow.css({backgroundPosition:a.xp+"px "+a.yp+"px"}))},16))):(a.changeBgSize&&(a.nzHeight>a.nzWidth?("lens"==a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/a.newvalueheight+"px"}),a.zoomWindow.css({"background-size":a.largeWidth/a.newvalueheight+"px "+a.largeHeight/ 44 | a.newvalueheight+"px"})):("lens"==a.options.zoomType&&a.zoomLens.css({"background-size":a.largeWidth/a.newvaluewidth+"px "+a.largeHeight/a.newvaluewidth+"px"}),a.largeHeight/a.newvaluewidth

'),c.$elem.after(c.spinner)); 47 | c.options.onImageSwap(c.$elem);e.onload=function(){c.largeWidth=e.width;c.largeHeight=e.height;c.zoomImage=a;c.zoomWindow.css({"background-size":c.largeWidth+"px "+c.largeHeight+"px"});c.zoomWindow.css({"background-size":c.largeWidth+"px "+c.largeHeight+"px"});c.swapAction(b,a)};e.src=a},swapAction:function(b,a){var c=this,e=new Image;e.onload=function(){c.nzHeight=e.height;c.nzWidth=e.width;c.options.onImageSwapComplete(c.$elem);c.doneCallback()};e.src=b;c.currentZoomLevel=c.options.zoomLevel;c.options.maxZoomLevel= 48 | !1;"lens"==c.options.zoomType&&c.zoomLens.css({backgroundImage:"url('"+a+"')"});"window"==c.options.zoomType&&c.zoomWindow.css({backgroundImage:"url('"+a+"')"});"inner"==c.options.zoomType&&c.zoomWindow.css({backgroundImage:"url('"+a+"')"});c.currentImage=a;if(c.options.imageCrossfade){var f=c.$elem,g=f.clone();c.$elem.attr("src",b);c.$elem.after(g);g.stop(!0).fadeOut(c.options.imageCrossfade,function(){d(this).remove()});c.$elem.width("auto").removeAttr("width");c.$elem.height("auto").removeAttr("height"); 49 | f.fadeIn(c.options.imageCrossfade);c.options.tint&&"inner"!=c.options.zoomType&&(f=c.zoomTintImage,g=f.clone(),c.zoomTintImage.attr("src",a),c.zoomTintImage.after(g),g.stop(!0).fadeOut(c.options.imageCrossfade,function(){d(this).remove()}),f.fadeIn(c.options.imageCrossfade),c.zoomTint.css({height:c.$elem.height()}),c.zoomTint.css({width:c.$elem.width()}));c.zoomContainer.css("height",c.$elem.height());c.zoomContainer.css("width",c.$elem.width());"inner"!=c.options.zoomType||c.options.constrainType|| 50 | (c.zoomWrap.parent().css("height",c.$elem.height()),c.zoomWrap.parent().css("width",c.$elem.width()),c.zoomWindow.css("height",c.$elem.height()),c.zoomWindow.css("width",c.$elem.width()))}else c.$elem.attr("src",b),c.options.tint&&(c.zoomTintImage.attr("src",a),c.zoomTintImage.attr("height",c.$elem.height()),c.zoomTintImage.css({height:c.$elem.height()}),c.zoomTint.css({height:c.$elem.height()})),c.zoomContainer.css("height",c.$elem.height()),c.zoomContainer.css("width",c.$elem.width());c.options.imageCrossfade&& 51 | (c.zoomWrap.css("height",c.$elem.height()),c.zoomWrap.css("width",c.$elem.width()));c.options.constrainType&&("height"==c.options.constrainType&&(c.zoomContainer.css("height",c.options.constrainSize),c.zoomContainer.css("width","auto"),c.options.imageCrossfade?(c.zoomWrap.css("height",c.options.constrainSize),c.zoomWrap.css("width","auto"),c.constwidth=c.zoomWrap.width()):(c.$elem.css("height",c.options.constrainSize),c.$elem.css("width","auto"),c.constwidth=c.$elem.width()),"inner"==c.options.zoomType&& 52 | (c.zoomWrap.parent().css("height",c.options.constrainSize),c.zoomWrap.parent().css("width",c.constwidth),c.zoomWindow.css("height",c.options.constrainSize),c.zoomWindow.css("width",c.constwidth)),c.options.tint&&(c.tintContainer.css("height",c.options.constrainSize),c.tintContainer.css("width",c.constwidth),c.zoomTint.css("height",c.options.constrainSize),c.zoomTint.css("width",c.constwidth),c.zoomTintImage.css("height",c.options.constrainSize),c.zoomTintImage.css("width",c.constwidth))),"width"== 53 | c.options.constrainType&&(c.zoomContainer.css("height","auto"),c.zoomContainer.css("width",c.options.constrainSize),c.options.imageCrossfade?(c.zoomWrap.css("height","auto"),c.zoomWrap.css("width",c.options.constrainSize),c.constheight=c.zoomWrap.height()):(c.$elem.css("height","auto"),c.$elem.css("width",c.options.constrainSize),c.constheight=c.$elem.height()),"inner"==c.options.zoomType&&(c.zoomWrap.parent().css("height",c.constheight),c.zoomWrap.parent().css("width",c.options.constrainSize),c.zoomWindow.css("height", 54 | c.constheight),c.zoomWindow.css("width",c.options.constrainSize)),c.options.tint&&(c.tintContainer.css("height",c.constheight),c.tintContainer.css("width",c.options.constrainSize),c.zoomTint.css("height",c.constheight),c.zoomTint.css("width",c.options.constrainSize),c.zoomTintImage.css("height",c.constheight),c.zoomTintImage.css("width",c.options.constrainSize))))},doneCallback:function(){this.options.loadingIcon&&this.spinner.hide();this.nzOffset=this.$elem.offset();this.nzWidth=this.$elem.width(); 55 | this.nzHeight=this.$elem.height();this.currentZoomLevel=this.options.zoomLevel;this.widthRatio=this.largeWidth/this.nzWidth;this.heightRatio=this.largeHeight/this.nzHeight;"window"==this.options.zoomType&&(lensHeight=this.nzHeightmaxheightnewvalue&&(newvalue=maxheightnewvalue),newvalue>maxwidthtnewvalue&&(newvalue=maxwidthtnewvalue),maxheightnewvalue<=newvalue?(this.heightRatio=this.largeHeight/ 60 | newvalue/this.nzHeight,this.newvalueheight=newvalue>maxheightnewvalue?maxheightnewvalue:newvalue,this.fullheight=!0):(this.heightRatio=this.largeHeight/newvalue/this.nzHeight,this.newvalueheight=newvalue>maxheightnewvalue?maxheightnewvalue:newvalue,this.fullheight=!1),maxwidthtnewvalue<=newvalue?(this.widthRatio=this.largeWidth/newvalue/this.nzWidth,this.newvaluewidth=newvalue>maxwidthtnewvalue?maxwidthtnewvalue:newvalue,this.fullwidth=!0):(this.widthRatio=this.largeWidth/newvalue/this.nzWidth,this.newvaluewidth= 61 | newvalue,this.fullwidth=!1));scrcontinue=!1;"inner"==this.options.zoomType&&(this.nzWidth>this.nzHeight&&(this.newvaluewidth<=maxwidthtnewvalue?scrcontinue=!0:(scrcontinue=!1,this.fullwidth=this.fullheight=!0)),this.nzHeight>this.nzWidth&&(this.newvaluewidth<=maxwidthtnewvalue?scrcontinue=!0:(scrcontinue=!1,this.fullwidth=this.fullheight=!0)));"inner"!=this.options.zoomType&&(scrcontinue=!0);scrcontinue&&(this.zoomLock=0,this.changeZoom=!0,this.options.zoomWindowHeight/this.heightRatio<=this.nzHeight&& 62 | (this.currentZoomLevel=this.newvalueheight,"lens"!=this.options.zoomType&&"inner"!=this.options.zoomType&&(this.changeBgSize=!0,this.zoomLens.css({height:String(this.options.zoomWindowHeight/this.heightRatio)+"px"})),"lens"==this.options.zoomType||"inner"==this.options.zoomType)&&(this.changeBgSize=!0),this.options.zoomWindowWidth/this.widthRatio<=this.nzWidth&&("inner"!=this.options.zoomType&&this.newvaluewidth>this.newvalueheight&&(this.currentZoomLevel=this.newvaluewidth),"lens"!=this.options.zoomType&& 63 | "inner"!=this.options.zoomType&&(this.changeBgSize=!0,this.zoomLens.css({width:String(this.options.zoomWindowWidth/this.widthRatio)+"px"})),"lens"==this.options.zoomType||"inner"==this.options.zoomType)&&(this.changeBgSize=!0),"inner"==this.options.zoomType&&(this.changeBgSize=!0,this.nzWidth>this.nzHeight&&(this.currentZoomLevel=this.newvaluewidth),this.nzHeight>this.nzWidth&&(this.currentZoomLevel=this.newvaluewidth)));this.setPosition(this.currentLoc)},closeAll:function(){self.zoomWindow&&self.zoomWindow.hide(); 64 | self.zoomLens&&self.zoomLens.hide();self.zoomTint&&self.zoomTint.hide()},changeState:function(b){"enable"==b&&(this.options.zoomEnabled=!0);"disable"==b&&(this.options.zoomEnabled=!1)}};d.fn.elevateZoom=function(b){return this.each(function(){var a=Object.create(k);a.init(b,this);d.data(this,"elevateZoom",a)})};d.fn.elevateZoom.options={zoomActivation:"hover",zoomEnabled:!0,preloading:1,zoomLevel:1,scrollZoom:!1,scrollZoomIncrement:0.1,minZoomLevel:!1,maxZoomLevel:!1,easing:!1,easingAmount:12,lensSize:200, 65 | zoomWindowWidth:400,zoomWindowHeight:400,zoomWindowOffetx:0,zoomWindowOffety:0,zoomWindowPosition:1,zoomWindowBgColour:"#fff",lensFadeIn:!1,lensFadeOut:!1,debug:!1,zoomWindowFadeIn:!1,zoomWindowFadeOut:!1,zoomWindowAlwaysShow:!1,zoomTintFadeIn:!1,zoomTintFadeOut:!1,borderSize:4,showLens:!0,borderColour:"#888",lensBorderSize:1,lensBorderColour:"#000",lensShape:"square",zoomType:"window",containLensZoom:!1,lensColour:"white",lensOpacity:0.4,lenszoom:!1,tint:!1,tintColour:"#333",tintOpacity:0.4,gallery:!1, 66 | galleryActiveClass:"zoomGalleryActive",imageCrossfade:!1,constrainType:!1,constrainSize:!1,loadingIcon:!1,cursor:"default",responsive:!0,onComplete:d.noop,onZoomedImageLoaded:function(){},onImageSwap:d.noop,onImageSwapComplete:d.noop}})(jQuery,window,document); -------------------------------------------------------------------------------- /jquery.elevatezoom.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery elevateZoom 3.0.8 3 | * Demo's and documentation: 4 | * www.elevateweb.co.uk/image-zoom 5 | * 6 | * Copyright (c) 2012 Andrew Eades 7 | * www.elevateweb.co.uk 8 | * 9 | * Dual licensed under the GPL and MIT licenses. 10 | * http://en.wikipedia.org/wiki/MIT_License 11 | * http://en.wikipedia.org/wiki/GNU_General_Public_License 12 | * 13 | 14 | /* 15 | * jQuery elevateZoom 3.0.3 16 | * Demo's and documentation: 17 | * www.elevateweb.co.uk/image-zoom 18 | * 19 | * Copyright (c) 2012 Andrew Eades 20 | * www.elevateweb.co.uk 21 | * 22 | * Dual licensed under the GPL and MIT licenses. 23 | * http://en.wikipedia.org/wiki/MIT_License 24 | * http://en.wikipedia.org/wiki/GNU_General_Public_License 25 | */ 26 | 27 | 28 | if ( typeof Object.create !== 'function' ) { 29 | Object.create = function( obj ) { 30 | function F() {}; 31 | F.prototype = obj; 32 | return new F(); 33 | }; 34 | } 35 | 36 | (function( $, window, document, undefined ) { 37 | var ElevateZoom = { 38 | init: function( options, elem ) { 39 | var self = this; 40 | 41 | self.elem = elem; 42 | self.$elem = $( elem ); 43 | 44 | self.imageSrc = self.$elem.data("zoom-image") ? self.$elem.data("zoom-image") : self.$elem.attr("src"); 45 | 46 | self.options = $.extend( {}, $.fn.elevateZoom.options, options ); 47 | 48 | //TINT OVERRIDE SETTINGS 49 | if(self.options.tint) { 50 | self.options.lensColour = "none", //colour of the lens background 51 | self.options.lensOpacity = "1" //opacity of the lens 52 | } 53 | //INNER OVERRIDE SETTINGS 54 | if(self.options.zoomType == "inner") {self.options.showLens = false;} 55 | 56 | 57 | //Remove alt on hover 58 | 59 | self.$elem.parent().removeAttr('title').removeAttr('alt'); 60 | 61 | self.zoomImage = self.imageSrc; 62 | 63 | self.refresh( 1 ); 64 | 65 | 66 | 67 | //Create the image swap from the gallery 68 | $('#'+self.options.gallery + ' a').click( function(e) { 69 | 70 | //Set a class on the currently active gallery image 71 | if(self.options.galleryActiveClass){ 72 | $('#'+self.options.gallery + ' a').removeClass(self.options.galleryActiveClass); 73 | $(this).addClass(self.options.galleryActiveClass); 74 | } 75 | //stop any link on the a tag from working 76 | e.preventDefault(); 77 | 78 | //call the swap image function 79 | if($(this).data("zoom-image")){self.zoomImagePre = $(this).data("zoom-image")} 80 | else{self.zoomImagePre = $(this).data("image");} 81 | self.swaptheimage($(this).data("image"), self.zoomImagePre); 82 | return false; 83 | }); 84 | 85 | }, 86 | 87 | refresh: function( length ) { 88 | var self = this; 89 | 90 | setTimeout(function() { 91 | self.fetch(self.imageSrc); 92 | 93 | }, length || self.options.refresh ); 94 | }, 95 | 96 | fetch: function(imgsrc) { 97 | //get the image 98 | var self = this; 99 | var newImg = new Image(); 100 | newImg.onload = function() { 101 | //set the large image dimensions - used to calculte ratio's 102 | self.largeWidth = newImg.width; 103 | self.largeHeight = newImg.height; 104 | //once image is loaded start the calls 105 | self.startZoom(); 106 | self.currentImage = self.imageSrc; 107 | //let caller know image has been loaded 108 | self.options.onZoomedImageLoaded(self.$elem); 109 | } 110 | newImg.src = imgsrc; // this must be done AFTER setting onload 111 | 112 | return; 113 | 114 | }, 115 | 116 | startZoom: function( ) { 117 | var self = this; 118 | //get dimensions of the non zoomed image 119 | self.nzWidth = self.$elem.width(); 120 | self.nzHeight = self.$elem.height(); 121 | 122 | //activated elements 123 | self.isWindowActive = false; 124 | self.isLensActive = false; 125 | self.isTintActive = false; 126 | self.overWindow = false; 127 | 128 | //CrossFade Wrappe 129 | if(self.options.imageCrossfade){ 130 | self.zoomWrap = self.$elem.wrap('

'); 131 | self.$elem.css('position', 'absolute'); 132 | } 133 | 134 | self.zoomLock = 1; 135 | self.scrollingLock = false; 136 | self.changeBgSize = false; 137 | self.currentZoomLevel = self.options.zoomLevel; 138 | 139 | 140 | //get offset of the non zoomed image 141 | self.nzOffset = self.$elem.offset(); 142 | //calculate the width ratio of the large/small image 143 | self.widthRatio = (self.largeWidth/self.currentZoomLevel) / self.nzWidth; 144 | self.heightRatio = (self.largeHeight/self.currentZoomLevel) / self.nzHeight; 145 | 146 | 147 | //if window zoom 148 | if(self.options.zoomType == "window") { 149 | self.zoomWindowStyle = "overflow: hidden;" 150 | + "background-position: 0px 0px;text-align:center;" 151 | + "background-color: " + String(self.options.zoomWindowBgColour) 152 | + ";width: " + String(self.options.zoomWindowWidth) + "px;" 153 | + "height: " + String(self.options.zoomWindowHeight) 154 | + "px;float: left;" 155 | + "background-size: "+ self.largeWidth/self.currentZoomLevel+ "px " +self.largeHeight/self.currentZoomLevel + "px;" 156 | + "display: none;z-index:100;" 157 | + "border: " + String(self.options.borderSize) 158 | + "px solid " + self.options.borderColour 159 | + ";background-repeat: no-repeat;" 160 | + "position: absolute;"; 161 | } 162 | 163 | 164 | //if inner zoom 165 | if(self.options.zoomType == "inner") { 166 | //has a border been put on the image? Lets cater for this 167 | 168 | var borderWidth = self.$elem.css("border-left-width"); 169 | 170 | self.zoomWindowStyle = "overflow: hidden;" 171 | + "margin-left: " + String(borderWidth) + ";" 172 | + "margin-top: " + String(borderWidth) + ";" 173 | + "background-position: 0px 0px;" 174 | + "width: " + String(self.nzWidth) + "px;" 175 | + "height: " + String(self.nzHeight) + "px;" 176 | + "px;float: left;" 177 | + "display: none;" 178 | + "cursor:"+(self.options.cursor)+";" 179 | + "px solid " + self.options.borderColour 180 | + ";background-repeat: no-repeat;" 181 | + "position: absolute;"; 182 | } 183 | 184 | 185 | 186 | //lens style for window zoom 187 | if(self.options.zoomType == "window") { 188 | 189 | 190 | // adjust images less than the window height 191 | 192 | if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){ 193 | lensHeight = self.nzHeight; 194 | } 195 | else{ 196 | lensHeight = String((self.options.zoomWindowHeight/self.heightRatio)) 197 | } 198 | if(self.largeWidth < self.options.zoomWindowWidth){ 199 | lensWidth = self.nzWidth; 200 | } 201 | else{ 202 | lensWidth = (self.options.zoomWindowWidth/self.widthRatio); 203 | } 204 | 205 | 206 | self.lensStyle = "background-position: 0px 0px;width: " + String((self.options.zoomWindowWidth)/self.widthRatio) + "px;height: " + String((self.options.zoomWindowHeight)/self.heightRatio) 207 | + "px;float: right;display: none;" 208 | + "overflow: hidden;" 209 | + "z-index: 999;" 210 | + "-webkit-transform: translateZ(0);" 211 | + "opacity:"+(self.options.lensOpacity)+";filter: alpha(opacity = "+(self.options.lensOpacity*100)+"); zoom:1;" 212 | + "width:"+lensWidth+"px;" 213 | + "height:"+lensHeight+"px;" 214 | + "background-color:"+(self.options.lensColour)+";" 215 | + "cursor:"+(self.options.cursor)+";" 216 | + "border: "+(self.options.lensBorderSize)+"px" + 217 | " solid "+(self.options.lensBorderColour)+";background-repeat: no-repeat;position: absolute;"; 218 | } 219 | 220 | 221 | //tint style 222 | self.tintStyle = "display: block;" 223 | + "position: absolute;" 224 | + "background-color: "+self.options.tintColour+";" 225 | + "filter:alpha(opacity=0);" 226 | + "opacity: 0;" 227 | + "width: " + self.nzWidth + "px;" 228 | + "height: " + self.nzHeight + "px;" 229 | 230 | ; 231 | 232 | //lens style for lens zoom with optional round for modern browsers 233 | self.lensRound = ''; 234 | 235 | if(self.options.zoomType == "lens") { 236 | 237 | self.lensStyle = "background-position: 0px 0px;" 238 | + "float: left;display: none;" 239 | + "border: " + String(self.options.borderSize) + "px solid " + self.options.borderColour+";" 240 | + "width:"+ String(self.options.lensSize) +"px;" 241 | + "height:"+ String(self.options.lensSize)+"px;" 242 | + "background-repeat: no-repeat;position: absolute;"; 243 | 244 | 245 | } 246 | 247 | 248 | //does not round in all browsers 249 | if(self.options.lensShape == "round") { 250 | self.lensRound = "border-top-left-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;" 251 | + "border-top-right-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;" 252 | + "border-bottom-left-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;" 253 | + "border-bottom-right-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"; 254 | 255 | } 256 | 257 | //create the div's + "" 258 | //self.zoomContainer = $('

').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth}); 259 | 260 | self.zoomContainer = $('

'); 261 | $('body').append(self.zoomContainer); 262 | 263 | 264 | //this will add overflow hidden and contrain the lens on lens mode 265 | if(self.options.containLensZoom && self.options.zoomType == "lens"){ 266 | self.zoomContainer.css("overflow", "hidden"); 267 | } 268 | if(self.options.zoomType != "inner") { 269 | self.zoomLens = $("

") 270 | .appendTo(self.zoomContainer) 271 | .click(function () { 272 | self.$elem.trigger('click'); 273 | }); 274 | 275 | 276 | if(self.options.tint) { 277 | self.tintContainer = $('

').addClass('tintContainer'); 278 | self.zoomTint = $("

"); 279 | 280 | 281 | self.zoomLens.wrap(self.tintContainer); 282 | 283 | 284 | self.zoomTintcss = self.zoomLens.after(self.zoomTint); 285 | 286 | //if tint enabled - set an image to show over the tint 287 | 288 | self.zoomTintImage = $('

') 289 | .appendTo(self.zoomLens) 290 | .click(function () { 291 | 292 | self.$elem.trigger('click'); 293 | }); 294 | 295 | } 296 | 297 | } 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | //create zoom window 306 | if(isNaN(self.options.zoomWindowPosition)){ 307 | self.zoomWindow = $("

") 308 | .appendTo('body') 309 | .click(function () { 310 | self.$elem.trigger('click'); 311 | }); 312 | }else{ 313 | self.zoomWindow = $("

") 314 | .appendTo(self.zoomContainer) 315 | .click(function () { 316 | self.$elem.trigger('click'); 317 | }); 318 | } 319 | self.zoomWindowContainer = $('

').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth); 320 | self.zoomWindow.wrap(self.zoomWindowContainer); 321 | 322 | 323 | // self.captionStyle = "text-align: left;background-color: black;color: white;font-weight: bold;padding: 10px;font-family: sans-serif;font-size: 11px"; 324 | // self.zoomCaption = $('

INSERT ALT TAG

').appendTo(self.zoomWindow.parent()); 325 | 326 | if(self.options.zoomType == "lens") { 327 | self.zoomLens.css({ backgroundImage: "url('" + self.imageSrc + "')" }); 328 | } 329 | if(self.options.zoomType == "window") { 330 | self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" }); 331 | } 332 | if(self.options.zoomType == "inner") { 333 | self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" }); 334 | } 335 | /*-------------------END THE ZOOM WINDOW AND LENS----------------------------------*/ 336 | //touch events 337 | self.$elem.bind('touchmove', function(e){ 338 | e.preventDefault(); 339 | var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 340 | self.setPosition(touch); 341 | 342 | }); 343 | self.zoomContainer.bind('touchmove', function(e){ 344 | if(self.options.zoomType == "inner") { 345 | self.showHideWindow("show"); 346 | 347 | } 348 | e.preventDefault(); 349 | var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 350 | self.setPosition(touch); 351 | 352 | }); 353 | self.zoomContainer.bind('touchend', function(e){ 354 | self.showHideWindow("hide"); 355 | if(self.options.showLens) {self.showHideLens("hide");} 356 | if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");} 357 | }); 358 | 359 | self.$elem.bind('touchend', function(e){ 360 | self.showHideWindow("hide"); 361 | if(self.options.showLens) {self.showHideLens("hide");} 362 | if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");} 363 | }); 364 | if(self.options.showLens) { 365 | self.zoomLens.bind('touchmove', function(e){ 366 | 367 | e.preventDefault(); 368 | var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 369 | self.setPosition(touch); 370 | }); 371 | 372 | 373 | self.zoomLens.bind('touchend', function(e){ 374 | self.showHideWindow("hide"); 375 | if(self.options.showLens) {self.showHideLens("hide");} 376 | if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");} 377 | }); 378 | } 379 | //Needed to work in IE 380 | self.$elem.bind('mousemove', function(e){ 381 | if(self.overWindow == false){self.setElements("show");} 382 | //make sure on orientation change the setposition is not fired 383 | if(self.lastX !== e.clientX || self.lastY !== e.clientY){ 384 | self.setPosition(e); 385 | self.currentLoc = e; 386 | } 387 | self.lastX = e.clientX; 388 | self.lastY = e.clientY; 389 | 390 | }); 391 | 392 | self.zoomContainer.bind('mousemove', function(e){ 393 | 394 | if(self.overWindow == false){self.setElements("show");} 395 | 396 | //make sure on orientation change the setposition is not fired 397 | if(self.lastX !== e.clientX || self.lastY !== e.clientY){ 398 | self.setPosition(e); 399 | self.currentLoc = e; 400 | } 401 | self.lastX = e.clientX; 402 | self.lastY = e.clientY; 403 | }); 404 | if(self.options.zoomType != "inner") { 405 | self.zoomLens.bind('mousemove', function(e){ 406 | //make sure on orientation change the setposition is not fired 407 | if(self.lastX !== e.clientX || self.lastY !== e.clientY){ 408 | self.setPosition(e); 409 | self.currentLoc = e; 410 | } 411 | self.lastX = e.clientX; 412 | self.lastY = e.clientY; 413 | }); 414 | } 415 | if(self.options.tint && self.options.zoomType != "inner") { 416 | self.zoomTint.bind('mousemove', function(e){ 417 | //make sure on orientation change the setposition is not fired 418 | if(self.lastX !== e.clientX || self.lastY !== e.clientY){ 419 | self.setPosition(e); 420 | self.currentLoc = e; 421 | } 422 | self.lastX = e.clientX; 423 | self.lastY = e.clientY; 424 | }); 425 | 426 | } 427 | if(self.options.zoomType == "inner") { 428 | self.zoomWindow.bind('mousemove', function(e) { 429 | //self.overWindow = true; 430 | //make sure on orientation change the setposition is not fired 431 | if(self.lastX !== e.clientX || self.lastY !== e.clientY){ 432 | self.setPosition(e); 433 | self.currentLoc = e; 434 | } 435 | self.lastX = e.clientX; 436 | self.lastY = e.clientY; 437 | }); 438 | 439 | } 440 | 441 | 442 | // lensFadeOut: 500, zoomTintFadeIn 443 | self.zoomContainer.add(self.$elem).mouseenter(function(){ 444 | 445 | if(self.overWindow == false){self.setElements("show");} 446 | 447 | 448 | }).mouseleave(function(){ 449 | if(!self.scrollLock){ 450 | self.setElements("hide"); 451 | self.options.onDestroy(self.$elem); 452 | } 453 | }); 454 | //end ove image 455 | 456 | 457 | 458 | 459 | 460 | if(self.options.zoomType != "inner") { 461 | self.zoomWindow.mouseenter(function(){ 462 | self.overWindow = true; 463 | self.setElements("hide"); 464 | }).mouseleave(function(){ 465 | 466 | self.overWindow = false; 467 | }); 468 | } 469 | //end ove image 470 | 471 | 472 | 473 | // var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail); 474 | 475 | // $(this).empty(); 476 | // return false; 477 | 478 | //fix for initial zoom setting 479 | if (self.options.zoomLevel != 1){ 480 | // self.changeZoomLevel(self.currentZoomLevel); 481 | } 482 | //set the min zoomlevel 483 | if(self.options.minZoomLevel){ 484 | self.minZoomLevel = self.options.minZoomLevel; 485 | } 486 | else{ 487 | self.minZoomLevel = self.options.scrollZoomIncrement * 2; 488 | } 489 | 490 | 491 | if(self.options.scrollZoom){ 492 | 493 | 494 | self.zoomContainer.add(self.$elem).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(e){ 495 | 496 | 497 | // in IE there is issue with firing of mouseleave - So check whether still scrolling 498 | // and on mouseleave check if scrolllock 499 | self.scrollLock = true; 500 | clearTimeout($.data(this, 'timer')); 501 | $.data(this, 'timer', setTimeout(function() { 502 | self.scrollLock = false; 503 | //do something 504 | }, 250)); 505 | 506 | var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail*-1 507 | 508 | 509 | //this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; 510 | // e.preventDefault(); 511 | 512 | 513 | e.stopImmediatePropagation(); 514 | e.stopPropagation(); 515 | e.preventDefault(); 516 | 517 | 518 | if(theEvent /120 > 0) { 519 | //scrolling up 520 | if(self.currentZoomLevel >= self.minZoomLevel){ 521 | self.changeZoomLevel(self.currentZoomLevel-self.options.scrollZoomIncrement); 522 | } 523 | 524 | } 525 | else{ 526 | //scrolling down 527 | 528 | 529 | if(self.options.maxZoomLevel){ 530 | if(self.currentZoomLevel <= self.options.maxZoomLevel){ 531 | self.changeZoomLevel(parseFloat(self.currentZoomLevel)+self.options.scrollZoomIncrement); 532 | } 533 | } 534 | else{ 535 | //andy 536 | 537 | self.changeZoomLevel(parseFloat(self.currentZoomLevel)+self.options.scrollZoomIncrement); 538 | } 539 | 540 | } 541 | return false; 542 | }); 543 | } 544 | 545 | 546 | }, 547 | setElements: function(type) { 548 | var self = this; 549 | if(!self.options.zoomEnabled){return false;} 550 | if(type=="show"){ 551 | if(self.isWindowSet){ 552 | if(self.options.zoomType == "inner") {self.showHideWindow("show");} 553 | if(self.options.zoomType == "window") {self.showHideWindow("show");} 554 | if(self.options.showLens) {self.showHideLens("show");} 555 | if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("show"); 556 | } 557 | } 558 | } 559 | 560 | if(type=="hide"){ 561 | if(self.options.zoomType == "window") {self.showHideWindow("hide");} 562 | if(!self.options.tint) {self.showHideWindow("hide");} 563 | if(self.options.showLens) {self.showHideLens("hide");} 564 | if(self.options.tint) { self.showHideTint("hide");} 565 | } 566 | }, 567 | setPosition: function(e) { 568 | 569 | var self = this; 570 | 571 | if(!self.options.zoomEnabled){return false;} 572 | 573 | //recaclc offset each time in case the image moves 574 | //this can be caused by other on page elements 575 | self.nzHeight = self.$elem.height(); 576 | self.nzWidth = self.$elem.width(); 577 | self.nzOffset = self.$elem.offset(); 578 | 579 | if(self.options.tint && self.options.zoomType != "inner") { 580 | self.zoomTint.css({ top: 0}); 581 | self.zoomTint.css({ left: 0}); 582 | } 583 | //set responsive 584 | //will checking if the image needs changing before running this code work faster? 585 | if(self.options.responsive && !self.options.scrollZoom){ 586 | if(self.options.showLens){ 587 | if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){ 588 | lensHeight = self.nzHeight; 589 | } 590 | else{ 591 | lensHeight = String((self.options.zoomWindowHeight/self.heightRatio)) 592 | } 593 | if(self.largeWidth < self.options.zoomWindowWidth){ 594 | lensWidth = self.nzWidth; 595 | } 596 | else{ 597 | lensWidth = (self.options.zoomWindowWidth/self.widthRatio); 598 | } 599 | self.widthRatio = self.largeWidth / self.nzWidth; 600 | self.heightRatio = self.largeHeight / self.nzHeight; 601 | if(self.options.zoomType != "lens") { 602 | 603 | 604 | //possibly dont need to keep recalcalculating 605 | //if the lens is heigher than the image, then set lens size to image size 606 | if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){ 607 | lensHeight = self.nzHeight; 608 | 609 | } 610 | else{ 611 | lensHeight = String((self.options.zoomWindowHeight/self.heightRatio)) 612 | } 613 | 614 | if(self.nzWidth < self.options.zoomWindowHeight/self.heightRatio){ 615 | lensWidth = self.nzWidth; 616 | } 617 | else{ 618 | lensWidth = String((self.options.zoomWindowWidth/self.widthRatio)); 619 | } 620 | 621 | self.zoomLens.css('width', lensWidth); 622 | self.zoomLens.css('height', lensHeight); 623 | 624 | if(self.options.tint){ 625 | self.zoomTintImage.css('width', self.nzWidth); 626 | self.zoomTintImage.css('height', self.nzHeight); 627 | } 628 | 629 | } 630 | if(self.options.zoomType == "lens") { 631 | 632 | self.zoomLens.css({ width: String(self.options.lensSize) + 'px', height: String(self.options.lensSize) + 'px' }) 633 | 634 | 635 | } 636 | //end responsive image change 637 | } 638 | } 639 | 640 | //container fix 641 | self.zoomContainer.css({ top: self.nzOffset.top}); 642 | self.zoomContainer.css({ left: self.nzOffset.left}); 643 | self.mouseLeft = parseInt(e.pageX - self.nzOffset.left); 644 | self.mouseTop = parseInt(e.pageY - self.nzOffset.top); 645 | //calculate the Location of the Lens 646 | 647 | //calculate the bound regions - but only if zoom window 648 | if(self.options.zoomType == "window") { 649 | self.Etoppos = (self.mouseTop < (self.zoomLens.height()/2)); 650 | self.Eboppos = (self.mouseTop > self.nzHeight - (self.zoomLens.height()/2)-(self.options.lensBorderSize*2)); 651 | self.Eloppos = (self.mouseLeft < 0+((self.zoomLens.width()/2))); 652 | self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.zoomLens.width()/2)-(self.options.lensBorderSize*2))); 653 | } 654 | //calculate the bound regions - but only for inner zoom 655 | if(self.options.zoomType == "inner"){ 656 | self.Etoppos = (self.mouseTop < ((self.nzHeight/2)/self.heightRatio) ); 657 | self.Eboppos = (self.mouseTop > (self.nzHeight - ((self.nzHeight/2)/self.heightRatio))); 658 | self.Eloppos = (self.mouseLeft < 0+(((self.nzWidth/2)/self.widthRatio))); 659 | self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.nzWidth/2)/self.widthRatio-(self.options.lensBorderSize*2))); 660 | } 661 | 662 | // if the mouse position of the slider is one of the outerbounds, then hide window and lens 663 | if (self.mouseLeft < 0 || self.mouseTop < 0 || self.mouseLeft > self.nzWidth || self.mouseTop > self.nzHeight ) { 664 | self.setElements("hide"); 665 | return; 666 | } 667 | //else continue with operations 668 | else { 669 | 670 | 671 | //lens options 672 | if(self.options.showLens) { 673 | // self.showHideLens("show"); 674 | //set background position of lens 675 | self.lensLeftPos = String(Math.floor(self.mouseLeft - self.zoomLens.width() / 2)); 676 | self.lensTopPos = String(Math.floor(self.mouseTop - self.zoomLens.height() / 2)); 677 | 678 | 679 | } 680 | //adjust the background position if the mouse is in one of the outer regions 681 | 682 | //Top region 683 | if(self.Etoppos){ 684 | self.lensTopPos = 0; 685 | } 686 | //Left Region 687 | if(self.Eloppos){ 688 | self.windowLeftPos = 0; 689 | self.lensLeftPos = 0; 690 | self.tintpos=0; 691 | } 692 | //Set bottom and right region for window mode 693 | if(self.options.zoomType == "window") { 694 | if(self.Eboppos){ 695 | self.lensTopPos = Math.max( (self.nzHeight)-self.zoomLens.height()-(self.options.lensBorderSize*2), 0 ); 696 | } 697 | if(self.Eroppos){ 698 | self.lensLeftPos = (self.nzWidth-(self.zoomLens.width())-(self.options.lensBorderSize*2)); 699 | } 700 | } 701 | //Set bottom and right region for inner mode 702 | if(self.options.zoomType == "inner") { 703 | if(self.Eboppos){ 704 | self.lensTopPos = Math.max( ((self.nzHeight)-(self.options.lensBorderSize*2)), 0 ); 705 | } 706 | if(self.Eroppos){ 707 | self.lensLeftPos = (self.nzWidth-(self.nzWidth)-(self.options.lensBorderSize*2)); 708 | } 709 | 710 | } 711 | //if lens zoom 712 | if(self.options.zoomType == "lens") { 713 | self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomLens.width() / 2) * (-1)); 714 | self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomLens.height() / 2) * (-1)); 715 | 716 | self.zoomLens.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' }); 717 | 718 | if(self.changeBgSize){ 719 | 720 | if(self.nzHeight>self.nzWidth){ 721 | if(self.options.zoomType == "lens"){ 722 | self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' }); 723 | } 724 | 725 | self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' }); 726 | } 727 | else{ 728 | if(self.options.zoomType == "lens"){ 729 | self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' }); 730 | } 731 | self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' }); 732 | } 733 | self.changeBgSize = false; 734 | } 735 | 736 | self.setWindowPostition(e); 737 | } 738 | //if tint zoom 739 | if(self.options.tint && self.options.zoomType != "inner") { 740 | self.setTintPosition(e); 741 | 742 | } 743 | //set the css background position 744 | if(self.options.zoomType == "window") { 745 | self.setWindowPostition(e); 746 | } 747 | if(self.options.zoomType == "inner") { 748 | self.setWindowPostition(e); 749 | } 750 | if(self.options.showLens) { 751 | 752 | if(self.fullwidth && self.options.zoomType != "lens"){ 753 | self.lensLeftPos = 0; 754 | 755 | } 756 | self.zoomLens.css({ left: self.lensLeftPos + 'px', top: self.lensTopPos + 'px' }) 757 | } 758 | 759 | } //end else 760 | 761 | 762 | 763 | }, 764 | showHideWindow: function(change) { 765 | var self = this; 766 | if(change == "show"){ 767 | if(!self.isWindowActive){ 768 | if(self.options.zoomWindowFadeIn){ 769 | self.zoomWindow.stop(true, true, false).fadeIn(self.options.zoomWindowFadeIn); 770 | } 771 | else{self.zoomWindow.show();} 772 | self.isWindowActive = true; 773 | } 774 | } 775 | if(change == "hide"){ 776 | if(self.isWindowActive){ 777 | if(self.options.zoomWindowFadeOut){ 778 | self.zoomWindow.stop(true, true).fadeOut(self.options.zoomWindowFadeOut, function () { 779 | if (self.loop) { 780 | //stop moving the zoom window when zoom window is faded out 781 | clearInterval(self.loop); 782 | self.loop = false; 783 | } 784 | }); 785 | } 786 | else{self.zoomWindow.hide();} 787 | self.isWindowActive = false; 788 | } 789 | } 790 | }, 791 | showHideLens: function(change) { 792 | var self = this; 793 | if(change == "show"){ 794 | if(!self.isLensActive){ 795 | if(self.options.lensFadeIn){ 796 | self.zoomLens.stop(true, true, false).fadeIn(self.options.lensFadeIn); 797 | } 798 | else{self.zoomLens.show();} 799 | self.isLensActive = true; 800 | } 801 | } 802 | if(change == "hide"){ 803 | if(self.isLensActive){ 804 | if(self.options.lensFadeOut){ 805 | self.zoomLens.stop(true, true).fadeOut(self.options.lensFadeOut); 806 | } 807 | else{self.zoomLens.hide();} 808 | self.isLensActive = false; 809 | } 810 | } 811 | }, 812 | showHideTint: function(change) { 813 | var self = this; 814 | if(change == "show"){ 815 | if(!self.isTintActive){ 816 | 817 | if(self.options.zoomTintFadeIn){ 818 | self.zoomTint.css({opacity:self.options.tintOpacity}).animate().stop(true, true).fadeIn("slow"); 819 | } 820 | else{ 821 | self.zoomTint.css({opacity:self.options.tintOpacity}).animate(); 822 | self.zoomTint.show(); 823 | 824 | 825 | } 826 | self.isTintActive = true; 827 | } 828 | } 829 | if(change == "hide"){ 830 | if(self.isTintActive){ 831 | 832 | if(self.options.zoomTintFadeOut){ 833 | self.zoomTint.stop(true, true).fadeOut(self.options.zoomTintFadeOut); 834 | } 835 | else{self.zoomTint.hide();} 836 | self.isTintActive = false; 837 | } 838 | } 839 | }, 840 | setLensPostition: function( e ) { 841 | 842 | 843 | }, 844 | setWindowPostition: function( e ) { 845 | //return obj.slice( 0, count ); 846 | var self = this; 847 | 848 | if(!isNaN(self.options.zoomWindowPosition)){ 849 | 850 | switch (self.options.zoomWindowPosition) { 851 | case 1: //done 852 | self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1 853 | self.windowOffsetLeft =(+self.nzWidth); //DONE 1, 2, 3, 4, 16 854 | break; 855 | case 2: 856 | if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin 857 | 858 | self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1); 859 | self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16 860 | } 861 | else{ //negative margin 862 | 863 | } 864 | break; 865 | case 3: //done 866 | self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize*2)); //DONE 3,9 867 | self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16 868 | break; 869 | case 4: //done 870 | self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 871 | self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16 872 | break; 873 | case 5: //done 874 | self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 875 | self.windowOffsetLeft =(self.nzWidth-self.zoomWindow.width()-(self.options.borderSize*2)); //DONE - 5,15 876 | break; 877 | case 6: 878 | if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin 879 | self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 880 | 881 | self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1); 882 | } 883 | else{ //negative margin 884 | 885 | } 886 | 887 | 888 | break; 889 | case 7: //done 890 | self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 891 | self.windowOffsetLeft = 0; //DONE 7, 13 892 | break; 893 | case 8: //done 894 | self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 895 | self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12 896 | break; 897 | case 9: //done 898 | self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize*2)); //DONE 3,9 899 | self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12 900 | break; 901 | case 10: 902 | if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin 903 | 904 | self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1); 905 | self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12 906 | } 907 | else{ //negative margin 908 | 909 | } 910 | break; 911 | case 11: 912 | self.windowOffsetTop = (self.options.zoomWindowOffety); 913 | self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12 914 | break; 915 | case 12: //done 916 | self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16 917 | self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12 918 | break; 919 | case 13: //done 920 | self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16 921 | self.windowOffsetLeft =(0); //DONE 7, 13 922 | break; 923 | case 14: 924 | if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin 925 | self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16 926 | 927 | self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1); 928 | } 929 | else{ //negative margin 930 | 931 | } 932 | 933 | break; 934 | case 15://done 935 | self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16 936 | self.windowOffsetLeft =(self.nzWidth-self.zoomWindow.width()-(self.options.borderSize*2)); //DONE - 5,15 937 | break; 938 | case 16: //done 939 | self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16 940 | self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16 941 | break; 942 | default: //done 943 | self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1 944 | self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16 945 | } 946 | } //end isNAN 947 | else{ 948 | //WE CAN POSITION IN A CLASS - ASSUME THAT ANY STRING PASSED IS 949 | self.externalContainer = $('#'+self.options.zoomWindowPosition); 950 | self.externalContainerWidth = self.externalContainer.width(); 951 | self.externalContainerHeight = self.externalContainer.height(); 952 | self.externalContainerOffset = self.externalContainer.offset(); 953 | 954 | self.windowOffsetTop = self.externalContainerOffset.top;//DONE - 1 955 | self.windowOffsetLeft =self.externalContainerOffset.left; //DONE 1, 2, 3, 4, 16 956 | 957 | } 958 | self.isWindowSet = true; 959 | self.windowOffsetTop = self.windowOffsetTop + self.options.zoomWindowOffety; 960 | self.windowOffsetLeft = self.windowOffsetLeft + self.options.zoomWindowOffetx; 961 | 962 | self.zoomWindow.css({ top: self.windowOffsetTop}); 963 | self.zoomWindow.css({ left: self.windowOffsetLeft}); 964 | 965 | if(self.options.zoomType == "inner") { 966 | self.zoomWindow.css({ top: 0}); 967 | self.zoomWindow.css({ left: 0}); 968 | 969 | } 970 | 971 | 972 | self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1)); 973 | self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1)); 974 | if(self.Etoppos){self.windowTopPos = 0;} 975 | if(self.Eloppos){self.windowLeftPos = 0;} 976 | if(self.Eboppos){self.windowTopPos = (self.largeHeight/self.currentZoomLevel-self.zoomWindow.height())*(-1); } 977 | if(self.Eroppos){self.windowLeftPos = ((self.largeWidth/self.currentZoomLevel-self.zoomWindow.width())*(-1));} 978 | 979 | //stops micro movements 980 | if(self.fullheight){ 981 | self.windowTopPos = 0; 982 | 983 | } 984 | if(self.fullwidth){ 985 | self.windowLeftPos = 0; 986 | 987 | } 988 | //set the css background position 989 | 990 | 991 | if(self.options.zoomType == "window" || self.options.zoomType == "inner") { 992 | 993 | if(self.zoomLock == 1){ 994 | //overrides for images not zoomable 995 | if(self.widthRatio <= 1){ 996 | 997 | self.windowLeftPos = 0; 998 | } 999 | if(self.heightRatio <= 1){ 1000 | self.windowTopPos = 0; 1001 | } 1002 | } 1003 | // adjust images less than the window height 1004 | 1005 | if (self.options.zoomType == "window") { 1006 | if (self.largeHeight < self.options.zoomWindowHeight) { 1007 | 1008 | self.windowTopPos = 0; 1009 | } 1010 | if (self.largeWidth < self.options.zoomWindowWidth) { 1011 | self.windowLeftPos = 0; 1012 | } 1013 | } 1014 | 1015 | //set the zoomwindow background position 1016 | if (self.options.easing){ 1017 | 1018 | // if(self.changeZoom){ 1019 | // clearInterval(self.loop); 1020 | // self.changeZoom = false; 1021 | // self.loop = false; 1022 | 1023 | // } 1024 | //set the pos to 0 if not set 1025 | if(!self.xp){self.xp = 0;} 1026 | if(!self.yp){self.yp = 0;} 1027 | //if loop not already started, then run it 1028 | if (!self.loop){ 1029 | self.loop = setInterval(function(){ 1030 | //using zeno's paradox 1031 | 1032 | self.xp += (self.windowLeftPos - self.xp) / self.options.easingAmount; 1033 | self.yp += (self.windowTopPos - self.yp) / self.options.easingAmount; 1034 | if(self.scrollingLock){ 1035 | 1036 | 1037 | clearInterval(self.loop); 1038 | self.xp = self.windowLeftPos; 1039 | self.yp = self.windowTopPos 1040 | 1041 | self.xp = ((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1); 1042 | self.yp = (((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1)); 1043 | 1044 | if(self.changeBgSize){ 1045 | if(self.nzHeight>self.nzWidth){ 1046 | if(self.options.zoomType == "lens"){ 1047 | self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' }); 1048 | } 1049 | self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' }); 1050 | } 1051 | else{ 1052 | if(self.options.zoomType != "lens"){ 1053 | self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvalueheight + 'px' }); 1054 | } 1055 | self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' }); 1056 | 1057 | } 1058 | 1059 | /* 1060 | if(!self.bgxp){self.bgxp = self.largeWidth/self.newvalue;} 1061 | if(!self.bgyp){self.bgyp = self.largeHeight/self.newvalue ;} 1062 | if (!self.bgloop){ 1063 | self.bgloop = setInterval(function(){ 1064 | 1065 | self.bgxp += (self.largeWidth/self.newvalue - self.bgxp) / self.options.easingAmount; 1066 | self.bgyp += (self.largeHeight/self.newvalue - self.bgyp) / self.options.easingAmount; 1067 | 1068 | self.zoomWindow.css({ "background-size": self.bgxp + 'px ' + self.bgyp + 'px' }); 1069 | 1070 | 1071 | }, 16); 1072 | 1073 | } 1074 | */ 1075 | self.changeBgSize = false; 1076 | } 1077 | 1078 | self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' }); 1079 | self.scrollingLock = false; 1080 | self.loop = false; 1081 | 1082 | } 1083 | else if (Math.round(Math.abs(self.xp - self.windowLeftPos) + Math.abs(self.yp - self.windowTopPos)) < 1) { 1084 | //stops micro movements 1085 | clearInterval(self.loop); 1086 | self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' }); 1087 | self.loop = false; 1088 | } 1089 | else{ 1090 | if(self.changeBgSize){ 1091 | if(self.nzHeight>self.nzWidth){ 1092 | if(self.options.zoomType == "lens"){ 1093 | self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' }); 1094 | } 1095 | self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' }); 1096 | } 1097 | else{ 1098 | if(self.options.zoomType != "lens"){ 1099 | self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' }); 1100 | } 1101 | self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' }); 1102 | } 1103 | self.changeBgSize = false; 1104 | } 1105 | 1106 | self.zoomWindow.css({ backgroundPosition: self.xp + 'px ' + self.yp + 'px' }); 1107 | } 1108 | }, 16); 1109 | } 1110 | } 1111 | else{ 1112 | if(self.changeBgSize){ 1113 | if(self.nzHeight>self.nzWidth){ 1114 | if(self.options.zoomType == "lens"){ 1115 | self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' }); 1116 | } 1117 | 1118 | self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' }); 1119 | } 1120 | else{ 1121 | if(self.options.zoomType == "lens"){ 1122 | self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' }); 1123 | } 1124 | if((self.largeHeight/self.newvaluewidth) < self.options.zoomWindowHeight){ 1125 | 1126 | self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' }); 1127 | } 1128 | else{ 1129 | 1130 | self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' }); 1131 | } 1132 | 1133 | } 1134 | self.changeBgSize = false; 1135 | } 1136 | 1137 | self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' }); 1138 | } 1139 | } 1140 | }, 1141 | setTintPosition: function(e){ 1142 | var self = this; 1143 | self.nzOffset = self.$elem.offset(); 1144 | self.tintpos = String(((e.pageX - self.nzOffset.left)-(self.zoomLens.width() / 2)) * (-1)); 1145 | self.tintposy = String(((e.pageY - self.nzOffset.top) - self.zoomLens.height() / 2) * (-1)); 1146 | if(self.Etoppos){ 1147 | self.tintposy = 0; 1148 | } 1149 | if(self.Eloppos){ 1150 | self.tintpos=0; 1151 | } 1152 | if(self.Eboppos){ 1153 | self.tintposy = (self.nzHeight-self.zoomLens.height()-(self.options.lensBorderSize*2))*(-1); 1154 | } 1155 | if(self.Eroppos){ 1156 | self.tintpos = ((self.nzWidth-self.zoomLens.width()-(self.options.lensBorderSize*2))*(-1)); 1157 | } 1158 | if(self.options.tint) { 1159 | //stops micro movements 1160 | if(self.fullheight){ 1161 | self.tintposy = 0; 1162 | 1163 | } 1164 | if(self.fullwidth){ 1165 | self.tintpos = 0; 1166 | 1167 | } 1168 | self.zoomTintImage.css({'left': self.tintpos+'px'}); 1169 | self.zoomTintImage.css({'top': self.tintposy+'px'}); 1170 | } 1171 | }, 1172 | 1173 | swaptheimage: function(smallimage, largeimage){ 1174 | var self = this; 1175 | var newImg = new Image(); 1176 | 1177 | if(self.options.loadingIcon){ 1178 | self.spinner = $('

'); 1179 | self.$elem.after(self.spinner); 1180 | } 1181 | 1182 | self.options.onImageSwap(self.$elem); 1183 | 1184 | newImg.onload = function() { 1185 | self.largeWidth = newImg.width; 1186 | self.largeHeight = newImg.height; 1187 | self.zoomImage = largeimage; 1188 | self.zoomWindow.css({ "background-size": self.largeWidth + 'px ' + self.largeHeight + 'px' }); 1189 | self.swapAction(smallimage, largeimage); 1190 | return; 1191 | } 1192 | newImg.src = largeimage; // this must be done AFTER setting onload 1193 | 1194 | }, 1195 | swapAction: function(smallimage, largeimage){ 1196 | 1197 | 1198 | var self = this; 1199 | 1200 | var newImg2 = new Image(); 1201 | newImg2.onload = function() { 1202 | //re-calculate values 1203 | self.nzHeight = newImg2.height; 1204 | self.nzWidth = newImg2.width; 1205 | self.options.onImageSwapComplete(self.$elem); 1206 | 1207 | self.doneCallback(); 1208 | return; 1209 | } 1210 | newImg2.src = smallimage; 1211 | 1212 | //reset the zoomlevel to that initially set in options 1213 | self.currentZoomLevel = self.options.zoomLevel; 1214 | self.options.maxZoomLevel = false; 1215 | 1216 | //swaps the main image 1217 | //self.$elem.attr("src",smallimage); 1218 | //swaps the zoom image 1219 | if(self.options.zoomType == "lens") { 1220 | self.zoomLens.css({ backgroundImage: "url('" + largeimage + "')" }); 1221 | } 1222 | if(self.options.zoomType == "window") { 1223 | self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" }); 1224 | } 1225 | if(self.options.zoomType == "inner") { 1226 | self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" }); 1227 | } 1228 | 1229 | 1230 | 1231 | self.currentImage = largeimage; 1232 | 1233 | if(self.options.imageCrossfade){ 1234 | var oldImg = self.$elem; 1235 | var newImg = oldImg.clone(); 1236 | self.$elem.attr("src",smallimage) 1237 | self.$elem.after(newImg); 1238 | newImg.stop(true).fadeOut(self.options.imageCrossfade, function() { 1239 | $(this).remove(); 1240 | }); 1241 | 1242 | // if(self.options.zoomType == "inner"){ 1243 | //remove any attributes on the cloned image so we can resize later 1244 | self.$elem.width("auto").removeAttr("width"); 1245 | self.$elem.height("auto").removeAttr("height"); 1246 | // } 1247 | 1248 | oldImg.fadeIn(self.options.imageCrossfade); 1249 | 1250 | if(self.options.tint && self.options.zoomType != "inner") { 1251 | 1252 | var oldImgTint = self.zoomTintImage; 1253 | var newImgTint = oldImgTint.clone(); 1254 | self.zoomTintImage.attr("src",largeimage) 1255 | self.zoomTintImage.after(newImgTint); 1256 | newImgTint.stop(true).fadeOut(self.options.imageCrossfade, function() { 1257 | $(this).remove(); 1258 | }); 1259 | 1260 | 1261 | 1262 | oldImgTint.fadeIn(self.options.imageCrossfade); 1263 | 1264 | 1265 | //self.zoomTintImage.attr("width",elem.data("image")); 1266 | 1267 | //resize the tint window 1268 | self.zoomTint.css({ height: self.$elem.height()}); 1269 | self.zoomTint.css({ width: self.$elem.width()}); 1270 | } 1271 | 1272 | self.zoomContainer.css("height", self.$elem.height()); 1273 | self.zoomContainer.css("width", self.$elem.width()); 1274 | 1275 | if(self.options.zoomType == "inner"){ 1276 | if(!self.options.constrainType){ 1277 | self.zoomWrap.parent().css("height", self.$elem.height()); 1278 | self.zoomWrap.parent().css("width", self.$elem.width()); 1279 | 1280 | self.zoomWindow.css("height", self.$elem.height()); 1281 | self.zoomWindow.css("width", self.$elem.width()); 1282 | } 1283 | } 1284 | 1285 | if(self.options.imageCrossfade){ 1286 | self.zoomWrap.css("height", self.$elem.height()); 1287 | self.zoomWrap.css("width", self.$elem.width()); 1288 | } 1289 | } 1290 | else{ 1291 | self.$elem.attr("src",smallimage); 1292 | if(self.options.tint) { 1293 | self.zoomTintImage.attr("src",largeimage); 1294 | //self.zoomTintImage.attr("width",elem.data("image")); 1295 | self.zoomTintImage.attr("height",self.$elem.height()); 1296 | //self.zoomTintImage.attr('src') = elem.data("image"); 1297 | self.zoomTintImage.css({ height: self.$elem.height()}); 1298 | self.zoomTint.css({ height: self.$elem.height()}); 1299 | 1300 | } 1301 | self.zoomContainer.css("height", self.$elem.height()); 1302 | self.zoomContainer.css("width", self.$elem.width()); 1303 | 1304 | if(self.options.imageCrossfade){ 1305 | self.zoomWrap.css("height", self.$elem.height()); 1306 | self.zoomWrap.css("width", self.$elem.width()); 1307 | } 1308 | } 1309 | if(self.options.constrainType){ 1310 | 1311 | //This will contrain the image proportions 1312 | if(self.options.constrainType == "height"){ 1313 | 1314 | self.zoomContainer.css("height", self.options.constrainSize); 1315 | self.zoomContainer.css("width", "auto"); 1316 | 1317 | if(self.options.imageCrossfade){ 1318 | self.zoomWrap.css("height", self.options.constrainSize); 1319 | self.zoomWrap.css("width", "auto"); 1320 | self.constwidth = self.zoomWrap.width(); 1321 | 1322 | 1323 | } 1324 | else{ 1325 | self.$elem.css("height", self.options.constrainSize); 1326 | self.$elem.css("width", "auto"); 1327 | self.constwidth = self.$elem.width(); 1328 | } 1329 | 1330 | if(self.options.zoomType == "inner"){ 1331 | 1332 | self.zoomWrap.parent().css("height", self.options.constrainSize); 1333 | self.zoomWrap.parent().css("width", self.constwidth); 1334 | self.zoomWindow.css("height", self.options.constrainSize); 1335 | self.zoomWindow.css("width", self.constwidth); 1336 | } 1337 | if(self.options.tint){ 1338 | self.tintContainer.css("height", self.options.constrainSize); 1339 | self.tintContainer.css("width", self.constwidth); 1340 | self.zoomTint.css("height", self.options.constrainSize); 1341 | self.zoomTint.css("width", self.constwidth); 1342 | self.zoomTintImage.css("height", self.options.constrainSize); 1343 | self.zoomTintImage.css("width", self.constwidth); 1344 | } 1345 | 1346 | } 1347 | if(self.options.constrainType == "width"){ 1348 | self.zoomContainer.css("height", "auto"); 1349 | self.zoomContainer.css("width", self.options.constrainSize); 1350 | 1351 | if(self.options.imageCrossfade){ 1352 | self.zoomWrap.css("height", "auto"); 1353 | self.zoomWrap.css("width", self.options.constrainSize); 1354 | self.constheight = self.zoomWrap.height(); 1355 | } 1356 | else{ 1357 | self.$elem.css("height", "auto"); 1358 | self.$elem.css("width", self.options.constrainSize); 1359 | self.constheight = self.$elem.height(); 1360 | } 1361 | if(self.options.zoomType == "inner"){ 1362 | self.zoomWrap.parent().css("height", self.constheight); 1363 | self.zoomWrap.parent().css("width", self.options.constrainSize); 1364 | self.zoomWindow.css("height", self.constheight); 1365 | self.zoomWindow.css("width", self.options.constrainSize); 1366 | } 1367 | if(self.options.tint){ 1368 | self.tintContainer.css("height", self.constheight); 1369 | self.tintContainer.css("width", self.options.constrainSize); 1370 | self.zoomTint.css("height", self.constheight); 1371 | self.zoomTint.css("width", self.options.constrainSize); 1372 | self.zoomTintImage.css("height", self.constheight); 1373 | self.zoomTintImage.css("width", self.options.constrainSize); 1374 | } 1375 | 1376 | } 1377 | 1378 | 1379 | } 1380 | 1381 | }, 1382 | doneCallback: function(){ 1383 | 1384 | var self = this; 1385 | if(self.options.loadingIcon){ 1386 | self.spinner.hide(); 1387 | } 1388 | 1389 | self.nzOffset = self.$elem.offset(); 1390 | self.nzWidth = self.$elem.width(); 1391 | self.nzHeight = self.$elem.height(); 1392 | 1393 | // reset the zoomlevel back to default 1394 | self.currentZoomLevel = self.options.zoomLevel; 1395 | 1396 | //ratio of the large to small image 1397 | self.widthRatio = self.largeWidth / self.nzWidth; 1398 | self.heightRatio = self.largeHeight / self.nzHeight; 1399 | 1400 | //NEED TO ADD THE LENS SIZE FOR ROUND 1401 | // adjust images less than the window height 1402 | if(self.options.zoomType == "window") { 1403 | 1404 | if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){ 1405 | lensHeight = self.nzHeight; 1406 | 1407 | } 1408 | else{ 1409 | lensHeight = String((self.options.zoomWindowHeight/self.heightRatio)) 1410 | } 1411 | 1412 | if(self.options.zoomWindowWidth < self.options.zoomWindowWidth){ 1413 | lensWidth = self.nzWidth; 1414 | } 1415 | else{ 1416 | lensWidth = (self.options.zoomWindowWidth/self.widthRatio); 1417 | } 1418 | 1419 | 1420 | if(self.zoomLens){ 1421 | 1422 | self.zoomLens.css('width', lensWidth); 1423 | self.zoomLens.css('height', lensHeight); 1424 | 1425 | 1426 | } 1427 | } 1428 | }, 1429 | getCurrentImage: function(){ 1430 | var self = this; 1431 | return self.zoomImage; 1432 | }, 1433 | getGalleryList: function(){ 1434 | var self = this; 1435 | //loop through the gallery options and set them in list for fancybox 1436 | self.gallerylist = []; 1437 | if (self.options.gallery){ 1438 | 1439 | 1440 | $('#'+self.options.gallery + ' a').each(function() { 1441 | 1442 | var img_src = ''; 1443 | if($(this).data("zoom-image")){ 1444 | img_src = $(this).data("zoom-image"); 1445 | } 1446 | else if($(this).data("image")){ 1447 | img_src = $(this).data("image"); 1448 | } 1449 | //put the current image at the start 1450 | if(img_src == self.zoomImage){ 1451 | self.gallerylist.unshift({ 1452 | href: ''+img_src+'', 1453 | title: $(this).find('img').attr("title") 1454 | }); 1455 | } 1456 | else{ 1457 | self.gallerylist.push({ 1458 | href: ''+img_src+'', 1459 | title: $(this).find('img').attr("title") 1460 | }); 1461 | } 1462 | 1463 | 1464 | }); 1465 | } 1466 | //if no gallery - return current image 1467 | else{ 1468 | self.gallerylist.push({ 1469 | href: ''+self.zoomImage+'', 1470 | title: $(this).find('img').attr("title") 1471 | }); 1472 | } 1473 | return self.gallerylist; 1474 | 1475 | }, 1476 | changeZoomLevel: function(value){ 1477 | var self = this; 1478 | 1479 | //flag a zoom, so can adjust the easing during setPosition 1480 | self.scrollingLock = true; 1481 | 1482 | //round to two decimal places 1483 | self.newvalue = parseFloat(value).toFixed(2); 1484 | newvalue = parseFloat(value).toFixed(2); 1485 | 1486 | 1487 | 1488 | 1489 | //maxwidth & Maxheight of the image 1490 | maxheightnewvalue = self.largeHeight/((self.options.zoomWindowHeight / self.nzHeight) * self.nzHeight); 1491 | maxwidthtnewvalue = self.largeWidth/((self.options.zoomWindowWidth / self.nzWidth) * self.nzWidth); 1492 | 1493 | 1494 | 1495 | 1496 | //calculate new heightratio 1497 | if(self.options.zoomType != "inner") 1498 | { 1499 | if(maxheightnewvalue <= newvalue){ 1500 | self.heightRatio = (self.largeHeight/maxheightnewvalue) / self.nzHeight; 1501 | self.newvalueheight = maxheightnewvalue; 1502 | self.fullheight = true; 1503 | 1504 | } 1505 | else{ 1506 | self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight; 1507 | self.newvalueheight = newvalue; 1508 | self.fullheight = false; 1509 | 1510 | } 1511 | 1512 | 1513 | // calculate new width ratio 1514 | 1515 | if(maxwidthtnewvalue <= newvalue){ 1516 | self.widthRatio = (self.largeWidth/maxwidthtnewvalue) / self.nzWidth; 1517 | self.newvaluewidth = maxwidthtnewvalue; 1518 | self.fullwidth = true; 1519 | 1520 | } 1521 | else{ 1522 | self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth; 1523 | self.newvaluewidth = newvalue; 1524 | self.fullwidth = false; 1525 | 1526 | } 1527 | if(self.options.zoomType == "lens"){ 1528 | if(maxheightnewvalue <= newvalue){ 1529 | self.fullwidth = true; 1530 | self.newvaluewidth = maxheightnewvalue; 1531 | 1532 | } else{ 1533 | self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth; 1534 | self.newvaluewidth = newvalue; 1535 | 1536 | self.fullwidth = false; 1537 | }} 1538 | } 1539 | 1540 | 1541 | 1542 | if(self.options.zoomType == "inner") 1543 | { 1544 | maxheightnewvalue = parseFloat(self.largeHeight/self.nzHeight).toFixed(2); 1545 | maxwidthtnewvalue = parseFloat(self.largeWidth/self.nzWidth).toFixed(2); 1546 | if(newvalue > maxheightnewvalue){ 1547 | newvalue = maxheightnewvalue; 1548 | } 1549 | if(newvalue > maxwidthtnewvalue){ 1550 | newvalue = maxwidthtnewvalue; 1551 | } 1552 | 1553 | 1554 | if(maxheightnewvalue <= newvalue){ 1555 | 1556 | 1557 | self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight; 1558 | if(newvalue > maxheightnewvalue){ 1559 | self.newvalueheight = maxheightnewvalue; 1560 | }else{ 1561 | self.newvalueheight = newvalue; 1562 | } 1563 | self.fullheight = true; 1564 | 1565 | 1566 | } 1567 | else{ 1568 | 1569 | 1570 | 1571 | self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight; 1572 | 1573 | if(newvalue > maxheightnewvalue){ 1574 | 1575 | self.newvalueheight = maxheightnewvalue; 1576 | }else{ 1577 | self.newvalueheight = newvalue; 1578 | } 1579 | self.fullheight = false; 1580 | } 1581 | 1582 | 1583 | 1584 | 1585 | if(maxwidthtnewvalue <= newvalue){ 1586 | 1587 | self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth; 1588 | if(newvalue > maxwidthtnewvalue){ 1589 | 1590 | self.newvaluewidth = maxwidthtnewvalue; 1591 | }else{ 1592 | self.newvaluewidth = newvalue; 1593 | } 1594 | 1595 | self.fullwidth = true; 1596 | 1597 | 1598 | } 1599 | else{ 1600 | 1601 | self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth; 1602 | self.newvaluewidth = newvalue; 1603 | self.fullwidth = false; 1604 | } 1605 | 1606 | 1607 | } //end inner 1608 | scrcontinue = false; 1609 | 1610 | if(self.options.zoomType == "inner"){ 1611 | 1612 | if(self.nzWidth >= self.nzHeight){ 1613 | if( self.newvaluewidth <= maxwidthtnewvalue){ 1614 | scrcontinue = true; 1615 | } 1616 | else{ 1617 | 1618 | scrcontinue = false; 1619 | self.fullheight = true; 1620 | self.fullwidth = true; 1621 | } 1622 | } 1623 | if(self.nzHeight > self.nzWidth){ 1624 | if( self.newvaluewidth <= maxwidthtnewvalue){ 1625 | scrcontinue = true; 1626 | } 1627 | else{ 1628 | scrcontinue = false; 1629 | 1630 | self.fullheight = true; 1631 | self.fullwidth = true; 1632 | } 1633 | } 1634 | } 1635 | 1636 | if(self.options.zoomType != "inner"){ 1637 | scrcontinue = true; 1638 | } 1639 | 1640 | if(scrcontinue){ 1641 | 1642 | 1643 | 1644 | self.zoomLock = 0; 1645 | self.changeZoom = true; 1646 | 1647 | //if lens height is less than image height 1648 | 1649 | 1650 | if(((self.options.zoomWindowHeight)/self.heightRatio) <= self.nzHeight){ 1651 | 1652 | 1653 | self.currentZoomLevel = self.newvalueheight; 1654 | if(self.options.zoomType != "lens" && self.options.zoomType != "inner") { 1655 | self.changeBgSize = true; 1656 | 1657 | self.zoomLens.css({height: String((self.options.zoomWindowHeight)/self.heightRatio) + 'px' }) 1658 | } 1659 | if(self.options.zoomType == "lens" || self.options.zoomType == "inner") { 1660 | self.changeBgSize = true; 1661 | } 1662 | 1663 | 1664 | } 1665 | 1666 | 1667 | 1668 | 1669 | if((self.options.zoomWindowWidth/self.widthRatio) <= self.nzWidth){ 1670 | 1671 | 1672 | 1673 | if(self.options.zoomType != "inner"){ 1674 | if(self.newvaluewidth > self.newvalueheight) { 1675 | self.currentZoomLevel = self.newvaluewidth; 1676 | 1677 | } 1678 | } 1679 | 1680 | if(self.options.zoomType != "lens" && self.options.zoomType != "inner") { 1681 | self.changeBgSize = true; 1682 | 1683 | self.zoomLens.css({width: String((self.options.zoomWindowWidth)/self.widthRatio) + 'px' }) 1684 | } 1685 | if(self.options.zoomType == "lens" || self.options.zoomType == "inner") { 1686 | self.changeBgSize = true; 1687 | } 1688 | 1689 | } 1690 | if(self.options.zoomType == "inner"){ 1691 | self.changeBgSize = true; 1692 | 1693 | if(self.nzWidth > self.nzHeight){ 1694 | self.currentZoomLevel = self.newvaluewidth; 1695 | } 1696 | if(self.nzHeight > self.nzWidth){ 1697 | self.currentZoomLevel = self.newvaluewidth; 1698 | } 1699 | } 1700 | 1701 | } //under 1702 | 1703 | //sets the boundry change, called in setWindowPos 1704 | self.setPosition(self.currentLoc); 1705 | // 1706 | }, 1707 | closeAll: function(){ 1708 | if(self.zoomWindow){self.zoomWindow.hide();} 1709 | if(self.zoomLens){self.zoomLens.hide();} 1710 | if(self.zoomTint){self.zoomTint.hide();} 1711 | }, 1712 | changeState: function(value){ 1713 | var self = this; 1714 | if(value == 'enable'){self.options.zoomEnabled = true;} 1715 | if(value == 'disable'){self.options.zoomEnabled = false;} 1716 | 1717 | } 1718 | 1719 | }; 1720 | 1721 | 1722 | 1723 | 1724 | $.fn.elevateZoom = function( options ) { 1725 | return this.each(function() { 1726 | var elevate = Object.create( ElevateZoom ); 1727 | 1728 | elevate.init( options, this ); 1729 | 1730 | $.data( this, 'elevateZoom', elevate ); 1731 | 1732 | }); 1733 | }; 1734 | 1735 | $.fn.elevateZoom.options = { 1736 | zoomActivation: "hover", // Can also be click (PLACEHOLDER FOR NEXT VERSION) 1737 | zoomEnabled: true, //false disables zoomwindow from showing 1738 | preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION) 1739 | zoomLevel: 1, //default zoom level of image 1740 | scrollZoom: false, //allow zoom on mousewheel, true to activate 1741 | scrollZoomIncrement: 0.1, //steps of the scrollzoom 1742 | minZoomLevel: false, 1743 | maxZoomLevel: false, 1744 | easing: false, 1745 | easingAmount: 12, 1746 | lensSize: 200, 1747 | zoomWindowWidth: 400, 1748 | zoomWindowHeight: 400, 1749 | zoomWindowOffetx: 0, 1750 | zoomWindowOffety: 0, 1751 | zoomWindowPosition: 1, 1752 | zoomWindowBgColour: "#fff", 1753 | lensFadeIn: false, 1754 | lensFadeOut: false, 1755 | debug: false, 1756 | zoomWindowFadeIn: false, 1757 | zoomWindowFadeOut: false, 1758 | zoomWindowAlwaysShow: false, 1759 | zoomTintFadeIn: false, 1760 | zoomTintFadeOut: false, 1761 | borderSize: 4, 1762 | showLens: true, 1763 | borderColour: "#888", 1764 | lensBorderSize: 1, 1765 | lensBorderColour: "#000", 1766 | lensShape: "square", //can be "round" 1767 | zoomType: "window", //window is default, also "lens" available - 1768 | containLensZoom: false, 1769 | lensColour: "white", //colour of the lens background 1770 | lensOpacity: 0.4, //opacity of the lens 1771 | lenszoom: false, 1772 | tint: false, //enable the tinting 1773 | tintColour: "#333", //default tint color, can be anything, red, #ccc, rgb(0,0,0) 1774 | tintOpacity: 0.4, //opacity of the tint 1775 | gallery: false, 1776 | galleryActiveClass: "zoomGalleryActive", 1777 | imageCrossfade: false, 1778 | constrainType: false, //width or height 1779 | constrainSize: false, //in pixels the dimensions you want to constrain on 1780 | loadingIcon: false, //http://www.example.com/spinner.gif 1781 | cursor:"default", // user should set to what they want the cursor as, if they have set a click function 1782 | responsive:true, 1783 | onComplete: $.noop, 1784 | onDestroy: function() {}, 1785 | onZoomedImageLoaded: function() {}, 1786 | onImageSwap: $.noop, 1787 | onImageSwapComplete: $.noop 1788 | }; 1789 | 1790 | })( jQuery, window, document ); --------------------------------------------------------------------------------

Basic Zoom Example