/* * jquery elevatezoom 3.0.8 * demo's and documentation: * www.elevateweb.co.uk/image-zoom * * copyright (c) 2012 andrew eades * www.elevateweb.co.uk * * dual licensed under the gpl and mit licenses. * http://en.wikipedia.org/wiki/mit_license * http://en.wikipedia.org/wiki/gnu_general_public_license * /* * jquery elevatezoom 3.0.3 * demo's and documentation: * www.elevateweb.co.uk/image-zoom * * copyright (c) 2012 andrew eades * www.elevateweb.co.uk * * dual licensed under the gpl and mit licenses. * http://en.wikipedia.org/wiki/mit_license * http://en.wikipedia.org/wiki/gnu_general_public_license */ if ( typeof object.create !== 'function' ) { object.create = function( obj ) { function f() {}; f.prototype = obj; return new f(); }; } (function( $, window, document, undefined ) { var elevatezoom = { init: function( options, elem ) { var self = this; self.elem = elem; self.$elem = $( elem ); self.imagesrc = self.$elem.data("zoom-image") ? self.$elem.data("zoom-image") : self.$elem.attr("src"); self.options = $.extend( {}, $.fn.elevatezoom.options, options ); //tint override settings if(self.options.tint) { self.options.lenscolour = "none", //colour of the lens background self.options.lensopacity = "1" //opacity of the lens } //inner override settings if(self.options.zoomtype == "inner") {self.options.showlens = false;} //remove alt on hover self.$elem.parent().removeattr('title').removeattr('alt'); self.zoomimage = self.imagesrc; self.refresh( 1 ); //create the image swap from the gallery $('#'+self.options.gallery + ' a').click( function(e) { //set a class on the currently active gallery image if(self.options.galleryactiveclass){ $('#'+self.options.gallery + ' a').removeclass(self.options.galleryactiveclass); $(this).addclass(self.options.galleryactiveclass); } //stop any link on the a tag from working e.preventdefault(); //call the swap image function if($(this).data("zoom-image")){self.zoomimagepre = $(this).data("zoom-image")} else{self.zoomimagepre = $(this).data("image");} self.swaptheimage($(this).data("image"), self.zoomimagepre); return false; }); }, refresh: function( length ) { var self = this; settimeout(function() { self.fetch(self.imagesrc); }, length || self.options.refresh ); }, fetch: function(imgsrc) { //get the image var self = this; var newimg = new image(); newimg.onload = function() { //set the large image dimensions - used to calculte ratio's self.largewidth = newimg.width; self.largeheight = newimg.height; //once image is loaded start the calls self.startzoom(); self.currentimage = self.imagesrc; //let caller know image has been loaded self.options.onzoomedimageloaded(self.$elem); } newimg.src = imgsrc; // this must be done after setting onload return; }, startzoom: function( ) { var self = this; //get dimensions of the non zoomed image self.nzwidth = self.$elem.width(); self.nzheight = self.$elem.height(); //activated elements self.iswindowactive = false; self.islensactive = false; self.istintactive = false; self.overwindow = false; //crossfade wrappe if(self.options.imagecrossfade){ self.zoomwrap = self.$elem.wrap('
'); self.$elem.css('position', 'absolute'); } self.zoomlock = 1; self.scrollinglock = false; self.changebgsize = false; self.currentzoomlevel = self.options.zoomlevel; //get offset of the non zoomed image self.nzoffset = self.$elem.offset(); //calculate the width ratio of the large/small image self.widthratio = (self.largewidth/self.currentzoomlevel) / self.nzwidth; self.heightratio = (self.largeheight/self.currentzoomlevel) / self.nzheight; //if window zoom if(self.options.zoomtype == "window") { self.zoomwindowstyle = "overflow: hidden;" + "background-position: 0px 0px;text-align:center;" + "background-color: " + string(self.options.zoomwindowbgcolour) + ";width: " + string(self.options.zoomwindowwidth) + "px;" + "height: " + string(self.options.zoomwindowheight) + "px;float: left;" + "background-size: "+ self.largewidth/self.currentzoomlevel+ "px " +self.largeheight/self.currentzoomlevel + "px;" + "display: none;z-index:100;" + "border: " + string(self.options.bordersize) + "px solid " + self.options.bordercolour + ";background-repeat: no-repeat;" + "position: absolute;"; } //if inner zoom if(self.options.zoomtype == "inner") { //has a border been put on the image? lets cater for this var borderwidth = self.$elem.css("border-left-width"); self.zoomwindowstyle = "overflow: hidden;" + "margin-left: " + string(borderwidth) + ";" + "margin-top: " + string(borderwidth) + ";" + "background-position: 0px 0px;" + "width: " + string(self.nzwidth) + "px;" + "height: " + string(self.nzheight) + "px;" + "px;float: left;" + "display: none;" + "cursor:"+(self.options.cursor)+";" + "px solid " + self.options.bordercolour + ";background-repeat: no-repeat;" + "position: absolute;"; } //lens style for window zoom if(self.options.zoomtype == "window") { // adjust images less than the window height if(self.nzheight < self.options.zoomwindowwidth/self.widthratio){ lensheight = self.nzheight; } else{ lensheight = string((self.options.zoomwindowheight/self.heightratio)) } if(self.largewidth < self.options.zoomwindowwidth){ lenswidth = self.nzwidth; } else{ lenswidth = (self.options.zoomwindowwidth/self.widthratio); } self.lensstyle = "background-position: 0px 0px;width: " + string((self.options.zoomwindowwidth)/self.widthratio) + "px;height: " + string((self.options.zoomwindowheight)/self.heightratio) + "px;float: right;display: none;" + "overflow: hidden;" + "z-index: 999;" + "-webkit-transform: translatez(0);" + "opacity:"+(self.options.lensopacity)+";filter: alpha(opacity = "+(self.options.lensopacity*100)+"); zoom:1;" + "width:"+lenswidth+"px;" + "height:"+lensheight+"px;" + "background-color:"+(self.options.lenscolour)+";" + "cursor:"+(self.options.cursor)+";" + "border: "+(self.options.lensbordersize)+"px" + " solid "+(self.options.lensbordercolour)+";background-repeat: no-repeat;position: absolute;"; } //tint style self.tintstyle = "display: block;" + "position: absolute;" + "background-color: "+self.options.tintcolour+";" + "filter:alpha(opacity=0);" + "opacity: 0;" + "width: " + self.nzwidth + "px;" + "height: " + self.nzheight + "px;" ; //lens style for lens zoom with optional round for modern browsers self.lensround = ''; if(self.options.zoomtype == "lens") { self.lensstyle = "background-position: 0px 0px;" + "float: left;display: none;" + "border: " + string(self.options.bordersize) + "px solid " + self.options.bordercolour+";" + "width:"+ string(self.options.lenssize) +"px;" + "height:"+ string(self.options.lenssize)+"px;" + "background-repeat: no-repeat;position: absolute;"; } //does not round in all browsers if(self.options.lensshape == "round") { self.lensround = "border-top-left-radius: " + string(self.options.lenssize / 2 + self.options.bordersize) + "px;" + "border-top-right-radius: " + string(self.options.lenssize / 2 + self.options.bordersize) + "px;" + "border-bottom-left-radius: " + string(self.options.lenssize / 2 + self.options.bordersize) + "px;" + "border-bottom-right-radius: " + string(self.options.lenssize / 2 + self.options.bordersize) + "px;"; } //create the div's + "" //self.zoomcontainer = $('
').addclass('zoomcontainer').css({"position":"relative", "height":self.nzheight, "width":self.nzwidth}); self.zoomcontainer = $('
'); $('body').append(self.zoomcontainer); //this will add overflow hidden and contrain the lens on lens mode if(self.options.containlenszoom && self.options.zoomtype == "lens"){ self.zoomcontainer.css("overflow", "hidden"); } if(self.options.zoomtype != "inner") { self.zoomlens = $("
 
") .appendto(self.zoomcontainer) .click(function () { self.$elem.trigger('click'); }); if(self.options.tint) { self.tintcontainer = $('
').addclass('tintcontainer'); self.zoomtint = $("
"); self.zoomlens.wrap(self.tintcontainer); self.zoomtintcss = self.zoomlens.after(self.zoomtint); //if tint enabled - set an image to show over the tint self.zoomtintimage = $('') .appendto(self.zoomlens) .click(function () { self.$elem.trigger('click'); }); } } //create zoom window if(isnan(self.options.zoomwindowposition)){ self.zoomwindow = $("
 
") .appendto('body') .click(function () { self.$elem.trigger('click'); }); }else{ self.zoomwindow = $("
 
") .appendto(self.zoomcontainer) .click(function () { self.$elem.trigger('click'); }); } self.zoomwindowcontainer = $('
').addclass('zoomwindowcontainer').css("width",self.options.zoomwindowwidth); self.zoomwindow.wrap(self.zoomwindowcontainer); // self.captionstyle = "text-align: left;background-color: black;color: white;font-weight: bold;padding: 10px;font-family: sans-serif;font-size: 11px"; // self.zoomcaption = $('
insert alt tag
').appendto(self.zoomwindow.parent()); if(self.options.zoomtype == "lens") { self.zoomlens.css({ backgroundimage: "url('" + self.imagesrc + "')" }); } if(self.options.zoomtype == "window") { self.zoomwindow.css({ backgroundimage: "url('" + self.imagesrc + "')" }); } if(self.options.zoomtype == "inner") { self.zoomwindow.css({ backgroundimage: "url('" + self.imagesrc + "')" }); } /*-------------------end the zoom window and lens----------------------------------*/ //touch events self.$elem.bind('touchmove', function(e){ e.preventdefault(); var touch = e.originalevent.touches[0] || e.originalevent.changedtouches[0]; self.setposition(touch); }); self.zoomcontainer.bind('touchmove', function(e){ if(self.options.zoomtype == "inner") { self.showhidewindow("show"); } e.preventdefault(); var touch = e.originalevent.touches[0] || e.originalevent.changedtouches[0]; self.setposition(touch); }); self.zoomcontainer.bind('touchend', function(e){ self.showhidewindow("hide"); if(self.options.showlens) {self.showhidelens("hide");} if(self.options.tint && self.options.zoomtype != "inner") {self.showhidetint("hide");} }); self.$elem.bind('touchend', function(e){ self.showhidewindow("hide"); if(self.options.showlens) {self.showhidelens("hide");} if(self.options.tint && self.options.zoomtype != "inner") {self.showhidetint("hide");} }); if(self.options.showlens) { self.zoomlens.bind('touchmove', function(e){ e.preventdefault(); var touch = e.originalevent.touches[0] || e.originalevent.changedtouches[0]; self.setposition(touch); }); self.zoomlens.bind('touchend', function(e){ self.showhidewindow("hide"); if(self.options.showlens) {self.showhidelens("hide");} if(self.options.tint && self.options.zoomtype != "inner") {self.showhidetint("hide");} }); } //needed to work in ie self.$elem.bind('mousemove', function(e){ if(self.overwindow == false){self.setelements("show");} //make sure on orientation change the setposition is not fired if(self.lastx !== e.clientx || self.lasty !== e.clienty){ self.setposition(e); self.currentloc = e; } self.lastx = e.clientx; self.lasty = e.clienty; }); self.zoomcontainer.bind('mousemove', function(e){ if(self.overwindow == false){self.setelements("show");} //make sure on orientation change the setposition is not fired if(self.lastx !== e.clientx || self.lasty !== e.clienty){ self.setposition(e); self.currentloc = e; } self.lastx = e.clientx; self.lasty = e.clienty; }); if(self.options.zoomtype != "inner") { self.zoomlens.bind('mousemove', function(e){ //make sure on orientation change the setposition is not fired if(self.lastx !== e.clientx || self.lasty !== e.clienty){ self.setposition(e); self.currentloc = e; } self.lastx = e.clientx; self.lasty = e.clienty; }); } if(self.options.tint && self.options.zoomtype != "inner") { self.zoomtint.bind('mousemove', function(e){ //make sure on orientation change the setposition is not fired if(self.lastx !== e.clientx || self.lasty !== e.clienty){ self.setposition(e); self.currentloc = e; } self.lastx = e.clientx; self.lasty = e.clienty; }); } if(self.options.zoomtype == "inner") { self.zoomwindow.bind('mousemove', function(e) { //self.overwindow = true; //make sure on orientation change the setposition is not fired if(self.lastx !== e.clientx || self.lasty !== e.clienty){ self.setposition(e); self.currentloc = e; } self.lastx = e.clientx; self.lasty = e.clienty; }); } // lensfadeout: 500, zoomtintfadein self.zoomcontainer.add(self.$elem).mouseenter(function(){ if(self.overwindow == false){self.setelements("show");} }).mouseleave(function(){ if(!self.scrolllock){ self.setelements("hide"); self.options.ondestroy(self.$elem); } }); //end ove image if(self.options.zoomtype != "inner") { self.zoomwindow.mouseenter(function(){ self.overwindow = true; self.setelements("hide"); }).mouseleave(function(){ self.overwindow = false; }); } //end ove image // var delta = parseint(e.originalevent.wheeldelta || -e.originalevent.detail); // $(this).empty(); // return false; //fix for initial zoom setting if (self.options.zoomlevel != 1){ // self.changezoomlevel(self.currentzoomlevel); } //set the min zoomlevel if(self.options.minzoomlevel){ self.minzoomlevel = self.options.minzoomlevel; } else{ self.minzoomlevel = self.options.scrollzoomincrement * 2; } if(self.options.scrollzoom){ self.zoomcontainer.add(self.$elem).bind('mousewheel dommousescroll mozmousepixelscroll', function(e){ // in ie there is issue with firing of mouseleave - so check whether still scrolling // and on mouseleave check if scrolllock self.scrolllock = true; cleartimeout($.data(this, 'timer')); $.data(this, 'timer', settimeout(function() { self.scrolllock = false; //do something }, 250)); var theevent = e.originalevent.wheeldelta || e.originalevent.detail*-1 //this.scrolltop += ( delta < 0 ? 1 : -1 ) * 30; // e.preventdefault(); e.stopimmediatepropagation(); e.stoppropagation(); e.preventdefault(); if(theevent /120 > 0) { //scrolling up if(self.currentzoomlevel >= self.minzoomlevel){ self.changezoomlevel(self.currentzoomlevel-self.options.scrollzoomincrement); } } else{ //scrolling down if(self.options.maxzoomlevel){ if(self.currentzoomlevel <= self.options.maxzoomlevel){ self.changezoomlevel(parsefloat(self.currentzoomlevel)+self.options.scrollzoomincrement); } } else{ //andy self.changezoomlevel(parsefloat(self.currentzoomlevel)+self.options.scrollzoomincrement); } } return false; }); } }, setelements: function(type) { var self = this; if(!self.options.zoomenabled){return false;} if(type=="show"){ if(self.iswindowset){ if(self.options.zoomtype == "inner") {self.showhidewindow("show");} if(self.options.zoomtype == "window") {self.showhidewindow("show");} if(self.options.showlens) {self.showhidelens("show");} if(self.options.tint && self.options.zoomtype != "inner") {self.showhidetint("show"); } } } if(type=="hide"){ if(self.options.zoomtype == "window") {self.showhidewindow("hide");} if(!self.options.tint) {self.showhidewindow("hide");} if(self.options.showlens) {self.showhidelens("hide");} if(self.options.tint) { self.showhidetint("hide");} } }, setposition: function(e) { var self = this; if(!self.options.zoomenabled){return false;} //recaclc offset each time in case the image moves //this can be caused by other on page elements self.nzheight = self.$elem.height(); self.nzwidth = self.$elem.width(); self.nzoffset = self.$elem.offset(); if(self.options.tint && self.options.zoomtype != "inner") { self.zoomtint.css({ top: 0}); self.zoomtint.css({ left: 0}); } //set responsive //will checking if the image needs changing before running this code work faster? if(self.options.responsive && !self.options.scrollzoom){ if(self.options.showlens){ if(self.nzheight < self.options.zoomwindowwidth/self.widthratio){ lensheight = self.nzheight; } else{ lensheight = string((self.options.zoomwindowheight/self.heightratio)) } if(self.largewidth < self.options.zoomwindowwidth){ lenswidth = self.nzwidth; } else{ lenswidth = (self.options.zoomwindowwidth/self.widthratio); } self.widthratio = self.largewidth / self.nzwidth; self.heightratio = self.largeheight / self.nzheight; if(self.options.zoomtype != "lens") { //possibly dont need to keep recalcalculating //if the lens is heigher than the image, then set lens size to image size if(self.nzheight < self.options.zoomwindowwidth/self.widthratio){ lensheight = self.nzheight; } else{ lensheight = string((self.options.zoomwindowheight/self.heightratio)) } if(self.nzwidth < self.options.zoomwindowheight/self.heightratio){ lenswidth = self.nzwidth; } else{ lenswidth = string((self.options.zoomwindowwidth/self.widthratio)); } self.zoomlens.css('width', lenswidth); self.zoomlens.css('height', lensheight); if(self.options.tint){ self.zoomtintimage.css('width', self.nzwidth); self.zoomtintimage.css('height', self.nzheight); } } if(self.options.zoomtype == "lens") { self.zoomlens.css({ width: string(self.options.lenssize) + 'px', height: string(self.options.lenssize) + 'px' }) } //end responsive image change } } //container fix self.zoomcontainer.css({ top: self.nzoffset.top}); self.zoomcontainer.css({ left: self.nzoffset.left}); self.mouseleft = parseint(e.pagex - self.nzoffset.left); self.mousetop = parseint(e.pagey - self.nzoffset.top); //calculate the location of the lens //calculate the bound regions - but only if zoom window if(self.options.zoomtype == "window") { self.etoppos = (self.mousetop < (self.zoomlens.height()/2)); self.eboppos = (self.mousetop > self.nzheight - (self.zoomlens.height()/2)-(self.options.lensbordersize*2)); self.eloppos = (self.mouseleft < 0+((self.zoomlens.width()/2))); self.eroppos = (self.mouseleft > (self.nzwidth - (self.zoomlens.width()/2)-(self.options.lensbordersize*2))); } //calculate the bound regions - but only for inner zoom if(self.options.zoomtype == "inner"){ self.etoppos = (self.mousetop < ((self.nzheight/2)/self.heightratio) ); self.eboppos = (self.mousetop > (self.nzheight - ((self.nzheight/2)/self.heightratio))); self.eloppos = (self.mouseleft < 0+(((self.nzwidth/2)/self.widthratio))); self.eroppos = (self.mouseleft > (self.nzwidth - (self.nzwidth/2)/self.widthratio-(self.options.lensbordersize*2))); } // if the mouse position of the slider is one of the outerbounds, then hide window and lens if (self.mouseleft < 0 || self.mousetop < 0 || self.mouseleft > self.nzwidth || self.mousetop > self.nzheight ) { self.setelements("hide"); return; } //else continue with operations else { //lens options if(self.options.showlens) { // self.showhidelens("show"); //set background position of lens self.lensleftpos = string(math.floor(self.mouseleft - self.zoomlens.width() / 2)); self.lenstoppos = string(math.floor(self.mousetop - self.zoomlens.height() / 2)); } //adjust the background position if the mouse is in one of the outer regions //top region if(self.etoppos){ self.lenstoppos = 0; } //left region if(self.eloppos){ self.windowleftpos = 0; self.lensleftpos = 0; self.tintpos=0; } //set bottom and right region for window mode if(self.options.zoomtype == "window") { if(self.eboppos){ self.lenstoppos = math.max( (self.nzheight)-self.zoomlens.height()-(self.options.lensbordersize*2), 0 ); } if(self.eroppos){ self.lensleftpos = (self.nzwidth-(self.zoomlens.width())-(self.options.lensbordersize*2)); } } //set bottom and right region for inner mode if(self.options.zoomtype == "inner") { if(self.eboppos){ self.lenstoppos = math.max( ((self.nzheight)-(self.options.lensbordersize*2)), 0 ); } if(self.eroppos){ self.lensleftpos = (self.nzwidth-(self.nzwidth)-(self.options.lensbordersize*2)); } } //if lens zoom if(self.options.zoomtype == "lens") { self.windowleftpos = string(((e.pagex - self.nzoffset.left) * self.widthratio - self.zoomlens.width() / 2) * (-1)); self.windowtoppos = string(((e.pagey - self.nzoffset.top) * self.heightratio - self.zoomlens.height() / 2) * (-1)); self.zoomlens.css({ backgroundposition: self.windowleftpos + 'px ' + self.windowtoppos + 'px' }); if(self.changebgsize){ if(self.nzheight>self.nzwidth){ if(self.options.zoomtype == "lens"){ self.zoomlens.css({ "background-size": self.largewidth/self.newvalueheight + 'px ' + self.largeheight/self.newvalueheight + 'px' }); } self.zoomwindow.css({ "background-size": self.largewidth/self.newvalueheight + 'px ' + self.largeheight/self.newvalueheight + 'px' }); } else{ if(self.options.zoomtype == "lens"){ self.zoomlens.css({ "background-size": self.largewidth/self.newvaluewidth + 'px ' + self.largeheight/self.newvaluewidth + 'px' }); } self.zoomwindow.css({ "background-size": self.largewidth/self.newvaluewidth + 'px ' + self.largeheight/self.newvaluewidth + 'px' }); } self.changebgsize = false; } self.setwindowpostition(e); } //if tint zoom if(self.options.tint && self.options.zoomtype != "inner") { self.settintposition(e); } //set the css background position if(self.options.zoomtype == "window") { self.setwindowpostition(e); } if(self.options.zoomtype == "inner") { self.setwindowpostition(e); } if(self.options.showlens) { if(self.fullwidth && self.options.zoomtype != "lens"){ self.lensleftpos = 0; } self.zoomlens.css({ left: self.lensleftpos + 'px', top: self.lenstoppos + 'px' }) } } //end else }, showhidewindow: function(change) { var self = this; if(change == "show"){ if(!self.iswindowactive){ if(self.options.zoomwindowfadein){ self.zoomwindow.stop(true, true, false).fadein(self.options.zoomwindowfadein); } else{self.zoomwindow.show();} self.iswindowactive = true; } } if(change == "hide"){ if(self.iswindowactive){ if(self.options.zoomwindowfadeout){ self.zoomwindow.stop(true, true).fadeout(self.options.zoomwindowfadeout, function () { if (self.loop) { //stop moving the zoom window when zoom window is faded out clearinterval(self.loop); self.loop = false; } }); } else{self.zoomwindow.hide();} self.iswindowactive = false; } } }, showhidelens: function(change) { var self = this; if(change == "show"){ if(!self.islensactive){ if(self.options.lensfadein){ self.zoomlens.stop(true, true, false).fadein(self.options.lensfadein); } else{self.zoomlens.show();} self.islensactive = true; } } if(change == "hide"){ if(self.islensactive){ if(self.options.lensfadeout){ self.zoomlens.stop(true, true).fadeout(self.options.lensfadeout); } else{self.zoomlens.hide();} self.islensactive = false; } } }, showhidetint: function(change) { var self = this; if(change == "show"){ if(!self.istintactive){ if(self.options.zoomtintfadein){ self.zoomtint.css({opacity:self.options.tintopacity}).animate().stop(true, true).fadein("slow"); } else{ self.zoomtint.css({opacity:self.options.tintopacity}).animate(); self.zoomtint.show(); } self.istintactive = true; } } if(change == "hide"){ if(self.istintactive){ if(self.options.zoomtintfadeout){ self.zoomtint.stop(true, true).fadeout(self.options.zoomtintfadeout); } else{self.zoomtint.hide();} self.istintactive = false; } } }, setlenspostition: function( e ) { }, setwindowpostition: function( e ) { //return obj.slice( 0, count ); var self = this; if(!isnan(self.options.zoomwindowposition)){ switch (self.options.zoomwindowposition) { case 1: //done self.windowoffsettop = (self.options.zoomwindowoffety);//done - 1 self.windowoffsetleft =(+self.nzwidth); //done 1, 2, 3, 4, 16 break; case 2: if(self.options.zoomwindowheight > self.nzheight){ //positive margin self.windowoffsettop = ((self.options.zoomwindowheight/2)-(self.nzheight/2))*(-1); self.windowoffsetleft =(self.nzwidth); //done 1, 2, 3, 4, 16 } else{ //negative margin } break; case 3: //done self.windowoffsettop = (self.nzheight - self.zoomwindow.height() - (self.options.bordersize*2)); //done 3,9 self.windowoffsetleft =(self.nzwidth); //done 1, 2, 3, 4, 16 break; case 4: //done self.windowoffsettop = (self.nzheight); //done - 4,5,6,7,8 self.windowoffsetleft =(self.nzwidth); //done 1, 2, 3, 4, 16 break; case 5: //done self.windowoffsettop = (self.nzheight); //done - 4,5,6,7,8 self.windowoffsetleft =(self.nzwidth-self.zoomwindow.width()-(self.options.bordersize*2)); //done - 5,15 break; case 6: if(self.options.zoomwindowheight > self.nzheight){ //positive margin self.windowoffsettop = (self.nzheight); //done - 4,5,6,7,8 self.windowoffsetleft =((self.options.zoomwindowwidth/2)-(self.nzwidth/2)+(self.options.bordersize*2))*(-1); } else{ //negative margin } break; case 7: //done self.windowoffsettop = (self.nzheight); //done - 4,5,6,7,8 self.windowoffsetleft = 0; //done 7, 13 break; case 8: //done self.windowoffsettop = (self.nzheight); //done - 4,5,6,7,8 self.windowoffsetleft =(self.zoomwindow.width()+(self.options.bordersize*2) )* (-1); //done 8,9,10,11,12 break; case 9: //done self.windowoffsettop = (self.nzheight - self.zoomwindow.height() - (self.options.bordersize*2)); //done 3,9 self.windowoffsetleft =(self.zoomwindow.width()+(self.options.bordersize*2) )* (-1); //done 8,9,10,11,12 break; case 10: if(self.options.zoomwindowheight > self.nzheight){ //positive margin self.windowoffsettop = ((self.options.zoomwindowheight/2)-(self.nzheight/2))*(-1); self.windowoffsetleft =(self.zoomwindow.width()+(self.options.bordersize*2) )* (-1); //done 8,9,10,11,12 } else{ //negative margin } break; case 11: self.windowoffsettop = (self.options.zoomwindowoffety); self.windowoffsetleft =(self.zoomwindow.width()+(self.options.bordersize*2) )* (-1); //done 8,9,10,11,12 break; case 12: //done self.windowoffsettop = (self.zoomwindow.height()+(self.options.bordersize*2))*(-1); //done 12,13,14,15,16 self.windowoffsetleft =(self.zoomwindow.width()+(self.options.bordersize*2) )* (-1); //done 8,9,10,11,12 break; case 13: //done self.windowoffsettop = (self.zoomwindow.height()+(self.options.bordersize*2))*(-1); //done 12,13,14,15,16 self.windowoffsetleft =(0); //done 7, 13 break; case 14: if(self.options.zoomwindowheight > self.nzheight){ //positive margin self.windowoffsettop = (self.zoomwindow.height()+(self.options.bordersize*2))*(-1); //done 12,13,14,15,16 self.windowoffsetleft =((self.options.zoomwindowwidth/2)-(self.nzwidth/2)+(self.options.bordersize*2))*(-1); } else{ //negative margin } break; case 15://done self.windowoffsettop = (self.zoomwindow.height()+(self.options.bordersize*2))*(-1); //done 12,13,14,15,16 self.windowoffsetleft =(self.nzwidth-self.zoomwindow.width()-(self.options.bordersize*2)); //done - 5,15 break; case 16: //done self.windowoffsettop = (self.zoomwindow.height()+(self.options.bordersize*2))*(-1); //done 12,13,14,15,16 self.windowoffsetleft =(self.nzwidth); //done 1, 2, 3, 4, 16 break; default: //done self.windowoffsettop = (self.options.zoomwindowoffety);//done - 1 self.windowoffsetleft =(self.nzwidth); //done 1, 2, 3, 4, 16 } } //end isnan else{ //we can position in a class - assume that any string passed is self.externalcontainer = $('#'+self.options.zoomwindowposition); self.externalcontainerwidth = self.externalcontainer.width(); self.externalcontainerheight = self.externalcontainer.height(); self.externalcontaineroffset = self.externalcontainer.offset(); self.windowoffsettop = self.externalcontaineroffset.top;//done - 1 self.windowoffsetleft =self.externalcontaineroffset.left; //done 1, 2, 3, 4, 16 } self.iswindowset = true; self.windowoffsettop = self.windowoffsettop + self.options.zoomwindowoffety; self.windowoffsetleft = self.windowoffsetleft + self.options.zoomwindowoffetx; self.zoomwindow.css({ top: self.windowoffsettop}); self.zoomwindow.css({ left: self.windowoffsetleft}); if(self.options.zoomtype == "inner") { self.zoomwindow.css({ top: 0}); self.zoomwindow.css({ left: 0}); } self.windowleftpos = string(((e.pagex - self.nzoffset.left) * self.widthratio - self.zoomwindow.width() / 2) * (-1)); self.windowtoppos = string(((e.pagey - self.nzoffset.top) * self.heightratio - self.zoomwindow.height() / 2) * (-1)); if(self.etoppos){self.windowtoppos = 0;} if(self.eloppos){self.windowleftpos = 0;} if(self.eboppos){self.windowtoppos = (self.largeheight/self.currentzoomlevel-self.zoomwindow.height())*(-1); } if(self.eroppos){self.windowleftpos = ((self.largewidth/self.currentzoomlevel-self.zoomwindow.width())*(-1));} //stops micro movements if(self.fullheight){ self.windowtoppos = 0; } if(self.fullwidth){ self.windowleftpos = 0; } //set the css background position if(self.options.zoomtype == "window" || self.options.zoomtype == "inner") { if(self.zoomlock == 1){ //overrides for images not zoomable if(self.widthratio <= 1){ self.windowleftpos = 0; } if(self.heightratio <= 1){ self.windowtoppos = 0; } } // adjust images less than the window height if (self.options.zoomtype == "window") { if (self.largeheight < self.options.zoomwindowheight) { self.windowtoppos = 0; } if (self.largewidth < self.options.zoomwindowwidth) { self.windowleftpos = 0; } } //set the zoomwindow background position if (self.options.easing){ // if(self.changezoom){ // clearinterval(self.loop); // self.changezoom = false; // self.loop = false; // } //set the pos to 0 if not set if(!self.xp){self.xp = 0;} if(!self.yp){self.yp = 0;} //if loop not already started, then run it if (!self.loop){ self.loop = setinterval(function(){ //using zeno's paradox self.xp += (self.windowleftpos - self.xp) / self.options.easingamount; self.yp += (self.windowtoppos - self.yp) / self.options.easingamount; if(self.scrollinglock){ clearinterval(self.loop); self.xp = self.windowleftpos; self.yp = self.windowtoppos self.xp = ((e.pagex - self.nzoffset.left) * self.widthratio - self.zoomwindow.width() / 2) * (-1); self.yp = (((e.pagey - self.nzoffset.top) * self.heightratio - self.zoomwindow.height() / 2) * (-1)); if(self.changebgsize){ if(self.nzheight>self.nzwidth){ if(self.options.zoomtype == "lens"){ self.zoomlens.css({ "background-size": self.largewidth/self.newvalueheight + 'px ' + self.largeheight/self.newvalueheight + 'px' }); } self.zoomwindow.css({ "background-size": self.largewidth/self.newvalueheight + 'px ' + self.largeheight/self.newvalueheight + 'px' }); } else{ if(self.options.zoomtype != "lens"){ self.zoomlens.css({ "background-size": self.largewidth/self.newvaluewidth + 'px ' + self.largeheight/self.newvalueheight + 'px' }); } self.zoomwindow.css({ "background-size": self.largewidth/self.newvaluewidth + 'px ' + self.largeheight/self.newvaluewidth + 'px' }); } /* if(!self.bgxp){self.bgxp = self.largewidth/self.newvalue;} if(!self.bgyp){self.bgyp = self.largeheight/self.newvalue ;} if (!self.bgloop){ self.bgloop = setinterval(function(){ self.bgxp += (self.largewidth/self.newvalue - self.bgxp) / self.options.easingamount; self.bgyp += (self.largeheight/self.newvalue - self.bgyp) / self.options.easingamount; self.zoomwindow.css({ "background-size": self.bgxp + 'px ' + self.bgyp + 'px' }); }, 16); } */ self.changebgsize = false; } self.zoomwindow.css({ backgroundposition: self.windowleftpos + 'px ' + self.windowtoppos + 'px' }); self.scrollinglock = false; self.loop = false; } else if (math.round(math.abs(self.xp - self.windowleftpos) + math.abs(self.yp - self.windowtoppos)) < 1) { //stops micro movements clearinterval(self.loop); self.zoomwindow.css({ backgroundposition: self.windowleftpos + 'px ' + self.windowtoppos + 'px' }); self.loop = false; } else{ if(self.changebgsize){ if(self.nzheight>self.nzwidth){ if(self.options.zoomtype == "lens"){ self.zoomlens.css({ "background-size": self.largewidth/self.newvalueheight + 'px ' + self.largeheight/self.newvalueheight + 'px' }); } self.zoomwindow.css({ "background-size": self.largewidth/self.newvalueheight + 'px ' + self.largeheight/self.newvalueheight + 'px' }); } else{ if(self.options.zoomtype != "lens"){ self.zoomlens.css({ "background-size": self.largewidth/self.newvaluewidth + 'px ' + self.largeheight/self.newvaluewidth + 'px' }); } self.zoomwindow.css({ "background-size": self.largewidth/self.newvaluewidth + 'px ' + self.largeheight/self.newvaluewidth + 'px' }); } self.changebgsize = false; } self.zoomwindow.css({ backgroundposition: self.xp + 'px ' + self.yp + 'px' }); } }, 16); } } else{ if(self.changebgsize){ if(self.nzheight>self.nzwidth){ if(self.options.zoomtype == "lens"){ self.zoomlens.css({ "background-size": self.largewidth/self.newvalueheight + 'px ' + self.largeheight/self.newvalueheight + 'px' }); } self.zoomwindow.css({ "background-size": self.largewidth/self.newvalueheight + 'px ' + self.largeheight/self.newvalueheight + 'px' }); } else{ if(self.options.zoomtype == "lens"){ self.zoomlens.css({ "background-size": self.largewidth/self.newvaluewidth + 'px ' + self.largeheight/self.newvaluewidth + 'px' }); } if((self.largeheight/self.newvaluewidth) < self.options.zoomwindowheight){ self.zoomwindow.css({ "background-size": self.largewidth/self.newvaluewidth + 'px ' + self.largeheight/self.newvaluewidth + 'px' }); } else{ self.zoomwindow.css({ "background-size": self.largewidth/self.newvalueheight + 'px ' + self.largeheight/self.newvalueheight + 'px' }); } } self.changebgsize = false; } self.zoomwindow.css({ backgroundposition: self.windowleftpos + 'px ' + self.windowtoppos + 'px' }); } } }, settintposition: function(e){ var self = this; self.nzoffset = self.$elem.offset(); self.tintpos = string(((e.pagex - self.nzoffset.left)-(self.zoomlens.width() / 2)) * (-1)); self.tintposy = string(((e.pagey - self.nzoffset.top) - self.zoomlens.height() / 2) * (-1)); if(self.etoppos){ self.tintposy = 0; } if(self.eloppos){ self.tintpos=0; } if(self.eboppos){ self.tintposy = (self.nzheight-self.zoomlens.height()-(self.options.lensbordersize*2))*(-1); } if(self.eroppos){ self.tintpos = ((self.nzwidth-self.zoomlens.width()-(self.options.lensbordersize*2))*(-1)); } if(self.options.tint) { //stops micro movements if(self.fullheight){ self.tintposy = 0; } if(self.fullwidth){ self.tintpos = 0; } self.zoomtintimage.css({'left': self.tintpos+'px'}); self.zoomtintimage.css({'top': self.tintposy+'px'}); } }, swaptheimage: function(smallimage, largeimage){ var self = this; var newimg = new image(); if(self.options.loadingicon){ self.spinner = $('
'); self.$elem.after(self.spinner); } self.options.onimageswap(self.$elem); newimg.onload = function() { self.largewidth = newimg.width; self.largeheight = newimg.height; self.zoomimage = largeimage; self.zoomwindow.css({ "background-size": self.largewidth + 'px ' + self.largeheight + 'px' }); self.swapaction(smallimage, largeimage); return; } newimg.src = largeimage; // this must be done after setting onload }, swapaction: function(smallimage, largeimage){ var self = this; var newimg2 = new image(); newimg2.onload = function() { //re-calculate values self.nzheight = newimg2.height; self.nzwidth = newimg2.width; self.options.onimageswapcomplete(self.$elem); self.donecallback(); return; } newimg2.src = smallimage; //reset the zoomlevel to that initially set in options self.currentzoomlevel = self.options.zoomlevel; self.options.maxzoomlevel = false; //swaps the main image //self.$elem.attr("src",smallimage); //swaps the zoom image if(self.options.zoomtype == "lens") { self.zoomlens.css({ backgroundimage: "url('" + largeimage + "')" }); } if(self.options.zoomtype == "window") { self.zoomwindow.css({ backgroundimage: "url('" + largeimage + "')" }); } if(self.options.zoomtype == "inner") { self.zoomwindow.css({ backgroundimage: "url('" + largeimage + "')" }); } self.currentimage = largeimage; if(self.options.imagecrossfade){ var oldimg = self.$elem; var newimg = oldimg.clone(); self.$elem.attr("src",smallimage) self.$elem.after(newimg); newimg.stop(true).fadeout(self.options.imagecrossfade, function() { $(this).remove(); }); // if(self.options.zoomtype == "inner"){ //remove any attributes on the cloned image so we can resize later self.$elem.width("auto").removeattr("width"); self.$elem.height("auto").removeattr("height"); // } oldimg.fadein(self.options.imagecrossfade); if(self.options.tint && self.options.zoomtype != "inner") { var oldimgtint = self.zoomtintimage; var newimgtint = oldimgtint.clone(); self.zoomtintimage.attr("src",largeimage) self.zoomtintimage.after(newimgtint); newimgtint.stop(true).fadeout(self.options.imagecrossfade, function() { $(this).remove(); }); oldimgtint.fadein(self.options.imagecrossfade); //self.zoomtintimage.attr("width",elem.data("image")); //resize the tint window self.zoomtint.css({ height: self.$elem.height()}); self.zoomtint.css({ width: self.$elem.width()}); } self.zoomcontainer.css("height", self.$elem.height()); self.zoomcontainer.css("width", self.$elem.width()); if(self.options.zoomtype == "inner"){ if(!self.options.constraintype){ self.zoomwrap.parent().css("height", self.$elem.height()); self.zoomwrap.parent().css("width", self.$elem.width()); self.zoomwindow.css("height", self.$elem.height()); self.zoomwindow.css("width", self.$elem.width()); } } if(self.options.imagecrossfade){ self.zoomwrap.css("height", self.$elem.height()); self.zoomwrap.css("width", self.$elem.width()); } } else{ self.$elem.attr("src",smallimage); if(self.options.tint) { self.zoomtintimage.attr("src",largeimage); //self.zoomtintimage.attr("width",elem.data("image")); self.zoomtintimage.attr("height",self.$elem.height()); //self.zoomtintimage.attr('src') = elem.data("image"); self.zoomtintimage.css({ height: self.$elem.height()}); self.zoomtint.css({ height: self.$elem.height()}); } self.zoomcontainer.css("height", self.$elem.height()); self.zoomcontainer.css("width", self.$elem.width()); if(self.options.imagecrossfade){ self.zoomwrap.css("height", self.$elem.height()); self.zoomwrap.css("width", self.$elem.width()); } } if(self.options.constraintype){ //this will contrain the image proportions if(self.options.constraintype == "height"){ self.zoomcontainer.css("height", self.options.constrainsize); self.zoomcontainer.css("width", "auto"); if(self.options.imagecrossfade){ self.zoomwrap.css("height", self.options.constrainsize); self.zoomwrap.css("width", "auto"); self.constwidth = self.zoomwrap.width(); } else{ self.$elem.css("height", self.options.constrainsize); self.$elem.css("width", "auto"); self.constwidth = self.$elem.width(); } if(self.options.zoomtype == "inner"){ self.zoomwrap.parent().css("height", self.options.constrainsize); self.zoomwrap.parent().css("width", self.constwidth); self.zoomwindow.css("height", self.options.constrainsize); self.zoomwindow.css("width", self.constwidth); } if(self.options.tint){ self.tintcontainer.css("height", self.options.constrainsize); self.tintcontainer.css("width", self.constwidth); self.zoomtint.css("height", self.options.constrainsize); self.zoomtint.css("width", self.constwidth); self.zoomtintimage.css("height", self.options.constrainsize); self.zoomtintimage.css("width", self.constwidth); } } if(self.options.constraintype == "width"){ self.zoomcontainer.css("height", "auto"); self.zoomcontainer.css("width", self.options.constrainsize); if(self.options.imagecrossfade){ self.zoomwrap.css("height", "auto"); self.zoomwrap.css("width", self.options.constrainsize); self.constheight = self.zoomwrap.height(); } else{ self.$elem.css("height", "auto"); self.$elem.css("width", self.options.constrainsize); self.constheight = self.$elem.height(); } if(self.options.zoomtype == "inner"){ self.zoomwrap.parent().css("height", self.constheight); self.zoomwrap.parent().css("width", self.options.constrainsize); self.zoomwindow.css("height", self.constheight); self.zoomwindow.css("width", self.options.constrainsize); } if(self.options.tint){ self.tintcontainer.css("height", self.constheight); self.tintcontainer.css("width", self.options.constrainsize); self.zoomtint.css("height", self.constheight); self.zoomtint.css("width", self.options.constrainsize); self.zoomtintimage.css("height", self.constheight); self.zoomtintimage.css("width", self.options.constrainsize); } } } }, donecallback: function(){ var self = this; if(self.options.loadingicon){ self.spinner.hide(); } self.nzoffset = self.$elem.offset(); self.nzwidth = self.$elem.width(); self.nzheight = self.$elem.height(); // reset the zoomlevel back to default self.currentzoomlevel = self.options.zoomlevel; //ratio of the large to small image self.widthratio = self.largewidth / self.nzwidth; self.heightratio = self.largeheight / self.nzheight; //need to add the lens size for round // adjust images less than the window height if(self.options.zoomtype == "window") { if(self.nzheight < self.options.zoomwindowwidth/self.widthratio){ lensheight = self.nzheight; } else{ lensheight = string((self.options.zoomwindowheight/self.heightratio)) } if(self.options.zoomwindowwidth < self.options.zoomwindowwidth){ lenswidth = self.nzwidth; } else{ lenswidth = (self.options.zoomwindowwidth/self.widthratio); } if(self.zoomlens){ self.zoomlens.css('width', lenswidth); self.zoomlens.css('height', lensheight); } } }, getcurrentimage: function(){ var self = this; return self.zoomimage; }, getgallerylist: function(){ var self = this; //loop through the gallery options and set them in list for fancybox self.gallerylist = []; if (self.options.gallery){ $('#'+self.options.gallery + ' a').each(function() { var img_src = ''; if($(this).data("zoom-image")){ img_src = $(this).data("zoom-image"); } else if($(this).data("image")){ img_src = $(this).data("image"); } //put the current image at the start if(img_src == self.zoomimage){ self.gallerylist.unshift({ href: ''+img_src+'', title: $(this).find('img').attr("title") }); } else{ self.gallerylist.push({ href: ''+img_src+'', title: $(this).find('img').attr("title") }); } }); } //if no gallery - return current image else{ self.gallerylist.push({ href: ''+self.zoomimage+'', title: $(this).find('img').attr("title") }); } return self.gallerylist; }, changezoomlevel: function(value){ var self = this; //flag a zoom, so can adjust the easing during setposition self.scrollinglock = true; //round to two decimal places self.newvalue = parsefloat(value).tofixed(2); newvalue = parsefloat(value).tofixed(2); //maxwidth & maxheight of the image maxheightnewvalue = self.largeheight/((self.options.zoomwindowheight / self.nzheight) * self.nzheight); maxwidthtnewvalue = self.largewidth/((self.options.zoomwindowwidth / self.nzwidth) * self.nzwidth); //calculate new heightratio if(self.options.zoomtype != "inner") { if(maxheightnewvalue <= newvalue){ self.heightratio = (self.largeheight/maxheightnewvalue) / self.nzheight; self.newvalueheight = maxheightnewvalue; self.fullheight = true; } else{ self.heightratio = (self.largeheight/newvalue) / self.nzheight; self.newvalueheight = newvalue; self.fullheight = false; } // calculate new width ratio if(maxwidthtnewvalue <= newvalue){ self.widthratio = (self.largewidth/maxwidthtnewvalue) / self.nzwidth; self.newvaluewidth = maxwidthtnewvalue; self.fullwidth = true; } else{ self.widthratio = (self.largewidth/newvalue) / self.nzwidth; self.newvaluewidth = newvalue; self.fullwidth = false; } if(self.options.zoomtype == "lens"){ if(maxheightnewvalue <= newvalue){ self.fullwidth = true; self.newvaluewidth = maxheightnewvalue; } else{ self.widthratio = (self.largewidth/newvalue) / self.nzwidth; self.newvaluewidth = newvalue; self.fullwidth = false; }} } if(self.options.zoomtype == "inner") { maxheightnewvalue = parsefloat(self.largeheight/self.nzheight).tofixed(2); maxwidthtnewvalue = parsefloat(self.largewidth/self.nzwidth).tofixed(2); if(newvalue > maxheightnewvalue){ newvalue = maxheightnewvalue; } if(newvalue > maxwidthtnewvalue){ newvalue = maxwidthtnewvalue; } if(maxheightnewvalue <= newvalue){ self.heightratio = (self.largeheight/newvalue) / self.nzheight; if(newvalue > maxheightnewvalue){ self.newvalueheight = maxheightnewvalue; }else{ self.newvalueheight = newvalue; } self.fullheight = true; } else{ self.heightratio = (self.largeheight/newvalue) / self.nzheight; if(newvalue > maxheightnewvalue){ self.newvalueheight = maxheightnewvalue; }else{ self.newvalueheight = newvalue; } self.fullheight = false; } if(maxwidthtnewvalue <= newvalue){ self.widthratio = (self.largewidth/newvalue) / self.nzwidth; if(newvalue > maxwidthtnewvalue){ self.newvaluewidth = maxwidthtnewvalue; }else{ self.newvaluewidth = newvalue; } self.fullwidth = true; } else{ self.widthratio = (self.largewidth/newvalue) / self.nzwidth; self.newvaluewidth = newvalue; self.fullwidth = false; } } //end inner scrcontinue = false; if(self.options.zoomtype == "inner"){ if(self.nzwidth >= self.nzheight){ if( self.newvaluewidth <= maxwidthtnewvalue){ scrcontinue = true; } else{ scrcontinue = false; self.fullheight = true; self.fullwidth = true; } } if(self.nzheight > self.nzwidth){ if( self.newvaluewidth <= maxwidthtnewvalue){ scrcontinue = true; } else{ scrcontinue = false; self.fullheight = true; self.fullwidth = true; } } } if(self.options.zoomtype != "inner"){ scrcontinue = true; } if(scrcontinue){ self.zoomlock = 0; self.changezoom = true; //if lens height is less than image height if(((self.options.zoomwindowheight)/self.heightratio) <= self.nzheight){ self.currentzoomlevel = self.newvalueheight; if(self.options.zoomtype != "lens" && self.options.zoomtype != "inner") { self.changebgsize = true; self.zoomlens.css({height: string((self.options.zoomwindowheight)/self.heightratio) + 'px' }) } if(self.options.zoomtype == "lens" || self.options.zoomtype == "inner") { self.changebgsize = true; } } if((self.options.zoomwindowwidth/self.widthratio) <= self.nzwidth){ if(self.options.zoomtype != "inner"){ if(self.newvaluewidth > self.newvalueheight) { self.currentzoomlevel = self.newvaluewidth; } } if(self.options.zoomtype != "lens" && self.options.zoomtype != "inner") { self.changebgsize = true; self.zoomlens.css({width: string((self.options.zoomwindowwidth)/self.widthratio) + 'px' }) } if(self.options.zoomtype == "lens" || self.options.zoomtype == "inner") { self.changebgsize = true; } } if(self.options.zoomtype == "inner"){ self.changebgsize = true; if(self.nzwidth > self.nzheight){ self.currentzoomlevel = self.newvaluewidth; } if(self.nzheight > self.nzwidth){ self.currentzoomlevel = self.newvaluewidth; } } } //under //sets the boundry change, called in setwindowpos self.setposition(self.currentloc); // }, closeall: function(){ if(self.zoomwindow){self.zoomwindow.hide();} if(self.zoomlens){self.zoomlens.hide();} if(self.zoomtint){self.zoomtint.hide();} }, changestate: function(value){ var self = this; if(value == 'enable'){self.options.zoomenabled = true;} if(value == 'disable'){self.options.zoomenabled = false;} } }; $.fn.elevatezoom = function( options ) { return this.each(function() { var elevate = object.create( elevatezoom ); elevate.init( options, this ); $.data( this, 'elevatezoom', elevate ); }); }; $.fn.elevatezoom.options = { zoomactivation: "hover", // can also be click (placeholder for next version) zoomenabled: true, //false disables zoomwindow from showing preloading: 1, //by default, load all the images, if 0, then only load images after activated (placeholder for next version) zoomlevel: 1, //default zoom level of image scrollzoom: false, //allow zoom on mousewheel, true to activate scrollzoomincrement: 0.1, //steps of the scrollzoom minzoomlevel: false, maxzoomlevel: false, easing: false, easingamount: 12, lenssize: 200, zoomwindowwidth: 400, zoomwindowheight: 400, zoomwindowoffetx: 0, zoomwindowoffety: 0, zoomwindowposition: 1, zoomwindowbgcolour: "#fff", lensfadein: false, lensfadeout: false, debug: false, zoomwindowfadein: false, zoomwindowfadeout: false, zoomwindowalwaysshow: false, zoomtintfadein: false, zoomtintfadeout: false, bordersize: 4, showlens: true, bordercolour: "#888", lensbordersize: 1, lensbordercolour: "#000", lensshape: "square", //can be "round" zoomtype: "window", //window is default, also "lens" available - containlenszoom: false, lenscolour: "white", //colour of the lens background lensopacity: 0.4, //opacity of the lens lenszoom: false, tint: false, //enable the tinting tintcolour: "#333", //default tint color, can be anything, red, #ccc, rgb(0,0,0) tintopacity: 0.4, //opacity of the tint gallery: false, galleryactiveclass: "zoomgalleryactive", imagecrossfade: false, constraintype: false, //width or height constrainsize: false, //in pixels the dimensions you want to constrain on loadingicon: false, //http://www.example.com/spinner.gif cursor:"default", // user should set to what they want the cursor as, if they have set a click function responsive:true, oncomplete: $.noop, ondestroy: function() {}, onzoomedimageloaded: function() {}, onimageswap: $.noop, onimageswapcomplete: $.noop }; })( jquery, window, document );