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..7ba6512
--- a/jquery.elevatezoom.js
+++ b/jquery.elevatezoom.js
@@ -1,1777 +1,1848 @@
-/*
- * 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.setElements("show");
+ self.$elem.css("opacity","0");
+ }
+ }).mouseleave(function() {
+ if (!self.scrollLock) {
+ self.setElements("hide");
+ 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);