1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065 |
- // jscs:disable
- /* jshint -W071, -W074 */
- // jscs:enable
- /* globals jQuery */
- /*
- * 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;
- 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
- 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 = $('<div class="zoomWrapper"/>')
- .css({
- height: self.nzHeight,
- width: self.nzWidth
- });
- self.zoomWrap = self.$elem.wrap(elementZoomWrapper);
- self.$elem.css({
- position: 'absolute'
- });
- }
- // NTJ
- self.zoomLock = 0.5;
- 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 #85144b',
- //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: 1002 //NTJ
- };
- }
- //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',
- 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 = $('<div/>').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth});
- self.zoomContainer = $('<div class="zoomContainer" ' + 'uuid="' + self.options.zoomId + '"/>');
- self.zoomContainer.css({
- position: 'absolute',
- top: self.nzOffset.top,
- left: self.nzOffset.left,
- //top: 0, //NTJ
- //left: 0,
- height: self.nzHeight,
- width: self.nzWidth,
- zIndex: self.options.zIndex
- });
- 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');
- }
- // NTJ
- //console.log(self.lensStyle);
- //console.log(self.lensRound);
- if (self.options.zoomType !== 'inner') {
- self.zoomLens = $('<div class="zoomLens"/>')
- .css($.extend({}, self.lensStyle, self.lensRound))
- .appendTo(self.zoomContainer)
- .click(function () {
- self.$elem.trigger('click');
- });
- if (self.options.tint) {
- self.tintContainer = $('<div class="tintContainer"/>');
- self.zoomTint = $('<div class="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 = $('<img src="' + self.$elem.attr('src') + '">')
- .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;
- // NTJ Hack
-
- self.zoomWindow = $('<div class="zoomWindow"/><div style="padding: 10px; color: white;">Full size</div>')
- .css($.extend({
- zIndex: 999,
- top: self.windowOffsetTop,
- left: self.windowOffsetLeft,
- }, self.zoomWindowStyle))
- .appendTo(targetZoomContainer).click(function () {
- self.$elem.trigger('click');
- });
- self.zoomWindowContainer = $('<div class="zoomWindowContainer" />')
- .css({
- width: self.options.zoomWindowWidth
- });
- self.zoomWindow.wrap(self.zoomWindowContainer);
- 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----------------------------------*/
- 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.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');
- }
- });
- 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.$elem.on('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.on('click.ezpspace touchstart.ezpspace', self.options.onImageClick);
- self.zoomContainer.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).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 * 10;
- }
- 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.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();
- //console.log(self.nzWidth);
- 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);
- }
- // NTJ updated
- //console.log("*********");
- //console.log(self.lensHeight);
- 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.nzHeight < self.lensHeight) {
- 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;
- }
- */
- /*
- if (self.lensHeight >= self.nzHeight) {
- self.lensHeight = self.nzHeight - 100.0;
- self.lensWidth = self.lensHeight * (self.options.zoomWindowWidth / self.options.zoomWindowHeight);
-
- }
- */
- // NTJ Update
- //console.log("*****IIIIII*******");
- //console.log(self.lensHeight);
- //console.log(self.lensWidth);
- //console.log(self.nzHeight);
- //console.log(self.nzWidth);
- 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.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 = 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.nzOffset.left) * self.widthRatio - self.zoomLens.width() / 2) * -1;
- self.windowTopPos = ((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({
- 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.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * -1;
- self.windowTopPos = ((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * -1;
- if (self.Etoppos) {
- self.windowTopPos = 0;
- }
- if (self.Eloppos) {
- self.windowLeftPos = 0;
- }
- if (self.Eboppos) {
- self.windowTopPos = (self.largeHeight / self.currentZoomLevel - self.zoomWindow.height()) * (-1);
- }
- if (self.Eroppos) {
- self.windowLeftPos = ((self.largeWidth / self.currentZoomLevel - self.zoomWindow.width()) * (-1));
- }
- //stops micro movements
- if (self.fullheight) {
- self.windowTopPos = 0;
- }
- if (self.fullwidth) {
- self.windowLeftPos = 0;
- }
- //set the css background position
- if (self.options.zoomType === 'window' || self.options.zoomType === 'inner') {
- if (self.zoomLock === 1) {
- //overrides for images not zoomable
- if (self.widthRatio <= 1) {
- self.windowLeftPos = 0;
- }
- if (self.heightRatio <= 1) {
- self.windowTopPos = 0;
- }
- }
- // adjust images less than the window height
- if (self.options.zoomType === 'window') {
- if (self.largeHeight < self.options.zoomWindowHeight) {
- self.windowTopPos = 0;
- }
- if (self.largeWidth < self.options.zoomWindowWidth) {
- self.windowLeftPos = 0;
- }
- }
- //set the zoomwindow background position
- if (self.options.easing) {
- // if(self.changeZoom){
- // clearInterval(self.loop);
- // self.changeZoom = false;
- // self.loop = false;
- // }
- //set the pos to 0 if not set
- if (!self.xp) {
- self.xp = 0;
- }
- if (!self.yp) {
- self.yp = 0;
- }
- var interval = 16;
- if (Number.isInteger(parseInt(self.options.easing))) {
- interval = parseInt(self.options.easing);
- }
- //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({
- 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.nzOffset.left) - (zoomLensWidth / 2)) * -1;
- self.tintposy = ((e.pageY - 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 = $('<div class="ezp-spinner"></div>')
- .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;
- } else {
- self.nzOffset = self.$elem.offset();
- }
- },
- 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 = {
- attrImageZoomSrc: 'zoom-image', // attribute to plugin use for zoom
- borderColour: '#C91921',
- 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: true, //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,
- //minZoomLevel: false,
- 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: 99999
- };
- })(window.jQuery, window, document);
|