From 4659659c28ddd41bc88410631c5816eef8c258e5 Mon Sep 17 00:00:00 2001 From: Felix Langenegger Date: Tue, 29 Jul 2014 12:49:28 +0200 Subject: [PATCH 1/2] Fixed JavaScript Formating --- .gitignore | 1 + jquery.elevatezoom.js | 3623 +++++++++++++++++++++-------------------- 2 files changed, 1847 insertions(+), 1777 deletions(-) create mode 100644 .gitignore mode change 100755 => 100644 jquery.elevatezoom.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/jquery.elevatezoom.js b/jquery.elevatezoom.js old mode 100755 new mode 100644 index 6d1f3ae..8c820af --- a/jquery.elevatezoom.js +++ b/jquery.elevatezoom.js @@ -1,1777 +1,1846 @@ -/* - * 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;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"); - } - }); - //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.options.zoomWindowWidth < self.options.zoomWindowWidth){ - lensWidth = self.nzWidth; - } - else{ - lensWidth = (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(self.mouseLeft - self.zoomLens.width() / 2); - self.lensTopPos = String(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); - } - 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.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(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.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, - onZoomedImageLoaded: function() {}, - onImageSwap: $.noop, - onImageSwapComplete: $.noop - }; - -})( jQuery, window, document ); \ No newline at end of file +/* + * 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 and title 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;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.mouseenter(function() { + if (self.overWindow == false) { + self.$elem.css("opacity","0"); + } + }).mouseleave(function() { + if (!self.scrollLock) { + self.$elem.css("opacity","1"); + } + }); + //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.options.zoomWindowWidth < self.options.zoomWindowWidth) { + lensWidth = self.nzWidth; + } else { + lensWidth = (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 + //Ccalculate 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(self.mouseLeft - self.zoomLens.width() / 2); + self.lensTopPos = String(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); + } 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.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 (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.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); + //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: true, + 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, + onZoomedImageLoaded: function() {}, + onImageSwap: $.noop, + onImageSwapComplete: $.noop + }; + +})(jQuery, window, document); From 4b2a93d9f8f61cf61d76257383ed7f2627da6730 Mon Sep 17 00:00:00 2001 From: Felix Langenegger Date: Tue, 29 Jul 2014 12:49:54 +0200 Subject: [PATCH 2/2] Fixed Transparent Image Bug Problem: If you are using the inner zoom mode and you want to zoom a transparent PNG image. The image is allways shown in the backgound of the zoomed image. Solution: Set the opacity of the source element to 0 while zooming. By the mouseleave callback set the opacity back to 1. --- jquery.elevatezoom.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/jquery.elevatezoom.js b/jquery.elevatezoom.js index 8c820af..7ba6512 100644 --- a/jquery.elevatezoom.js +++ b/jquery.elevatezoom.js @@ -483,10 +483,12 @@ if (typeof Object.create !== 'function') { // lensFadeOut: 500, zoomTintFadeIn self.zoomContainer.mouseenter(function() { if (self.overWindow == false) { + self.setElements("show"); self.$elem.css("opacity","0"); } }).mouseleave(function() { if (!self.scrollLock) { + self.setElements("hide"); self.$elem.css("opacity","1"); } });