// jscs:disable /* jshint -W071, -W074 */ // jscs:enable /* globals jQuery */ /* * jQuery ezPlus 1.2.5 * Demo's and documentation: * http://igorlino.github.io/elevatezoom-plus/ * * licensed under MIT license. * http://en.wikipedia.org/wiki/MIT_License * */ if (typeof Object.create !== 'function') { Object.create = function (obj) { function F() { } F.prototype = obj; return new F(); }; } (function ($, window, document) { var EZP = { init: function (options, elem) { var self = this; self.elem = elem; self.$elem = $(elem); self.options = $.extend({}, $.fn.ezPlus.options, self.responsiveConfig(options || {})); self.imageSrc = self.$elem.attr('data-'+self.options.attrImageZoomSrc) ? self.$elem.attr('data-'+self.options.attrImageZoomSrc) : self.$elem.attr('src'); if (!self.options.enabled) { return; } //TINT OVERRIDE SETTINGS if (self.options.tint) { self.options.lensColour = 'transparent'; //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; } // LENS OVERRIDE SETTINGS if (self.options.zoomType === 'lens') { self.options.zoomWindowWidth = 0; } //UUID WHEN MISSING IDENTIFIER if (self.options.zoomId === -1) { self.options.zoomId = generateUUID(); } //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 var galleryEvent = self.options.galleryEvent + '.ezpspace'; galleryEvent += self.options.touchEnabled ? ' touchend.ezpspace' : ''; self.$galleries = $(self.options.gallery ? ('#' + self.options.gallery) : self.options.gallerySelector); self.$galleries.on(galleryEvent, self.options.galleryItem, function (e) { //Set a class on the currently active gallery image if (self.options.galleryActiveClass) { $(self.options.galleryItem, self.$galleries).removeClass(self.options.galleryActiveClass); $(this).addClass(self.options.galleryActiveClass); } //stop any link on the a tag from working if (this.tagName === 'A') { e.preventDefault(); } //call the swap image function if ($(this).data(self.options.attrImageZoomSrc)) { self.zoomImagePre = $(this).data(self.options.attrImageZoomSrc); } else { self.zoomImagePre = $(this).data('image'); } self.swaptheimage($(this).data('image'), self.zoomImagePre); if (this.tagName === 'A') { return false; } }); function generateUUID() { var d = new Date().getTime(); var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (d + Math.random() * 16) % 16 | 0; // jshint ignore:line d = Math.floor(d / 16); // jshint ignore:line return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16); // jshint ignore:line }); return uuid; } }, refresh: function (length) { var self = this; setTimeout(function () { self.fetch(self.imageSrc, self.$elem, self.options.minZoomLevel); }, length || self.options.refresh); }, fetch: function (imgsrc, element, minZoom) { //get the image var self = this; var newImg = new Image(); newImg.onload = function () { //set the large image dimensions - used to calculte ratio's if (newImg.width / element.width() <= minZoom) { self.largeWidth = element.width() * minZoom; } else { self.largeWidth = newImg.width; } if (newImg.height / element.height() <= minZoom) { self.largeHeight = element.height() * minZoom; } else { 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); }; self.setImageSource(newImg, imgsrc); // this must be done AFTER setting onload return; }, setImageSource: function (image, src) { //sets an image's source. image.src = src; }, 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 Wrapper if (self.options.imageCrossfade) { var elementZoomWrapper = $('
') .css({ height: self.nzHeight, width: self.nzWidth }); if(self.$elem.parent().hasClass('zoomWrapper')){ self.$elem.unwrap(); } self.zoomWrap = self.$elem.wrap(elementZoomWrapper); 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.updateOffset(self); //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; function getWindowZoomStyle() { return { display: 'none', position: 'absolute', height: self.options.zoomWindowHeight, width: self.options.zoomWindowWidth, border: '' + self.options.borderSize + 'px solid ' + self.options.borderColour, backgroundSize: '' + (self.largeWidth / self.currentZoomLevel) + 'px ' + (self.largeHeight / self.currentZoomLevel) + 'px', backgroundPosition: '0px 0px', backgroundRepeat: 'no-repeat', backgroundColor: '' + self.options.zoomWindowBgColour, overflow: 'hidden', zIndex: 100 }; } //if window zoom if (self.options.zoomType === 'window') { self.zoomWindowStyle = getWindowZoomStyle(); } function getInnerZoomStyle() { //has a border been put on the image? Lets cater for this var borderWidth = self.$elem.css('border-left-width'); if (self.options.scrollZoom) self.zoomLens = $('
'); return { display: 'none', position: 'absolute', height: self.nzHeight, width: self.nzWidth, marginTop: borderWidth, marginLeft: borderWidth, border: '' + self.options.borderSize + 'px solid ' + self.options.borderColour, backgroundPosition: '0px 0px', backgroundRepeat: 'no-repeat', cursor: self.options.cursor, overflow: 'hidden', zIndex: self.options.zIndex }; } //if inner zoom if (self.options.zoomType === 'inner') { self.zoomWindowStyle = getInnerZoomStyle(); } function getWindowLensStyle() { // adjust images less than the window height if (self.nzHeight < self.options.zoomWindowHeight / self.heightRatio) { self.lensHeight = self.nzHeight; } else { self.lensHeight = self.options.zoomWindowHeight / self.heightRatio; } if (self.largeWidth < self.options.zoomWindowWidth) { self.lensWidth = self.nzWidth; } else { self.lensWidth = self.options.zoomWindowWidth / self.widthRatio; } return { display: 'none', position: 'absolute', height: self.lensHeight, width: self.lensWidth, border: '' + self.options.lensBorderSize + 'px' + ' solid ' + self.options.lensBorderColour, backgroundPosition: '0px 0px', backgroundRepeat: 'no-repeat', backgroundColor: self.options.lensColour, opacity: self.options.lensOpacity, cursor: self.options.cursor, zIndex: 999, overflow: 'hidden' }; } //lens style for window zoom if (self.options.zoomType === 'window') { self.lensStyle = getWindowLensStyle(); } //tint style self.tintStyle = { display: 'block', position: 'absolute', height: self.nzHeight, width: self.nzWidth, backgroundColor: self.options.tintColour, opacity: 0 }; //lens style for lens zoom with optional round for modern browsers self.lensRound = {}; if (self.options.zoomType === 'lens') { self.lensStyle = { display: 'none', position: 'absolute', float: 'left', height: self.options.lensSize, width: self.options.lensSize, border: '' + self.options.borderSize + 'px solid ' + self.options.borderColour, backgroundPosition: '0px 0px', backgroundRepeat: 'no-repeat', backgroundColor: self.options.lensColour, cursor: self.options.cursor }; } //does not round in all browsers if (self.options.lensShape === 'round') { self.lensRound = { borderRadius: self.options.lensSize / 2 + self.options.borderSize }; } //create the div's + "" //self.zoomContainer = $('
').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth}); self.zoomContainer = $('
'); self.zoomContainer.css({ position: 'absolute', top: self.nzOffset.top, left: self.nzOffset.left, height: self.nzHeight, width: self.nzWidth, zIndex: self.options.zIndex }); if (self.$elem.attr('id')) { self.zoomContainer.attr('id', self.$elem.attr('id') + '-' + self.options.container); } $('.' + self.options.container + '[uuid="' + self.options.zoomId + '"]').remove(); $(self.options.zoomContainerAppendTo).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 = $('
') .css($.extend({}, self.lensStyle, self.lensRound)) .appendTo(self.zoomContainer) .click(function () { self.$elem.trigger('click'); }); if (self.options.tint) { self.tintContainer = $('
'); self.zoomTint = $('
').css(self.tintStyle); 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 = $('') .css({ position: 'absolute', top: 0, left: 0, height: self.nzHeight, width: self.nzWidth, maxWidth: 'none' }) .appendTo(self.zoomLens) .click(function () { self.$elem.trigger('click'); }); } } //create zoom window var targetZoomContainer = isNaN(self.options.zoomWindowPosition) ? 'body' : self.zoomContainer; self.zoomWindow = $('
') .css($.extend({ zIndex: 999, top: self.windowOffsetTop, left: self.windowOffsetLeft, }, self.zoomWindowStyle)) .appendTo(targetZoomContainer).click(function () { self.$elem.trigger('click'); }); self.zoomWindowContainer = $('
') .css({ width: self.options.zoomWindowWidth }); self.zoomWindow.wrap(self.zoomWindowContainer); if (self.options.zoomType === 'lens') { self.zoomContainer.css('display', 'none'); 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----------------------------------*/ if (self.options.touchEnabled) { //touch events self.$elem.on('touchmove.ezpspace', function (e) { e.preventDefault(); var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; self.setPosition(touch); }); self.zoomContainer.on('touchmove.ezpspace', function (e) { self.setElements('show'); e.preventDefault(); var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; self.setPosition(touch); }); self.zoomContainer .add(self.$elem) .on('touchend.ezpspace', 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.on('touchmove.ezpspace', function (e) { e.preventDefault(); var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; self.setPosition(touch); }); self.zoomLens.on('touchend.ezpspace', 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.zoomContainer.on('click.ezpspace touchstart.ezpspace', self.options.onImageClick); self.zoomContainer .add(self.$elem) .on('mousemove.ezpspace', function (e) { if (self.overWindow === false) { self.setElements('show'); } mouseMoveZoomHandler(e); }); function mouseMoveZoomHandler(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; } var elementToTrack = null; if (self.options.zoomType !== 'inner') { elementToTrack = self.zoomLens; } if (self.options.tint && self.options.zoomType !== 'inner') { elementToTrack = self.zoomTint; } if (self.options.zoomType === 'inner') { elementToTrack = self.zoomWindow; } //register the mouse tracking if (elementToTrack) { elementToTrack.on('mousemove.ezpspace', mouseMoveZoomHandler); } // lensFadeOut: 500, zoomTintFadeIn self.zoomContainer .add(self.$elem) .hover(function () { if (self.overWindow === false) { self.setElements('show'); } }, function () { if (!self.scrollLock) { self.setElements('hide'); self.options.onDestroy(self.$elem); } }); //end ove image if (self.options.zoomType !== 'inner') { self.zoomWindow.hover(function () { self.overWindow = true; self.setElements('hide'); }, 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) { //see compatibility of mouse events at https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel self.zoomContainer.add(self.$elem).on('wheel 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.deltaY || e.originalEvent.detail * -1; //this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; // e.preventDefault(); e.stopImmediatePropagation(); e.stopPropagation(); e.preventDefault(); if (theEvent === 0) { // fixes last event inversion bug return false; } var nextZoomLevel; if (theEvent / 120 > 0) { nextZoomLevel = parseFloat(self.currentZoomLevel) - self.options.scrollZoomIncrement; //scrolling up if (nextZoomLevel >= parseFloat(self.minZoomLevel)) { self.changeZoomLevel(nextZoomLevel); } } else { //scrolling down //Check if it has to maintain original zoom window aspect ratio or not if ((!self.fullheight && !self.fullwidth) || !self.options.mantainZoomAspectRatio) { nextZoomLevel = parseFloat(self.currentZoomLevel) + self.options.scrollZoomIncrement; if (self.options.maxZoomLevel) { if (nextZoomLevel <= self.options.maxZoomLevel) { self.changeZoomLevel(nextZoomLevel); } } else { //andy self.changeZoomLevel(nextZoomLevel); } } } return false; }); } }, destroy: function () { var self = this; self.$elem.off('.ezpspace'); self.$galleries.off('.ezpspace'); $(self.zoomContainer).remove(); if (self.options.loadingIcon && !!self.spinner && !!self.spinner.length) { self.spinner.remove(); delete self.spinner; } }, getIdentifier: function () { var self = this; return self.options.zoomId; }, 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.showHideZoomContainer('show'); 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.showHideZoomContainer('hide'); self.showHideLens('hide'); } if (self.options.tint) { self.showHideTint('hide'); } } }, setPosition: function (e) { var self = this; if (!self.options.zoomEnabled || e === undefined) { 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.updateOffset(self); if (self.options.tint && self.options.zoomType !== 'inner') { self.zoomTint.css({ top: 0, 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) { var lensHeight, lensWidth; if (self.nzHeight < self.options.zoomWindowWidth / self.widthRatio) { self.lensHeight = self.nzHeight; } else { self.lensHeight = self.options.zoomWindowHeight / self.heightRatio; } if (self.largeWidth < self.options.zoomWindowWidth) { self.lensWidth = self.nzWidth; } else { self.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) { self.lensHeight = self.nzHeight; } else { self.lensHeight = self.options.zoomWindowHeight / self.heightRatio; } if (self.nzWidth < self.options.zoomWindowHeight / self.heightRatio) { self.lensWidth = self.nzWidth; } else { self.lensWidth = self.options.zoomWindowWidth / self.widthRatio; } self.zoomLens.css({ width: self.lensWidth, height: self.lensHeight }); if (self.options.tint) { self.zoomTintImage.css({ width: self.nzWidth, height: self.nzHeight }); } } if (self.options.zoomType === 'lens') { self.zoomLens.css({ width: self.options.lensSize, height: self.options.lensSize }); } //end responsive image change } } //container fix self.zoomContainer.css({ top: self.nzOffset.top, left: self.nzOffset.left, width: self.nzWidth, // new code height: self.nzHeight // new code }); self.mouseLeft = parseInt(e.pageX - self.pageOffsetX - self.nzOffset.left); self.mouseTop = parseInt(e.pageY - self.pageOffsetY - self.nzOffset.top); //calculate the Location of the Lens //calculate the bound regions - but only if zoom window if (self.options.zoomType === 'window') { var zoomLensHeight = self.zoomLens.height() / 2; var zoomLensWidth = self.zoomLens.width() / 2; self.Etoppos = (self.mouseTop < 0 + zoomLensHeight); self.Eboppos = (self.mouseTop > self.nzHeight - zoomLensHeight - (self.options.lensBorderSize * 2)); self.Eloppos = (self.mouseLeft < 0 + zoomLensWidth); self.Eroppos = (self.mouseLeft > (self.nzWidth - zoomLensWidth - (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 = Math.floor(self.mouseLeft - self.zoomLens.width() / 2); self.lensTopPos = Math.floor(self.mouseTop - self.zoomLens.height() / 2); } //adjust the background position if the mouse is in one of the outer regions //Top region if (self.Etoppos) { self.lensTopPos = 0; } //Left Region if (self.Eloppos) { self.windowLeftPos = 0; self.lensLeftPos = 0; self.tintpos = 0; } //Set bottom and right region for window mode if (self.options.zoomType === 'window') { if (self.Eboppos) { self.lensTopPos = Math.max((self.nzHeight) - self.zoomLens.height() - (self.options.lensBorderSize * 2), 0); } if (self.Eroppos) { self.lensLeftPos = (self.nzWidth - (self.zoomLens.width()) - (self.options.lensBorderSize * 2)); } } //Set bottom and right region for inner mode if (self.options.zoomType === 'inner') { if (self.Eboppos) { self.lensTopPos = Math.max(((self.nzHeight) - (self.options.lensBorderSize * 2)), 0); } if (self.Eroppos) { self.lensLeftPos = (self.nzWidth - (self.nzWidth) - (self.options.lensBorderSize * 2)); } } //if lens zoom if (self.options.zoomType === 'lens') { self.windowLeftPos = ((e.pageX - self.pageOffsetX - self.nzOffset.left) * self.widthRatio - self.zoomLens.width() / 2) * -1; self.windowTopPos = ((e.pageY - self.pageOffsetY - 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({ backgroundSize: '' + (self.largeWidth / self.newvalueheight) + 'px ' + (self.largeHeight / self.newvalueheight) + 'px' }); } self.zoomWindow.css({ backgroundSize: '' + (self.largeWidth / self.newvalueheight) + 'px ' + (self.largeHeight / self.newvalueheight) + 'px' }); } else { if (self.options.zoomType === 'lens') { self.zoomLens.css({ backgroundSize: '' + (self.largeWidth / self.newvaluewidth) + 'px ' + (self.largeHeight / self.newvaluewidth) + 'px' }); } self.zoomWindow.css({ backgroundSize: '' + (self.largeWidth / self.newvaluewidth) + 'px ' + (self.largeHeight / self.newvaluewidth) + 'px' }); } self.changeBgSize = false; } self.setWindowPosition(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.setWindowPosition(e); } if (self.options.zoomType === 'inner') { self.setWindowPosition(e); } if (self.options.showLens) { if (self.fullwidth && self.options.zoomType !== 'lens') { self.lensLeftPos = 0; } self.zoomLens.css({ left: self.lensLeftPos, top: self.lensTopPos }); } } //end else }, showHideZoomContainer: function (change) { var self = this; if (change === 'show') { if (self.zoomContainer) { self.zoomContainer.show(); } } if (change === 'hide') { if (self.zoomContainer) { self.zoomContainer.hide(); } } }, showHideWindow: function (change) { var self = this; if (change === 'show') { if (!self.isWindowActive && self.zoomWindow) { self.options.onShow(self); if (self.options.zoomWindowFadeIn) { self.zoomWindow.stop(true, true, false).fadeIn(self.options.zoomWindowFadeIn); } else { self.zoomWindow.show(); } self.isWindowActive = true; } } if (change === 'hide') { if (self.isWindowActive) { if (self.options.zoomWindowFadeOut) { self.zoomWindow.stop(true, true).fadeOut(self.options.zoomWindowFadeOut, function () { if (self.loop) { //stop moving the zoom window when zoom window is faded out clearInterval(self.loop); self.loop = false; } }); } else { self.zoomWindow.hide(); } self.options.onHide(self); self.isWindowActive = false; } } }, showHideLens: function (change) { var self = this; if (change === 'show') { if (!self.isLensActive) { if (self.zoomLens) { 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.zoomLens) { 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 && self.zoomTint) { 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; } } }, setLensPosition: function (e) { }, setWindowPosition: 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.zoomWindowOffsetY);//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 $.noop(); } 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 $.noop(); } 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 $.noop(); } break; case 11: self.windowOffsetTop = (self.options.zoomWindowOffsetY); 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 $.noop(); } 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.zoomWindowOffsetY);//DONE - 1 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 } } //end isNAN else { // For BC purposes, treat passed element as ID if element not found self.externalContainer = $(self.options.zoomWindowPosition); if (!self.externalContainer.length) { 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.zoomWindowOffsetY; self.windowOffsetLeft = self.windowOffsetLeft + self.options.zoomWindowOffsetX; self.zoomWindow.css({ top: self.windowOffsetTop, left: self.windowOffsetLeft }); if (self.options.zoomType === 'inner') { self.zoomWindow.css({ top: 0, left: 0 }); } self.windowLeftPos = ((e.pageX - self.pageOffsetX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * -1; self.windowTopPos = ((e.pageY - self.pageOffsetY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * -1; if (self.Etoppos) { self.windowTopPos = 0; } if (self.Eloppos) { self.windowLeftPos = 0; } if (self.Eboppos) { self.windowTopPos = (self.largeHeight / self.currentZoomLevel - self.zoomWindow.height()) * (-1); } if (self.Eroppos) { self.windowLeftPos = ((self.largeWidth / self.currentZoomLevel - self.zoomWindow.width()) * (-1)); } //stops micro movements if (self.fullheight) { self.windowTopPos = 0; } if (self.fullwidth) { self.windowLeftPos = 0; } //set the css background position if (self.options.zoomType === 'window' || self.options.zoomType === 'inner') { if (self.zoomLock === 1) { //overrides for images not zoomable if (self.widthRatio <= 1) { self.windowLeftPos = 0; } if (self.heightRatio <= 1) { self.windowTopPos = 0; } } // adjust images less than the window height // if (self.options.zoomType === 'window') { // if (self.largeHeight < self.options.zoomWindowHeight) { // self.windowTopPos = 0; // } // if (self.largeWidth < self.options.zoomWindowWidth) { // self.windowLeftPos = 0; // } // } //set the zoomwindow background position if (self.options.easing) { // if(self.changeZoom){ // clearInterval(self.loop); // self.changeZoom = false; // self.loop = false; // } //set the pos to 0 if not set if (!self.xp) { self.xp = 0; } if (!self.yp) { self.yp = 0; } var interval = 16; var easingInterval = parseInt(self.options.easing); if (typeof easingInterval === 'number' && isFinite(easingInterval) && Math.floor(easingInterval) === easingInterval) { interval = easingInterval; } //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.pageOffsetX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1); self.yp = (((e.pageY - self.pageOffsetY - 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({ backgroundSize: '' + (self.largeWidth / self.newvalueheight) + 'px ' + (self.largeHeight / self.newvalueheight) + 'px' }); } self.zoomWindow.css({ backgroundSize: '' + (self.largeWidth / self.newvalueheight) + 'px ' + (self.largeHeight / self.newvalueheight) + 'px' }); } else { if (self.options.zoomType !== 'lens') { self.zoomLens.css({ backgroundSize: '' + (self.largeWidth / self.newvaluewidth) + 'px ' + (self.largeHeight / self.newvalueheight) + 'px' }); } self.zoomWindow.css({ backgroundSize: '' + (self.largeWidth / self.newvaluewidth) + 'px ' + (self.largeHeight / self.newvaluewidth) + 'px' }); } /* if(!self.bgxp){self.bgxp = self.largeWidth/self.newvalue;} if(!self.bgyp){self.bgyp = self.largeHeight/self.newvalue ;} if (!self.bgloop){ self.bgloop = setInterval(function(){ self.bgxp += (self.largeWidth/self.newvalue - self.bgxp) / self.options.easingAmount; self.bgyp += (self.largeHeight/self.newvalue - self.bgyp) / self.options.easingAmount; self.zoomWindow.css('background-size', self.bgxp + 'px ' + self.bgyp + 'px' ); }, 16); } */ self.changeBgSize = false; } self.zoomWindow.css({ backgroundPosition: '' + self.windowLeftPos + 'px ' + self.windowTopPos + 'px' }); self.scrollingLock = false; self.loop = false; } else if (Math.round(Math.abs(self.xp - self.windowLeftPos) + Math.abs(self.yp - self.windowTopPos)) < 1) { //stops micro movements clearInterval(self.loop); self.zoomWindow.css({ backgroundPosition: '' + self.windowLeftPos + 'px ' + self.windowTopPos + 'px' }); self.loop = false; } else { if (self.changeBgSize) { if (self.nzHeight > self.nzWidth) { if (self.options.zoomType === 'lens') { self.zoomLens.css({ backgroundSize: '' + (self.largeWidth / self.newvalueheight) + 'px ' + (self.largeHeight / self.newvalueheight) + 'px' }); } self.zoomWindow.css({ backgroundSize: '' + (self.largeWidth / self.newvalueheight) + 'px ' + (self.largeHeight / self.newvalueheight) + 'px' }); } else { if (self.options.zoomType !== 'lens') { self.zoomLens.css({ backgroundSize: '' + (self.largeWidth / self.newvaluewidth) + 'px ' + (self.largeHeight / self.newvaluewidth) + 'px' }); } self.zoomWindow.css({ backgroundSize: '' + (self.largeWidth / self.newvaluewidth) + 'px ' + (self.largeHeight / self.newvaluewidth) + 'px' }); } self.changeBgSize = false; } self.zoomWindow.css({ backgroundPosition: '' + self.xp + 'px ' + self.yp + 'px' }); } }, interval); } } else { if (self.changeBgSize) { if (self.nzHeight > self.nzWidth) { if (self.options.zoomType === 'lens') { self.zoomLens.css({ backgroundSize: '' + (self.largeWidth / self.newvalueheight) + 'px ' + (self.largeHeight / self.newvalueheight) + 'px' }); } self.zoomWindow.css({ backgroundSize: '' + (self.largeWidth / self.newvalueheight) + 'px ' + (self.largeHeight / self.newvalueheight) + 'px' }); } else { if (self.options.zoomType === 'lens') { self.zoomLens.css({ backgroundSize: '' + (self.largeWidth / self.newvaluewidth) + 'px ' + (self.largeHeight / self.newvaluewidth) + 'px' }); } if ((self.largeHeight / self.newvaluewidth) < self.options.zoomWindowHeight) { self.zoomWindow.css({ backgroundSize: '' + (self.largeWidth / self.newvaluewidth) + 'px ' + (self.largeHeight / self.newvaluewidth) + 'px' }); } else { self.zoomWindow.css({ backgroundSize: '' + (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; var zoomLensWidth = self.zoomLens.width(); var zoomLensHeight = self.zoomLens.height(); self.updateOffset(self); self.tintpos = ((e.pageX - self.pageOffsetX - self.nzOffset.left) - (zoomLensWidth / 2)) * -1; self.tintposy = ((e.pageY - self.pageOffsetY - self.nzOffset.top) - zoomLensHeight / 2) * -1; if (self.Etoppos) { self.tintposy = 0; } if (self.Eloppos) { self.tintpos = 0; } if (self.Eboppos) { self.tintposy = (self.nzHeight - zoomLensHeight - (self.options.lensBorderSize * 2)) * (-1); } if (self.Eroppos) { self.tintpos = ((self.nzWidth - zoomLensWidth - (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, top: self.tintposy }); } }, swaptheimage: function (smallimage, largeimage) { var self = this; var newImg = new Image(); if (self.options.loadingIcon && !self.spinner) { var styleAttr = { background: 'url("' + self.options.loadingIcon + '") no-repeat', height: self.nzHeight, width: self.nzWidth, zIndex: 2000, position: 'absolute', backgroundPosition: 'center center', }; if (self.options.zoomType === 'inner') { styleAttr.setProperty('top', 0); } self.spinner = $('
') .css(styleAttr); self.$elem.after(self.spinner); } else if (self.spinner) { self.spinner.show(); } self.options.onImageSwap(self.$elem); newImg.onload = function () { self.largeWidth = newImg.width; self.largeHeight = newImg.height; self.zoomImage = largeimage; self.zoomWindow.css({ backgroundSize: '' + self.largeWidth + 'px ' + self.largeHeight + 'px' }); self.swapAction(smallimage, largeimage); return; }; self.setImageSource(newImg, largeimage); // this must be done AFTER setting onload }, swapAction: function (smallimage, largeimage) { var self = this; var elemWidth = self.$elem.width(); var elemHeight = self.$elem.height(); 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; }; self.setImageSource(newImg2, 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('background-image', 'url("' + largeimage + '")'); } if (self.options.zoomType === 'window') { self.zoomWindow.css('background-image', 'url("' + largeimage + '")'); } if (self.options.zoomType === 'inner') { self.zoomWindow.css('background-image', '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: elemHeight, width: elemWidth }); } self.zoomContainer.css({ 'height': elemHeight, 'width': elemWidth }); if (self.options.zoomType === 'inner') { if (!self.options.constrainType) { self.zoomWrap.parent().css({ 'height': elemHeight, 'width': elemWidth }); self.zoomWindow.css({ 'height': elemHeight, 'width': elemWidth }); } } if (self.options.imageCrossfade) { self.zoomWrap.css({ 'height': elemHeight, 'width': elemWidth }); } } 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', elemHeight); //self.zoomTintImage.attr('src') = elem.data('image'); self.zoomTintImage.css('height', elemHeight); self.zoomTint.css('height', elemHeight); } self.zoomContainer.css({ 'height': elemHeight, 'width': elemWidth }); if (self.options.imageCrossfade) { self.zoomWrap.css({ 'height': elemHeight, 'width': elemWidth }); } } if (self.options.constrainType) { //This will contrain the image proportions if (self.options.constrainType === 'height') { var autoWDimension = { 'height': self.options.constrainSize, 'width': 'auto' }; self.zoomContainer.css(autoWDimension); if (self.options.imageCrossfade) { self.zoomWrap.css(autoWDimension); self.constwidth = self.zoomWrap.width(); } else { self.$elem.css(autoWDimension); self.constwidth = elemWidth; } var constWDim = { 'height': self.options.constrainSize, 'width': self.constwidth }; if (self.options.zoomType === 'inner') { self.zoomWrap.parent().css(constWDim); self.zoomWindow.css(constWDim); } if (self.options.tint) { self.tintContainer.css(constWDim); self.zoomTint.css(constWDim); self.zoomTintImage.css(constWDim); } } if (self.options.constrainType === 'width') { var autoHDimension = { 'height': 'auto', 'width': self.options.constrainSize }; self.zoomContainer.css(autoHDimension); if (self.options.imageCrossfade) { self.zoomWrap.css(autoHDimension); self.constheight = self.zoomWrap.height(); } else { self.$elem.css(autoHDimension); self.constheight = elemHeight; } var constHDim = { 'height': self.constheight, 'width': self.options.constrainSize }; if (self.options.zoomType === 'inner') { self.zoomWrap.parent().css(constHDim); self.zoomWindow.css(constHDim); } if (self.options.tint) { self.tintContainer.css(constHDim); self.zoomTint.css(constHDim); self.zoomTintImage.css(constHDim); } } } }, doneCallback: function () { var self = this; if (self.options.loadingIcon && !!self.spinner && !!self.spinner.length) { self.spinner.hide(); } self.updateOffset(self); 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.zoomWindowHeight / self.heightRatio) { self.lensHeight = self.nzHeight; } else { self.lensHeight = self.options.zoomWindowHeight / self.heightRatio; } if (self.nzWidth < self.options.zoomWindowWidth) { self.lensWidth = self.nzWidth; } else { self.lensWidth = self.options.zoomWindowWidth / self.widthRatio; } if (self.zoomLens) { self.zoomLens.css({ 'width': self.lensWidth, 'height': self.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 imgSrc = ''; if ($(this).data(self.options.attrImageZoomSrc)) { imgSrc = $(this).data(self.options.attrImageZoomSrc); } else if ($(this).data('image')) { imgSrc = $(this).data('image'); } //put the current image at the start if (imgSrc === self.zoomImage) { self.gallerylist.unshift({ href: '' + imgSrc + '', title: $(this).find('img').attr('title') }); } else { self.gallerylist.push({ href: '' + imgSrc + '', 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); var newvalue = self.newvalue; //maxwidth & Maxheight of the image var maxheightnewvalue = self.largeHeight / ((self.options.zoomWindowHeight / self.nzHeight) * self.nzHeight); var 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 var 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: self.options.zoomWindowHeight / self.heightRatio }); } 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: self.options.zoomWindowWidth / self.widthRatio }); } 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; } else if (self.nzHeight >= self.nzWidth) { self.currentZoomLevel = self.newvaluewidth; } } } //under //sets the boundry change, called in setWindowPos self.setPosition(self.currentLoc); // }, closeAll: function () { var self = this; if (self.zoomWindow) { self.zoomWindow.hide(); } if (self.zoomLens) { self.zoomLens.hide(); } if (self.zoomTint) { self.zoomTint.hide(); } }, updateOffset: function (self) { if (self.options.zoomContainerAppendTo !== 'body') { self.nzOffset = self.$elem.offset(); var appendedPosition = $(self.options.zoomContainerAppendTo).offset(); self.nzOffset.top = self.$elem.offset().top - appendedPosition.top; self.nzOffset.left = self.$elem.offset().left - appendedPosition.left; // NOTE: When initialising ezPlus on an element // present inside a dialog the positions will // not be correct unless the dialog occupies the // entire viewport. These page offsets will help // zoom lens and zoom window to be positioned // correctly // Update page offsets self.pageOffsetX = appendedPosition.left; self.pageOffsetY = appendedPosition.top; } else { self.nzOffset = self.$elem.offset(); // Update page offsets self.pageOffsetX = 0; self.pageOffsetY = 0; } }, changeState: function (value) { var self = this; if (value === 'enable') { self.options.zoomEnabled = true; } if (value === 'disable') { self.options.zoomEnabled = false; } }, responsiveConfig: function (options) { if (options.respond && options.respond.length > 0) { return $.extend({}, options, this.configByScreenWidth(options)); } return options; }, configByScreenWidth: function (options) { var screenWidth = $(window).width(); var config = $.grep(options.respond, function (item) { var range = item.range.split('-'); return (screenWidth >= range[0]) && (screenWidth <= range[1]); }); if (config.length > 0) { return config[0]; } else { return options; } } }; $.fn.ezPlus = function (options) { return this.each(function () { var elevate = Object.create(EZP); elevate.init(options, this); $.data(this, 'ezPlus', elevate); }); }; $.fn.ezPlus.options = { container: 'ZoomContainer', attrImageZoomSrc: 'zoom-image', // attribute to plugin use for zoom borderColour: '#888', borderSize: 4, constrainSize: false, //in pixels the dimensions you want to constrain on constrainType: false, //width or height containLensZoom: false, cursor: 'inherit', // user should set to what they want the cursor as, if they have set a click function debug: false, easing: false, easingAmount: 12, enabled: true, gallery: false, galleryActiveClass: 'zoomGalleryActive', gallerySelector: false, galleryItem: 'a', galleryEvent: 'click', imageCrossfade: false, lensBorderColour: '#000', lensBorderSize: 1, lensColour: 'white', //colour of the lens background lensFadeIn: false, lensFadeOut: false, lensOpacity: 0.4, //opacity of the lens lensShape: 'square', //can be 'round' lensSize: 200, lenszoom: false, loadingIcon: false, //http://www.example.com/spinner.gif // This change will allow to decide if you want to decrease // zoom of one of the dimensions once the other reached it's top value, // or keep the aspect ratio, default behaviour still being as always, // allow to continue zooming out, so it keeps retrocompatibility. mantainZoomAspectRatio: false, maxZoomLevel: false, minZoomLevel: 1.01, onComplete: $.noop, onDestroy: $.noop, onImageClick: $.noop, onImageSwap: $.noop, onImageSwapComplete: $.noop, onShow: $.noop, onHide: $.noop, onZoomedImageLoaded: $.noop, preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION) respond: [], responsive: true, scrollZoom: false, //allow zoom on mousewheel, true to activate scrollZoomIncrement: 0.1, //steps of the scrollzoom showLens: true, 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 touchEnabled: true, zoomActivation: 'hover', // Can also be click (PLACEHOLDER FOR NEXT VERSION) zoomContainerAppendTo: 'body', //zoom container parent selector zoomId: -1, // identifier for the zoom container zoomLevel: 1, //default zoom level of image zoomTintFadeIn: false, zoomTintFadeOut: false, zoomType: 'window', //window is default, also 'lens' available - zoomWindowAlwaysShow: false, zoomWindowBgColour: '#fff', zoomWindowFadeIn: false, zoomWindowFadeOut: false, zoomWindowHeight: 400, zoomWindowOffsetX: 0, zoomWindowOffsetY: 0, zoomWindowPosition: 1, //Possible values: 1-16, but we can also position with a selector string. zoomWindowWidth: 400, zoomEnabled: true, //false disables zoomwindow from showing zIndex: 999 }; })(window.jQuery, window, document);