ez-plus
Version:
A jQuery image zoom plug-in, with tints, easing and gallery integration.
1,104 lines (989 loc) • 86.5 kB
JavaScript
/* jshint -W071, -W074 */
/* global jQuery:false */
/* Disabled options are:
* W071: This function has too many statements
* W074: This function's cyclomatic complexity is too high
*/
/*
* jQuery ezPlus 1.1.21
* 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, undefined) {
var EZP = {
init: function (options, elem) {
var self = this;
var $galleries;
self.elem = elem;
self.$elem = $(elem);
self.options = $.extend({}, $.fn.ezPlus.options, self.responsiveConfig(options || {}));
self.imageSrc = self.$elem.data(self.options.attrImageZoomSrc) ? self.$elem.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
$galleries = $(self.options.gallery ? ('#' + self.options.gallery) : self.options.gallerySelector);
$galleries.on('click.zoom', self.options.galleryItem, function (e) {
//Set a class on the currently active gallery image
if (self.options.galleryActiveClass) {
$(self.options.galleryItem, $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;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
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) {
self.zoomWrap = self.$elem.wrap('<div style="height:' + self.nzHeight + 'px;width:' + self.nzWidth + 'px;" class="zoomWrapper" />');
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;' +
'float: left;' +
'height: ' + String(self.options.zoomWindowHeight) + 'px;' +
'width: ' + String(self.options.zoomWindowWidth) + 'px;' +
'text-align: center;' +
'border: ' + String(self.options.borderSize) + 'px solid ' + self.options.borderColour + ';' +
'background-size: ' + self.largeWidth / self.currentZoomLevel + 'px ' + self.largeHeight / self.currentZoomLevel + 'px;' +
'background-position: 0px 0px;' +
'background-repeat: no-repeat;' +
'background-color: ' + String(self.options.zoomWindowBgColour) + ';' +
'overflow: hidden;' +
'z-index: 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');
return 'display: none;' +
'position: absolute;' +
'float: left;' +
'height: ' + String(self.nzHeight) + 'px;' +
'width: ' + String(self.nzWidth) + 'px;' +
'margin-top: ' + String(borderWidth) + ';' +
'margin-left: ' + String(borderWidth) + ';' +
'border: ' + String(self.options.borderSize) + 'px solid ' + self.options.borderColour + ';' +
'background-position: 0px 0px;' +
'background-repeat: 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 = String(self.options.zoomWindowHeight / self.heightRatio);
}
if (self.largeWidth < self.options.zoomWindowWidth) {
self.lensWidth = self.nzWidth;
}
else {
self.lensWidth = String(self.options.zoomWindowWidth / self.widthRatio);
}
return 'display: none;' +
'position: absolute;' +
'float: right;' +
'height: ' + self.lensHeight + 'px;' +
'width: ' + self.lensWidth + 'px;' +
'border: ' + (self.options.lensBorderSize) + 'px' + ' solid ' + (self.options.lensBorderColour) + ';' +
'background-position: 0px 0px;' +
'background-repeat: no-repeat;' +
'background-color: ' + (self.options.lensColour) + ';' +
'opacity: ' + (self.options.lensOpacity) + ';' +
'filter: alpha(opacity = ' + (self.options.lensOpacity * 100) + ');' +
'zoom: 1;' +
'cursor:' + (self.options.cursor) + ';' +
'z-index: 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 + 'px;' +
'width: ' + self.nzWidth + 'px;' +
'background-color: ' + self.options.tintColour + ';' +
'filter: alpha(opacity=0);' +
'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:' + String(self.options.lensSize) + 'px;' +
'width:' + String(self.options.lensSize) + 'px;' +
'border: ' + String(self.options.borderSize) + 'px solid ' + self.options.borderColour + ';' +
'background-position: 0px 0px;' +
'background-repeat: no-repeat;' +
'background-color: ' + self.options.lensColour + ";" +
'cursor:' + (self.options.cursor) + ';';
}
//does not round in all browsers
if (self.options.lensShape === 'round') {
self.lensRound =
'border-radius: ' + String(self.options.lensSize / 2 + self.options.borderSize) + 'px;';
}
//create the div's + ""
//self.zoomContainer = $('<div/>').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth});
self.zoomContainer =
$('<div class="zoomContainer" ' +
'uuid="' + self.options.zoomId + '"' +
'style="' +
'position: absolute;' +
'top: ' + self.nzOffset.top + 'px;' +
'left: ' + self.nzOffset.left + 'px;' +
'height: ' + self.nzHeight + 'px;' + '' +
'width: ' + self.nzWidth + 'px;' +
'z-index: ' + self.options.zIndex + '"></div>');
if (self.$elem.attr('id')) {
self.zoomContainer.attr('id', self.$elem.attr('id') + '-zoomContainer');
}
$(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 = $('<div class="zoomLens" style="' + self.lensStyle + self.lensRound + '"> </div>')
.appendTo(self.zoomContainer)
.click(function () {
self.$elem.trigger('click');
});
if (self.options.tint) {
self.tintContainer = $('<div/>').addClass('tintContainer');
self.zoomTint = $('<div class="zoomTint" style="' + self.tintStyle + '"></div>');
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 = $('<img style="' +
'position: absolute;' +
'top: 0px;' +
'left: 0px;' +
'height: ' + self.nzHeight + 'px;" ' +
'width: ' + self.nzWidth + 'px; ' +
'max-width: none; ' +
'src="' + self.$elem.attr('src') + '">')
.appendTo(self.zoomLens)
.click(function () {
self.$elem.trigger('click');
});
}
}
//create zoom window
var targetZoomContainer = isNaN(self.options.zoomWindowPosition) ? 'body' : self.zoomContainer;
self.zoomWindow = $('<div style="' +
'z-index: 999;' +
'top: ' + (self.windowOffsetTop) + 'px;' +
'left: ' + (self.windowOffsetLeft) + 'px;' +
self.zoomWindowStyle + '" class="zoomWindow"> </div>')
.appendTo(targetZoomContainer).click(function () {
self.$elem.trigger('click');
});
self.zoomWindowContainer = $('<div/>').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 = $('<div class="ezplus-caption" '+
// 'style="'+self.captionStyle+'display: block; width: 280px;">INSERT ALT TAG</div>').appendTo(self.zoomWindow.parent());
if (self.options.zoomType === 'lens') {
self.zoomLens.css('background-image', 'url("' + self.imageSrc + '")');
}
if (self.options.zoomType === 'window') {
self.zoomWindow.css('background-image', 'url("' + self.imageSrc + '")');
}
if (self.options.zoomType === 'inner') {
self.zoomWindow.css('background-image', 'url("' + self.imageSrc + '")');
}
/*-------------------END THE ZOOM WINDOW AND LENS----------------------------------*/
if (self.options.touchEnabled) {
//touch events
self.$elem.bind('touchmove.ezpspace', function (e) {
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
self.setPosition(touch);
});
self.zoomContainer.bind('touchmove.ezpspace', function (e) {
self.setElements('show');
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
self.setPosition(touch);
});
self.zoomContainer.bind('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');
}
});
self.$elem.bind('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.bind('touchmove.ezpspace', function (e) {
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
self.setPosition(touch);
});
self.zoomLens.bind('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.$elem.bind('mousemove.ezpspace', 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('click.ezpspace touchstart.ezpspace', self.options.onImageClick);
self.zoomContainer.bind('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.bind('mousemove.ezpspace', mouseMoveZoomHandler);
}
// lensFadeOut: 500, zoomTintFadeIn
self.zoomContainer.add(self.$elem).mouseenter(function () {
if (self.overWindow === false) {
self.setElements('show');
}
}).mouseleave(function () {
if (!self.scrollLock) {
self.setElements('hide');
self.options.onDestroy(self.$elem);
}
});
//end ove image
if (self.options.zoomType !== 'inner') {
self.zoomWindow.mouseenter(function () {
self.overWindow = true;
self.setElements('hide');
}).mouseleave(function () {
self.overWindow = false;
});
}
//end ove image
// var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);
// $(this).empty();
// return false;
//fix for initial zoom setting
//if (self.options.zoomLevel !== 1) {
// self.changeZoomLevel(self.currentZoomLevel);
//}
//set the min zoomlevel
if (self.options.minZoomLevel) {
self.minZoomLevel = self.options.minZoomLevel;
}
else {
self.minZoomLevel = self.options.scrollZoomIncrement * 2;
}
if (self.options.scrollZoom) {
//see compatibility of mouse events at https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel
self.zoomContainer.add(self.$elem).bind('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;
}
if (theEvent / 120 > 0) {
var 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) {
var 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.unbind('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.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.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 = String((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 = String((self.options.zoomWindowHeight / self.heightRatio));
}
if (self.nzWidth < self.options.zoomWindowHeight / self.heightRatio) {
self.lensWidth = self.nzWidth;
}
else {
self.lensWidth = String((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: String(self.options.lensSize) + 'px',
height: String(self.options.lensSize) + 'px'
});
}
//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.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') {
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 = String(Math.floor(self.mouseLeft - self.zoomLens.width() / 2));
self.lensTopPos = String(Math.floor(self.mouseTop - self.zoomLens.height() / 2));
}
//adjust the background position if the mouse is in one of the outer regions
//Top region
if (self.Etoppos) {
self.lensTopPos = 0;
}
//Left Region
if (self.Eloppos) {
self.windowLeftPos = 0;
self.lensLeftPos = 0;
self.tintpos = 0;
}
//Set bottom and right region for window mode
if (self.options.zoomType === 'window') {
if (self.Eboppos) {
self.lensTopPos = Math.max((self.nzHeight) - self.zoomLens.height() - (self.options.lensBorderSize * 2), 0);
}
if (self.Eroppos) {
self.lensLeftPos = (self.nzWidth - (self.zoomLens.width()) - (self.options.lensBorderSize * 2));
}
}
//Set bottom and right region for inner mode
if (self.options.zoomType === 'inner') {
if (self.Eboppos) {
self.lensTopPos = Math.max(((self.nzHeight) - (self.options.lensBorderSize * 2)), 0);
}
if (self.Eroppos) {
self.lensLeftPos = (self.nzWidth - (self.nzWidth) - (self.options.lensBorderSize * 2));
}
}
//if lens zoom
if (self.options.zoomType === 'lens') {
self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomLens.width() / 2) * (-1));
self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomLens.height() / 2) * (-1));
self.zoomLens.css('background-position', 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.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 + 'px',
top: self.lensTopPos + 'px'
});
}
} //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.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 = 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.heig