1/* jshint -W071, -W074 */ 2/* global jQuery:false */ 3 4/* Disabled options are: 5 * W071: This function has too many statements 6 * W074: This function's cyclomatic complexity is too high 7 */ 8 9/* 10 * jQuery ezPlus 1.1.11 11 * Demo's and documentation: 12 * http://igorlino.github.io/elevatezoom-plus/ 13 * 14 * licensed under MIT license. 15 * http://en.wikipedia.org/wiki/MIT_License 16 * 17 */ 18 19if (typeof Object.create !== 'function') { 20 Object.create = function (obj) { 21 function F() { 22 } 23 24 F.prototype = obj; 25 return new F(); 26 }; 27} 28 29(function ($, window, document, undefined) { 30 var EZP = { 31 init: function (options, elem) { 32 var self = this; 33 var $galleries; 34 35 self.elem = elem; 36 self.$elem = $(elem); 37 38 self.options = $.extend({}, $.fn.ezPlus.options, self.responsiveConfig(options || {})); 39 40 self.imageSrc = self.$elem.data(self.options.attrImageZoomSrc) ? self.$elem.data(self.options.attrImageZoomSrc) : self.$elem.attr('src'); 41 42 if (!self.options.enabled) { 43 return; 44 } 45 46 //TINT OVERRIDE SETTINGS 47 if (self.options.tint) { 48 self.options.lensColour = 'none'; //colour of the lens background 49 self.options.lensOpacity = '1'; //opacity of the lens 50 } 51 //INNER OVERRIDE SETTINGS 52 if (self.options.zoomType === 'inner') { 53 self.options.showLens = false; 54 } 55 56 //UUID WHEN MISSING IDENTIFIER 57 if (self.options.zoomId === -1) { 58 self.options.zoomId = generateUUID(); 59 } 60 61 //Remove alt on hover 62 63 self.$elem.parent().removeAttr('title').removeAttr('alt'); 64 65 self.zoomImage = self.imageSrc; 66 67 self.refresh(1); 68 69 //Create the image swap from the gallery 70 $galleries = $(self.options.gallery ? ('#' + self.options.gallery) : self.options.gallerySelector); 71 $galleries.on('click.zoom', self.options.galleryItem, function (e) { 72 73 //Set a class on the currently active gallery image 74 if (self.options.galleryActiveClass) { 75 $(self.options.galleryItem, $galleries).removeClass(self.options.galleryActiveClass); 76 $(this).addClass(self.options.galleryActiveClass); 77 } 78 //stop any link on the a tag from working 79 if (this.tagName === 'A') { 80 e.preventDefault(); 81 } 82 83 //call the swap image function 84 if ($(this).data(self.options.attrImageZoomSrc)) { 85 self.zoomImagePre = $(this).data(self.options.attrImageZoomSrc); 86 } 87 else { 88 self.zoomImagePre = $(this).data('image'); 89 } 90 self.swaptheimage($(this).data('image'), self.zoomImagePre); 91 if (this.tagName === 'A') { 92 return false; 93 } 94 }); 95 96 function generateUUID() { 97 var d = new Date().getTime(); 98 var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { 99 var r = (d + Math.random() * 16) % 16 | 0; 100 d = Math.floor(d / 16); 101 return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); 102 }); 103 return uuid; 104 } 105 }, 106 refresh: function (length) { 107 var self = this; 108 109 setTimeout(function () { 110 self.fetch(self.imageSrc); 111 112 }, length || self.options.refresh); 113 }, 114 fetch: function (imgsrc) { 115 //get the image 116 var self = this; 117 var newImg = new Image(); 118 newImg.onload = function () { 119 //set the large image dimensions - used to calculte ratio's 120 self.largeWidth = newImg.width; 121 self.largeHeight = newImg.height; 122 //once image is loaded start the calls 123 self.startZoom(); 124 self.currentImage = self.imageSrc; 125 //let caller know image has been loaded 126 self.options.onZoomedImageLoaded(self.$elem); 127 }; 128 self.setImageSource(newImg, imgsrc); // this must be done AFTER setting onload 129 130 return; 131 }, 132 setImageSource: function (image, src) { 133 //sets an image's source. 134 image.src = src; 135 }, 136 startZoom: function () { 137 var self = this; 138 //get dimensions of the non zoomed image 139 self.nzWidth = self.$elem.width(); 140 self.nzHeight = self.$elem.height(); 141 142 //activated elements 143 self.isWindowActive = false;
144 self.isLensActive = false; 145 self.isTintActive = false; 146 self.overWindow = false; 147 148 //CrossFade Wrapper 149 if (self.options.imageCrossfade) { 150 self.zoomWrap = self.$elem.wrap('<div style="height:' + self.nzHeight + 'px;width:' + self.nzWidth + 'px;" class="zoomWrapper" />'); 151 self.$elem.css('position', 'absolute'); 152 } 153 154 self.zoomLock = 1; 155 self.scrollingLock = false; 156 self.changeBgSize = false; 157 self.currentZoomLevel = self.options.zoomLevel; 158 159 //get offset of the non zoomed image 160 self.nzOffset = self.$elem.offset(); 161 //calculate the width ratio of the large/small image 162 self.widthRatio = (self.largeWidth / self.currentZoomLevel) / self.nzWidth; 163 self.heightRatio = (self.largeHeight / self.currentZoomLevel) / self.nzHeight; 164 165 function getWindowZoomStyle() { 166 return 'overflow: hidden;' + 167 'background-position: 0px 0px;text-align:center;' + 168 'background-color: ' + String(self.options.zoomWindowBgColour) + ';' + 169 'width: ' + String(self.options.zoomWindowWidth) + 'px;' + 170 'height: ' + String(self.options.zoomWindowHeight) + 'px;' + 171 'float: left;' + 172 'background-size: ' + self.largeWidth / self.currentZoomLevel + 'px ' + self.largeHeight / self.currentZoomLevel + 'px;' + 173 'display: none;z-index:100;' + 174 'border: ' + String(self.options.borderSize) + 'px solid ' + self.options.borderColour + ';' + 175 'background-repeat: no-repeat;' + 176 'position: absolute;'; 177 } 178 179 //if window zoom 180 if (self.options.zoomType === 'window') { 181 self.zoomWindowStyle = getWindowZoomStyle(); 182 } 183 184 function getInnerZoomStyle() { 185 //has a border been put on the image? Lets cater for this 186 var borderWidth = self.$elem.css('border-left-width'); 187 188 return 'overflow: hidden;' + 189 'margin-left: ' + String(borderWidth) + ';' + 190 'margin-top: ' + String(borderWidth) + ';' + 191 'background-position: 0px 0px;' + 192 'width: ' + String(self.nzWidth) + 'px;' + 193 'height: ' + String(self.nzHeight) + 'px;' + 194 'float: left;' + 195 'display: none;' + 196 'cursor:' + (self.options.cursor) + ';' + 197 'border: ' + String(self.options.borderSize) + 'px solid ' + self.options.borderColour + ';' + 198 'background-repeat: no-repeat;' + 199 'position: absolute;'; 200 } 201 202 //if inner zoom 203 if (self.options.zoomType === 'inner') { 204 self.zoomWindowStyle = getInnerZoomStyle(); 205 } 206 207 function getWindowLensStyle() { 208 // adjust images less than the window height 209 210 if (self.nzHeight < self.options.zoomWindowHeight / self.heightRatio) { 211 self.lensHeight = self.nzHeight; 212 } 213 else { 214 self.lensHeight = String(self.options.zoomWindowHeight / self.heightRatio); 215 } 216 if (self.largeWidth < self.options.zoomWindowWidth) { 217 self.lensWidth = self.nzWidth; 218 } 219 else { 220 self.lensWidth = String(self.options.zoomWindowWidth / self.widthRatio); 221 } 222 223 return 'background-position: 0px 0px;width: ' + String((self.options.zoomWindowWidth) / self.widthRatio) + 'px;' + 224 'height: ' + String((self.options.zoomWindowHeight) / self.heightRatio) + 225 'px;float: right;display: none;' + 226 'overflow: hidden;' + 227 'z-index: 999;' + 228 'opacity:' + (self.options.lensOpacity) + ';filter: alpha(opacity = ' + (self.options.lensOpacity * 100) + '); zoom:1;' + 229 'width:' + self.lensWidth + 'px;' + 230 'height:' + self.lensHeight + 'px;' + 231 'background-color:' + (self.options.lensColour) + ';' + 232 'cursor:' + (self.options.cursor) + ';' + 233 'border: ' + (self.options.lensBorderSize) + 'px' + 234 ' solid ' + (self.options.lensBorderColour) + ';background-repeat: no-repeat;position: absolute;'; 235 } 236 237 //lens style for window zoom 238 if (self.options.zoomType === 'window') { 239 self.lensStyle = getWindowLensStyle(); 240 } 241 242 //tint style 243 self.tintStyle = 'display: block;' + 244 'position: absolute;' + 245 'background-color: ' + self.options.tintColour + ';' + 246 'filter:alpha(opacity=0);' + 247 'opacity: 0;' + 248 'width: ' + self.nzWidth + 'px;' + 249 'height: ' + self.nzHeight + 'px;'; 250 251 //lens style for lens zoom with optional round for modern browsers 252 self.lensRound = ''; 253 254 if (self.options.zoomType === 'lens') { 255 self.lensStyle = 'background-position: 0px 0px;' + 256 'float: left;display: none;' + 257 'border: ' + String(self.options.borderSize) + 'px solid ' + self.options.borderColour + ';' + 258 'width:' + String(self.options.lensSize) + 'px;' + 259 'height:' + String(self.options.lensSize) + 'px;' + 260 'background-repeat: no-repeat;position: absolute;'; 261 } 262 263 //does not round in all browsers 264 if (self.options.lensShape === 'round') { 265 self.lensRound = 'border-top-left-radius: ' + String(self.options.lensSize / 2 + self.options.borderSize) + 'px;' + 266 'border-top-right-radius: ' + String(self.options.lensSize / 2 + self.options.borderSize) + 'px;' + 267 'border-bottom-left-radius: ' + String(self.options.lensSize / 2 + self.options.borderSize) + 'px;' + 268 'border-bottom-right-radius: ' + String(self.options.lensSize / 2 + self.options.borderSize) + 'px;'; 269 } 270 271 //create the div's + ""
272 //self.zoomContainer = $('<div/>').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth}); 273 274 self.zoomContainer = 275 $('<div class="zoomContainer" ' + 276 'uuid="' + self.options.zoomId + '"' + 277 'style="' + 278 'position:absolute;' + 279 'left:' + self.nzOffset.left + 'px;' + 280 'top:' + self.nzOffset.top + 'px;' + 281 'height:' + self.nzHeight + 'px;' + '' + 282 'width:' + self.nzWidth + 'px;' + 283 'z-index:' + self.options.zIndex + '"></div>'); 284 if (self.$elem.attr("id")) { 285 self.zoomContainer.attr("id", self.$elem.attr("id") + "-zoomContainer"); 286 } 287 $(self.options.zoomContainerAppendTo).append(self.zoomContainer); 288 289 //this will add overflow hidden and contrain the lens on lens mode 290 if (self.options.containLensZoom && self.options.zoomType === 'lens') { 291 self.zoomContainer.css('overflow', 'hidden'); 292 } 293 if (self.options.zoomType !== 'inner') { 294 self.zoomLens = $('<div class="zoomLens" style="' + self.lensStyle + self.lensRound + '"> </div>') 295 .appendTo(self.zoomContainer) 296 .click(function () { 297 self.$elem.trigger('click'); 298 }); 299 300 if (self.options.tint) {
301 self.tintContainer = $('<div/>').addClass('tintContainer'); 302 self.zoomTint = $('<div class="zoomTint" style="' + self.tintStyle + '"></div>'); 303 304 self.zoomLens.wrap(self.tintContainer); 305 306 self.zoomTintcss = self.zoomLens.after(self.zoomTint); 307 308 //if tint enabled - set an image to show over the tint 309 310 self.zoomTintImage = $('<img style="' + 311 'position: absolute; left: 0px; top: 0px; max-width: none; ' + 312 'width: ' + self.nzWidth + 'px; ' + 313 'height: ' + self.nzHeight + 'px;" ' + 314 'src="' + self.imageSrc + '">') 315 .appendTo(self.zoomLens) 316 .click(function () { 317 318 self.$elem.trigger('click'); 319 }); 320 } 321 } 322 323 var targetZoomContainer = isNaN(self.options.zoomWindowPosition) ? 'body' : self.zoomContainer; 324 //create zoom window 325 self.zoomWindow = $('<div style="z-index:999;' + 326 'left:' + (self.windowOffsetLeft) + 'px;' + 327 'top:' + (self.windowOffsetTop) + 'px;' + self.zoomWindowStyle + '" class="zoomWindow"> </div>') 328 .appendTo(targetZoomContainer).click(function () { 329 self.$elem.trigger('click'); 330 });
331 self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css('width', self.options.zoomWindowWidth); 332 self.zoomWindow.wrap(self.zoomWindowContainer); 333 334 // self.captionStyle = "text-align: left;background-color: black;'+ 335 // 'color: white;font-weight: bold;padding: 10px;font-family: sans-serif;font-size: 11px"; 336 // self.zoomCaption = $('<div class="ezplus-caption" '+ 337 // 'style="'+self.captionStyle+'display: block; width: 280px;">INSERT ALT TAG</div>').appendTo(self.zoomWindow.parent()); 338 339 if (self.options.zoomType === 'lens') { 340 self.zoomLens.css('background-image', 'url("' + self.imageSrc + '")'); 341 } 342 if (self.options.zoomType === 'window') { 343 self.zoomWindow.css('background-image', 'url("' + self.imageSrc + '")'); 344 } 345 if (self.options.zoomType === 'inner') { 346 self.zoomWindow.css('background-image', 'url("' + self.imageSrc + '")'); 347 } 348 349 /*-------------------END THE ZOOM WINDOW AND LENS----------------------------------*/ 350 if (self.options.touchEnabled) { 351 //touch events 352 self.$elem.bind('touchmove.ezpspace', function (e) { 353 e.preventDefault(); 354 var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 355 self.setPosition(touch); 356 }); 357 self.zoomContainer.bind('touchmove.ezpspace', function (e) { 358 if (self.options.zoomType === 'inner') { 359 self.showHideWindow('show'); 360 361 } 362 e.preventDefault(); 363 var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 364 self.setPosition(touch); 365 366 }); 367 self.zoomContainer.bind('touchend.ezpspace', function (e) { 368 self.showHideWindow('hide'); 369 if (self.options.showLens) { 370 self.showHideLens('hide'); 371 } 372 if (self.options.tint && self.options.zoomType !== 'inner') { 373 self.showHideTint('hide'); 374 } 375 }); 376 377 self.$elem.bind('touchend.ezpspace', function (e) { 378 self.showHideWindow('hide'); 379 if (self.options.showLens) { 380 self.showHideLens('hide'); 381 } 382 if (self.options.tint && self.options.zoomType !== 'inner') { 383 self.showHideTint('hide'); 384 } 385 }); 386 if (self.options.showLens) { 387 self.zoomLens.bind('touchmove.ezpspace', function (e) { 388 389 e.preventDefault(); 390 var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; 391 self.setPosition(touch); 392 }); 393 394 self.zoomLens.bind('touchend.ezpspace', function (e) { 395 self.showHideWindow('hide'); 396 if (self.options.showLens) { 397 self.showHideLens('hide'); 398 } 399 if (self.options.tint && self.options.zoomType !== 'inner') { 400 self.showHideTint('hide'); 401 } 402 }); 403 } 404 } 405 //Needed to work in IE 406 self.$elem.bind('mousemove.ezpspace', function (e) { 407 if (self.overWindow === false) { 408 self.setElements('show'); 409 } 410 //make sure on orientation change the setposition is not fired 411 if (self.lastX !== e.clientX || self.lastY !== e.clientY) { 412 self.setPosition(e); 413 self.currentLoc = e; 414 } 415 self.lastX = e.clientX; 416 self.lastY = e.clientY; 417 418 }); 419 420 self.zoomContainer.bind('click.ezpspace', self.options.onImageClick); 421 422 self.zoomContainer.bind('mousemove.ezpspace', function (e) { 423 if (self.overWindow === false) { 424 self.setElements('show'); 425 } 426 mouseMoveZoomHandler(e); 427 }); 428 429 function mouseMoveZoomHandler(e) { 430 //self.overWindow = true; 431 //make sure on orientation change the setposition is not fired 432 if (self.lastX !== e.clientX || self.lastY !== e.clientY) { 433 self.setPosition(e); 434 self.currentLoc = e; 435 } 436 self.lastX = e.clientX; 437 self.lastY = e.clientY; 438 } 439 440 var elementToTrack = null;
441 if (self.options.zoomType !== 'inner') { 442 elementToTrack = self.zoomLens; 443 } 444 if (self.options.tint && self.options.zoomType !== 'inner') { 445 elementToTrack = self.zoomTint; 446 } 447 if (self.options.zoomType === 'inner') { 448 elementToTrack = self.zoomWindow; 449 } 450 451 //register the mouse tracking 452 if (elementToTrack) { 453 elementToTrack.bind('mousemove.ezpspace', mouseMoveZoomHandler); 454 } 455 456 // lensFadeOut: 500, zoomTintFadeIn 457 self.zoomContainer.add(self.$elem).mouseenter(function () { 458 if (self.overWindow === false) { 459 self.setElements('show'); 460 } 461 }).mouseleave(function () { 462 if (!self.scrollLock) { 463 self.setElements('hide'); 464 self.options.onDestroy(self.$elem); 465 } 466 }); 467 //end ove image 468 469 if (self.options.zoomType !== 'inner') { 470 self.zoomWindow.mouseenter(function () { 471 self.overWindow = true; 472 self.setElements('hide'); 473 }).mouseleave(function () { 474 self.overWindow = false; 475 }); 476 } 477 //end ove image 478 479 // var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail); 480 481 // $(this).empty(); 482 // return false; 483 484 //fix for initial zoom setting 485 //if (self.options.zoomLevel !== 1) { 486 // self.changeZoomLevel(self.currentZoomLevel); 487 //} 488 //set the min zoomlevel 489 if (self.options.minZoomLevel) { 490 self.minZoomLevel = self.options.minZoomLevel; 491 } 492 else { 493 self.minZoomLevel = self.options.scrollZoomIncrement * 2; 494 } 495 496 if (self.options.scrollZoom) { 497 //see compatibility of mouse events at https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel 498 self.zoomContainer.add(self.$elem).bind('wheel DOMMouseScroll MozMousePixelScroll', function (e) { 499 // in IE there is issue with firing of mouseleave - So check whether still scrolling 500 // and on mouseleave check if scrolllock 501 self.scrollLock = true; 502 clearTimeout($.data(this, 'timer')); 503 $.data(this, 'timer', setTimeout(function () { 504 self.scrollLock = false; 505 //do something 506 }, 250)); 507 508 var theEvent = e.originalEvent.deltaY || e.originalEvent.detail * -1; 509 510 //this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; 511 // e.preventDefault(); 512 513 e.stopImmediatePropagation(); 514 e.stopPropagation(); 515 e.preventDefault(); 516 517 if (theEvent / 120 > 0) { 518 //scrolling up 519 if (self.currentZoomLevel >= self.minZoomLevel) { 520 self.changeZoomLevel(self.currentZoomLevel - self.options.scrollZoomIncrement); 521 } 522 } 523 else { 524 //scrolling down 525 526 //Check if it has to maintain original zoom window aspect ratio or not 527 if ((!self.fullheight && !self.fullwidth) || !self.options.mantainZoomAspectRatio) { 528 if (self.options.maxZoomLevel) { 529 if (self.currentZoomLevel <= self.options.maxZoomLevel) { 530 self.changeZoomLevel(parseFloat(self.currentZoomLevel) + self.options.scrollZoomIncrement); 531 } 532 } 533 else { 534 //andy 535 self.changeZoomLevel(parseFloat(self.currentZoomLevel) + self.options.scrollZoomIncrement); 536 } 537 } 538 } 539 return false;
540 }); 541 } 542 }, 543 destroy: function () { 544 var self = this; 545 self.$elem.unbind('ezpspace'); 546 $(self.zoomContainer).remove(); 547 if (self.options.loadingIcon && !!self.spinner && !!self.spinner.length) { 548 self.spinner.remove(); 549 delete self.spinner; 550 } 551 }, 552 getIdentifier: function () { 553 var self = this; 554 return self.options.zoomId; 555 }, 556 setElements: function (type) { 557 var self = this; 558 if (!self.options.zoomEnabled) { 559 return false; 560 } 561 if (type === 'show') { 562 if (self.isWindowSet) { 563 if (self.options.zoomType === 'inner') { 564 self.showHideWindow('show'); 565 } 566 if (self.options.zoomType === 'window') { 567 self.showHideWindow('show'); 568 } 569 if (self.options.showLens) { 570 self.showHideLens('show'); 571 } 572 if (self.options.tint && self.options.zoomType !== 'inner') { 573 self.showHideTint('show'); 574 } 575 } 576 } 577 578 if (type === 'hide') { 579 if (self.options.zoomType === 'window') { 580 self.showHideWindow('hide'); 581 } 582 if (!self.options.tint) { 583 self.showHideWindow('hide'); 584 } 585 if (self.options.showLens) { 586 self.showHideLens('hide'); 587 } 588 if (self.options.tint) { 589 self.showHideTint('hide'); 590 } 591 } 592 }, 593 setPosition: function (e) { 594 595 var self = this; 596 597 if (!self.options.zoomEnabled) { 598 return false; 599 } 600 601 //recaclc offset each time in case the image moves 602 //this can be caused by other on page elements 603 self.nzHeight = self.$elem.height(); 604 self.nzWidth = self.$elem.width(); 605 self.nzOffset = self.$elem.offset(); 606 607 if (self.options.tint && self.options.zoomType !== 'inner') { 608 self.zoomTint.css({ 609 top: 0, 610 left: 0 611 }); 612 } 613 //set responsive 614 //will checking if the image needs changing before running this code work faster? 615 if (self.options.responsive && !self.options.scrollZoom) { 616 if (self.options.showLens) { 617 var lensHeight, lensWidth; 618 if (self.nzHeight < self.options.zoomWindowWidth / self.widthRatio) { 619 self.lensHeight = self.nzHeight; 620 } 621 else { 622 self.lensHeight = String((self.options.zoomWindowHeight / self.heightRatio)); 623 } 624 if (self.largeWidth < self.options.zoomWindowWidth) { 625 self.lensWidth = self.nzWidth; 626 } 627 else { 628 self.lensWidth = (self.options.zoomWindowWidth / self.widthRatio); 629 } 630 self.widthRatio = self.largeWidth / self.nzWidth; 631 self.heightRatio = self.largeHeight / self.nzHeight; 632 if (self.options.zoomType !== 'lens') { 633 //possibly dont need to keep recalcalculating 634 //if the lens is heigher than the image, then set lens size to image size 635 if (self.nzHeight < self.options.zoomWindowWidth / self.widthRatio) { 636 self.lensHeight = self.nzHeight; 637 638 } 639 else { 640 self.lensHeight = String((self.options.zoomWindowHeight / self.heightRatio)); 641 } 642 643 if (self.nzWidth < self.options.zoomWindowHeight / self.heightRatio) { 644 self.lensWidth = self.nzWidth; 645 } 646 else { 647 self.lensWidth = String((self.options.zoomWindowWidth / self.widthRatio)); 648 } 649 650 self.zoomLens.css({ 651 'width': self.lensWidth, 652 'height': self.lensHeight 653 }); 654 655 if (self.options.tint) { 656 self.zoomTintImage.css({ 657 'width': self.nzWidth, 658 'height': self.nzHeight 659 }); 660 } 661 662 } 663 if (self.options.zoomType === 'lens') { 664 self.zoomLens.css({ 665 width: String(self.options.lensSize) + 'px', 666 height: String(self.options.lensSize) + 'px' 667 }); 668 } 669 //end responsive image change 670 } 671 } 672 673 //container fix 674 self.zoomContainer.css({ 675 top: self.nzOffset.top, 676 left: self.nzOffset.left, 677 width: self.nzWidth, // new code 678 height: self.nzHeight // new code 679 }); 680 self.mouseLeft = parseInt(e.pageX - self.nzOffset.left); 681 self.mouseTop = parseInt(e.pageY - self.nzOffset.top); 682 //calculate the Location of the Lens 683 684 //calculate the bound regions - but only if zoom window 685 if (self.options.zoomType === 'window') { 686 var zoomLensHeight = self.zoomLens.height() / 2; 687 var zoomLensWidth = self.zoomLens.width() / 2; 688 self.Etoppos = (self.mouseTop < 0 + zoomLensHeight); 689 self.Eboppos = (self.mouseTop > self.nzHeight - zoomLensHeight - (self.options.lensBorderSize * 2)); 690 self.Eloppos = (self.mouseLeft < 0 + zoomLensWidth); 691 self.Eroppos = (self.mouseLeft > (self.nzWidth - zoomLensWidth - (self.options.lensBorderSize * 2))); 692 } 693 //calculate the bound regions - but only for inner zoom 694 if (self.options.zoomType === 'inner') { 695 self.Etoppos = (self.mouseTop < ((self.nzHeight / 2) / self.heightRatio)); 696 self.Eboppos = (self.mouseTop > (self.nzHeight - ((self.nzHeight / 2) / self.heightRatio))); 697 self.Eloppos = (self.mouseLeft < 0 + (((self.nzWidth / 2) / self.widthRatio))); 698 self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.nzWidth / 2) / self.widthRatio - (self.options.lensBorderSize * 2))); 699 } 700 701 // if the mouse position of the slider is one of the outerbounds, then hide window and lens 702 if (self.mouseLeft < 0 || self.mouseTop < 0 || self.mouseLeft > self.nzWidth || self.mouseTop > self.nzHeight) { 703 self.setElements('hide'); 704 return; 705 } 706 //else continue with operations 707 else { 708 //lens options 709 if (self.options.showLens) { 710 // self.showHideLens('show'); 711 //set background position of lens 712 self.lensLeftPos = String(Math.floor(self.mouseLeft - self.zoomLens.width() / 2)); 713 self.lensTopPos = String(Math.floor(self.mouseTop - self.zoomLens.height() / 2)); 714 } 715 //adjust the background position if the mouse is in one of the outer regions 716 717 //Top region 718 if (self.Etoppos) { 719 self.lensTopPos = 0; 720 } 721 //Left Region 722 if (self.Eloppos) { 723 self.windowLeftPos = 0; 724 self.lensLeftPos = 0; 725 self.tintpos = 0; 726 } 727 //Set bottom and right region for window mode 728 if (self.options.zoomType === 'window') { 729 if (self.Eboppos) { 730 self.lensTopPos = Math.max((self.nzHeight) - self.zoomLens.height() - (self.options.lensBorderSize * 2), 0); 731 } 732 if (self.Eroppos) { 733 self.lensLeftPos = (self.nzWidth - (self.zoomLens.width())
733- (self.options.lensBorderSize * 2)); 734 } 735 } 736 //Set bottom and right region for inner mode 737 if (self.options.zoomType === 'inner') { 738 if (self.Eboppos) { 739 self.lensTopPos = Math.max(((self.nzHeight) - (self.options.lensBorderSize * 2)), 0); 740 } 741 if (self.Eroppos) { 742 self.lensLeftPos = (self.nzWidth - (self.nzWidth) - (self.options.lensBorderSize * 2)); 743 } 744 } 745 //if lens zoom 746 if (self.options.zoomType === 'lens') { 747 748 self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomLens.width() / 2) * (-1)); 749 self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomLens.height() / 2) * (-1)); 750 self.zoomLens.css('background-position', self.windowLeftPos + 'px ' + self.windowTopPos + 'px'); 751 752 if (self.changeBgSize) { 753 if (self.nzHeight > self.nzWidth) { 754 if (self.options.zoomType === 'lens') { 755 self.zoomLens.css('background-size', 756 self.largeWidth / self.newvalueheight + 'px ' + 757 self.largeHeight / self.newvalueheight + 'px'); 758 } 759 760 self.zoomWindow.css('background-size', 761 self.largeWidth / self.newvalueheight + 'px ' + 762 self.largeHeight / self.newvalueheight + 'px'); 763 } 764 else { 765 if (self.options.zoomType === 'lens') { 766 self.zoomLens.css('background-size', 767 self.largeWidth / self.newvaluewidth + 'px ' + 768 self.largeHeight / self.newvaluewidth + 'px'); 769 } 770 self.zoomWindow.css('background-size', 771 self.largeWidth / self.newvaluewidth + 'px ' + 772 self.largeHeight / self.newvaluewidth + 'px'); 773 } 774 self.changeBgSize = false; 775 } 776 777 self.setWindowPosition(e); 778 } 779 //if tint zoom 780 if (self.options.tint && self.options.zoomType !== 'inner') { 781 self.setTintPosition(e); 782 } 783 //set the css background position 784 if (self.options.zoomType === 'window') { 785 self.setWindowPosition(e); 786 } 787 if (self.options.zoomType === 'inner') { 788 self.setWindowPosition(e); 789 } 790 if (self.options.showLens) { 791 if (self.fullwidth && self.options.zoomType !== 'lens') { 792 self.lensLeftPos = 0; 793 } 794 self.zoomLens.css({ 795 left: self.lensLeftPos + 'px', 796 top: self.lensTopPos + 'px' 797 }); 798 } 799 800 } //end else 801 }, 802 showHideZoomContainer: function (change) { 803 var self = this; 804 if (change === 'show') { 805 if (self.zoomContainer) { 806 self.zoomContainer.show(); 807 } 808 } 809 if (change === 'hide') { 810 if (self.zoomContainer) { 811 self.zoomContainer.hide(); 812 } 813 } 814 }, 815 showHideWindow: function (change) { 816 var self = this; 817 if (change === 'show') { 818 if (!self.isWindowActive && self.zoomWindow) { 819 self.options.onShow(self); 820 if (self.options.zoomWindowFadeIn) { 821 self.zoomWindow.stop(true, true, false).fadeIn(self.options.zoomWindowFadeIn); 822 } 823 else { 824 self.zoomWindow.show(); 825 } 826 self.isWindowActive = true; 827 } 828 } 829 if (change === 'hide') { 830 if (self.isWindowActive) { 831 if (self.options.zoomWindowFadeOut) { 832 self.zoomWindow.stop(true, true).fadeOut(self.options.zoomWindowFadeOut, function () { 833 if (self.loop) { 834 //stop moving the zoom window when zoom window is faded out 835 clearInterval(self.loop); 836 self.loop = false;
837 } 838 }); 839 } 840 else { 841 self.zoomWindow.hide(); 842 } 843 self.isWindowActive = false; 844 } 845 } 846 }, 847 showHideLens: function (change) { 848 var self = this; 849 if (change === 'show') { 850 if (!self.isLensActive) { 851 if (self.options.lensFadeIn && self.zoomLens) { 852 self.zoomLens.stop(true, true, false).fadeIn(self.options.lensFadeIn); 853 } 854 else { 855 self.zoomLens.show(); 856 } 857 self.isLensActive = true; 858 } 859 } 860 if (change === 'hide') { 861 if (self.isLensActive) { 862 if (self.options.lensFadeOut) { 863 self.zoomLens.stop(true, true).fadeOut(self.options.lensFadeOut); 864 } 865 else { 866 self.zoomLens.hide(); 867 } 868 self.isLensActive = false; 869 } 870 } 871 }, 872 showHideTint: function (change) { 873 var self = this; 874 if (change === 'show') { 875 if (!self.isTintActive && self.zoomTint) { 876 877 if (self.options.zoomTintFadeIn) { 878 self.zoomTint.css('opacity', self.options.tintOpacity).animate().stop(true, true).fadeIn('slow'); 879 } 880 else { 881 self.zoomTint.css('opacity', self.options.tintOpacity).animate(); 882 self.zoomTint.show(); 883 } 884 self.isTintActive = true; 885 } 886 } 887 if (change === 'hide') { 888 if (self.isTintActive) { 889 890 if (self.options.zoomTintFadeOut) { 891 self.zoomTint.stop(true, true).fadeOut(self.options.zoomTintFadeOut); 892 } 893 else { 894 self.zoomTint.hide(); 895 } 896 self.isTintActive = false; 897 } 898 } 899 }, 900 901 setLensPosition: function (e) { 902 }, 903 904 setWindowPosition: function (e) { 905 //return obj.slice( 0, count ); 906 var self = this; 907 908 if (!isNaN(self.options.zoomWindowPosition)) { 909 910 switch (self.options.zoomWindowPosition) { 911 case 1: //done 912 self.windowOffsetTop = (self.options.zoomWindowOffsetY);//DONE - 1 913 self.windowOffsetLeft = (+self.nzWidth); //DONE 1, 2, 3, 4, 16 914 break; 915 case 2: 916 if (self.options.zoomWindowHeight > self.nzHeight) { //positive margin 917 918 self.windowOffsetTop = ((self.options.zoomWindowHeight / 2) - (self.nzHeight / 2)) * (-1); 919 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 920 } 921 else { //negative margin 922 $.noop(); 923 } 924 break; 925 case 3: //done 926 self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize * 2)); //DONE 3,9 927 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 928 break; 929 case 4: //done 930 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 931 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 932 break; 933 case 5: //done 934 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 935 self.windowOffsetLeft = (self.nzWidth - self.zoomWindow.width() - (self.options.borderSize * 2)); //DONE - 5,15 936 break; 937 case 6: 938 if (self.options.zoomWindowHeight > self.nzHeight) { //positive margin 939 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 940 941 self.windowOffsetLeft = ((self.options.zoomWindowWidth / 2) - (self.nzWidth / 2) + (self.options.borderSize * 2)) * (-1); 942 } 943 else { //negative margin 944 $.noop(); 945 } 946 947 break; 948 case 7: //done 949 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 950 self.windowOffsetLeft = 0; //DONE 7, 13 951 break; 952 case 8: //done 953 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 954 self.windowOffsetLeft = (self.zoomWindow.width() + (self.options.borderSize * 2)) * (-1);
954 //DONE 8,9,10,11,12 955 break; 956 case 9: //done 957 self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize * 2)); //DONE 3,9 958 self.windowOffsetLeft = (self.zoomWindow.width() + (self.options.borderSize * 2)) * (-1); //DONE 8,9,10,11,12 959 break; 960 case 10: 961 if (self.options.zoomWindowHeight > self.nzHeight) { //positive margin 962 963 self.windowOffsetTop = ((self.options.zoomWindowHeight / 2) - (self.nzHeight / 2)) * (-1); 964 self.windowOffsetLeft = (self.zoomWindow.width() + (self.options.borderSize * 2)) * (-1); //DONE 8,9,10,11,12 965 } 966 else { //negative margin 967 $.noop(); 968 } 969 break; 970 case 11: 971 self.windowOffsetTop = (self.options.zoomWindowOffsetY); 972 self.windowOffsetLeft = (self.zoomWindow.width() + (self.options.borderSize * 2)) * (-1); //DONE 8,9,10,11,12 973 break; 974 case 12: //done 975 self.windowOffsetTop = (self.zoomWindow.height() + (self.options.borderSize * 2)) * (-1); //DONE 12,13,14,15,16 976 self.windowOffsetLeft = (self.zoomWindow.width() + (self.options.borderSize * 2)) * (-1); //DONE 8,9,10,11,12 977 break; 978 case 13: //done 979 self.windowOffsetTop = (self.zoomWindow.height() + (self.options.borderSize * 2)) * (-1); //DONE 12,13,14,15,16 980 self.windowOffsetLeft = (0); //DONE 7, 13 981 break; 982 case 14: 983 if (self.options.zoomWindowHeight > self.nzHeight) { //positive margin 984 self.windowOffsetTop = (self.zoomWindow.height() + (self.options.borderSize * 2)) * (-1); //DONE 12,13,14,15,16 985 986 self.windowOffsetLeft = ((self.options.zoomWindowWidth / 2) - (self.nzWidth / 2) + (self.options.borderSize * 2)) * (-1); 987 } 988 else { //negative margin 989 $.noop(); 990 } 991 break; 992 case 15://done 993 self.windowOffsetTop = (self.zoomWindow.height() + (self.options.borderSize * 2)) * (-1); //DONE 12,13,14,15,16 994 self.windowOffsetLeft = (self.nzWidth - self.zoomWindow.width() - (self.options.borderSize * 2)); //DONE - 5,15 995 break; 996 case 16: //done 997 self.windowOffsetTop = (self.zoomWindow.height() + (self.options.borderSize * 2)) * (-1); //DONE 12,13,14,15,16 998 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 999 break; 1000 default: //done 1001 self.windowOffsetTop = (self.options.zoomWindowOffsetY);//DONE - 1 1002 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 1003 } 1004 } //end isNAN 1005 else { 1006 // For BC purposes, treat passed element as ID if element not found 1007 self.externalContainer = $(self.options.zoomWindowPosition); 1008 if (!self.externalContainer.length) { 1009 self.externalContainer = $('#' + self.options.zoomWindowPosition); 1010 } 1011 1012 self.externalContainerWidth = self.externalContainer.width(); 1013 self.externalContainerHeight = self.externalContainer.height(); 1014 self.externalContainerOffset = self.externalContainer.offset(); 1015 1016 self.windowOffsetTop = self.externalContainerOffset.top;//DONE - 1 1017 self.windowOffsetLeft = self.externalContainerOffset.left; //DONE 1, 2, 3, 4, 16 1018 1019 } 1020 self.isWindowSet = true; 1021 self.windowOffsetTop = self.windowOffsetTop + self.options.zoomWindowOffsetY; 1022 self.windowOffsetLeft = self.windowOffsetLeft + self.options.zoomWindowOffsetX; 1023 1024 self.zoomWindow.css({ 1025 top: self.windowOffsetTop, 1026 left: self.windowOffsetLeft 1027 }); 1028 1029 if (self.options.zoomType === 'inner') { 1030 self.zoomWindow.css({ 1031 top: 0, 1032 left: 0 1033 }); 1034 1035 } 1036 1037 self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1)); 1038 self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1)); 1039 if (self.Etoppos) { 1040 self.windowTopPos = 0; 1041 } 1042 if (self.Eloppos) { 1043 self.windowLeftPos = 0; 1044 } 1045 if (self.Eboppos) { 1046 self.windowTopPos = (self.largeHeight / self.currentZoomLevel - self.zoomWindow.height()) * (-1); 1047 } 1048 if (self.Eroppos) { 1049 self.windowLeftPos = ((self.largeWidth / self.currentZoomLevel - self.zoomWindow.width()) * (-1)); 1050 } 1051 1052 //stops micro movements 1053 if (self.fullheight) { 1054 self.windowTopPos = 0; 1055 } 1056 if (self.fullwidth) { 1057 self.windowLeftPos = 0; 1058 } 1059 1060 //set the css background position 1061 if (self.options.zoomType === 'window' || self.options.zoomType === 'inner') { 1062 1063 if (self.zoomLock === 1) { 1064 //overrides for images not zoomable 1065 if (self.widthRatio <= 1) { 1066 self.windowLeftPos = 0; 1067 } 1068 if (self.heightRatio <= 1) { 1069 self.windowTopPos = 0; 1070 } 1071 } 1072 // adjust images less than the window height 1073 1074 if (self.options.zoomType === 'window') { 1075 if (self.largeHeight < self.options.zoomWindowHeight) { 1076 self.windowTopPos = 0; 1077 } 1078 if (self.largeWidth < self.options.zoomWindowWidth) { 1079 self.windowLeftPos = 0; 1080 } 1081 } 1082 //set the zoomwindow background position 1083 if (self.options.easing) { 1084 1085 // if(self.changeZoom){ 1086 // clearInterval(self.loop); 1087 // self.changeZoom = false;
1088 // self.loop = false; 1089 1090 // } 1091 //set the pos to 0 if not set 1092 if (!self.xp) { 1093 self.xp = 0; 1094 } 1095 if (!self.yp) { 1096 self.yp = 0; 1097 } 1098 var interval = 16; 1099 if (Number.isInteger(parseInt(self.options.easing))){ 1100 interval = parseInt(self.options.easing); 1101 } 1102 //if loop not already started, then run it 1103 if (!self.loop) { 1104 self.loop = setInterval(function () { 1105 //using zeno's paradox 1106 1107 self.xp += (self.windowLeftPos - self.xp) / self.options.easingAmount; 1108 self.yp += (self.windowTopPos - self.yp) / self.options.easingAmount; 1109 if (self.scrollingLock) { 1110 1111 clearInterval(self.loop); 1112 self.xp = self.windowLeftPos; 1113 self.yp = self.windowTopPos; 1114 1115 self.xp = ((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1); 1116 self.yp = (((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1)); 1117 1118 if (self.changeBgSize) { 1119 if (self.nzHeight > self.nzWidth) { 1120 if (self.options.zoomType === 'lens') { 1121 self.zoomLens.css('background-size', 1122 self.largeWidth / self.newvalueheight + 'px ' + 1123 self.largeHeight / self.newvalueheight + 'px'); 1124 } 1125 self.zoomWindow.css('background-size', 1126 self.largeWidth / self.newvalueheight + 'px ' + 1127 self.largeHeight / self.newvalueheight + 'px'); 1128 } 1129 else { 1130 if (self.options.zoomType !== 'lens') { 1131 self.zoomLens.css('background-size', 1132 self.largeWidth / self.newvaluewidth + 'px ' + 1133 self.largeHeight / self.newvalueheight + 'px'); 1134 } 1135 self.zoomWindow.css('background-size', 1136 self.largeWidth / self.newvaluewidth + 'px ' + 1137 self.largeHeight / self.newvaluewidth + 'px'); 1138 } 1139 1140 /* 1141 if(!self.bgxp){self.bgxp = self.largeWidth/self.newvalue;} 1142 if(!self.bgyp){self.bgyp = self.largeHeight/self.newvalue ;} 1143 if (!self.bgloop){ 1144 self.bgloop = setInterval(function(){ 1145 1146 self.bgxp += (self.largeWidth/self.newvalue - self.bgxp) / self.options.easingAmount; 1147 self.bgyp += (self.largeHeight/self.newvalue - self.bgyp) / self.options.easingAmount; 1148 1149 self.zoomWindow.css('background-size', self.bgxp + 'px ' + self.bgyp + 'px' ); 1150 1151 1152 }, 16); 1153 1154 } 1155 */ 1156 self.changeBgSize = false; 1157 } 1158 1159 self.zoomWindow.css('background-position', self.windowLeftPos + 'px ' + self.windowTopPos + 'px'); 1160 self.scrollingLock = false;
1161 self.loop = false; 1162 1163 } 1164 else if (Math.round(Math.abs(self.xp - self.windowLeftPos) + Math.abs(self.yp - self.windowTopPos)) < 1) { 1165 //stops micro movements 1166 clearInterval(self.loop); 1167 self.zoomWindow.css('background-position', self.windowLeftPos + 'px ' + self.windowTopPos + 'px'); 1168 self.loop = false; 1169 } 1170 else { 1171 if (self.changeBgSize) { 1172 if (self.nzHeight > self.nzWidth) { 1173 if (self.options.zoomType === 'lens') { 1174 self.zoomLens.css('background-size', 1175 self.largeWidth / self.newvalueheight + 'px ' + 1176 self.largeHeight / self.newvalueheight + 'px'); 1177 } 1178 self.zoomWindow.css('background-size', 1179 self.largeWidth / self.newvalueheight + 'px ' + 1180 self.largeHeight / self.newvalueheight + 'px'); 1181 } 1182 else { 1183 if (self.options.zoomType !== 'lens') { 1184 self.zoomLens.css('background-size', 1185 self.largeWidth / self.newvaluewidth + 'px ' + 1186 self.largeHeight / self.newvaluewidth + 'px'); 1187 } 1188 self.zoomWindow.css('background-size', 1189 self.largeWidth / self.newvaluewidth + 'px ' + 1190 self.largeHeight / self.newvaluewidth + 'px'); 1191 } 1192 self.changeBgSize = false; 1193 } 1194 1195 self.zoomWindow.css('background-position', self.xp + 'px ' + self.yp + 'px'); 1196 } 1197 }, interval); 1198 } 1199 } 1200 else { 1201 if (self.changeBgSize) { 1202 if (self.nzHeight > self.nzWidth) { 1203 if (self.options.zoomType === 'lens') { 1204 self.zoomLens.css('background-size', 1205 self.largeWidth / self.newvalueheight + 'px ' + 1206 self.largeHeight / self.newvalueheight + 'px'); 1207 } 1208 1209 self.zoomWindow.css('background-size', 1210 self.largeWidth / self.newvalueheight + 'px ' + 1211 self.largeHeight / self.newvalueheight + 'px'); 1212 } 1213 else { 1214 if (self.options.zoomType === 'lens') { 1215 self.zoomLens.css('background-size', 1216 self.largeWidth / self.newvaluewidth + 'px ' + 1217 self.largeHeight / self.newvaluewidth + 'px'); 1218 } 1219 if ((self.largeHeight / self.newvaluewidth) < self.options.zoomWindowHeight) { 1220 1221 self.zoomWindow.css('background-size', 1222 self.largeWidth / self.newvaluewidth + 'px ' + 1223 self.largeHeight / self.newvaluewidth + 'px'); 1224 } 1225 else { 1226 1227 self.zoomWindow.css('background-size', 1228 self.largeWidth / self.newvalueheight + 'px ' + 1229 self.largeHeight / self.newvalueheight + 'px'); 1230 } 1231 1232 } 1233 self.changeBgSize = false;
1234 } 1235 1236 self.zoomWindow.css('background-position', 1237 self.windowLeftPos + 'px ' + 1238 self.windowTopPos + 'px'); 1239 } 1240 } 1241 }, 1242 1243 setTintPosition: function (e) { 1244 var self = this; 1245 var zoomLensWidth = self.zoomLens.width(); 1246 var zoomLensHeight = self.zoomLens.height(); 1247 self.nzOffset = self.$elem.offset(); 1248 self.tintpos = String(((e.pageX - self.nzOffset.left) - (zoomLensWidth / 2)) * (-1)); 1249 self.tintposy = String(((e.pageY - self.nzOffset.top) - zoomLensHeight / 2) * (-1)); 1250 if (self.Etoppos) { 1251 self.tintposy = 0; 1252 } 1253 if (self.Eloppos) { 1254 self.tintpos = 0; 1255 } 1256 if (self.Eboppos) { 1257 self.tintposy = (self.nzHeight - zoomLensHeight - (self.options.lensBorderSize * 2)) * (-1); 1258 } 1259 if (self.Eroppos) { 1260 self.tintpos = ((self.nzWidth - zoomLensWidth - (self.options.lensBorderSize * 2)) * (-1)); 1261 } 1262 if (self.options.tint) { 1263 //stops micro movements 1264 if (self.fullheight) { 1265 self.tintposy = 0; 1266 1267 } 1268 if (self.fullwidth) { 1269 self.tintpos = 0; 1270 1271 } 1272 self.zoomTintImage.css({ 1273 'left': self.tintpos + 'px', 1274 'top': self.tintposy + 'px' 1275 }); 1276 } 1277 }, 1278 1279 swaptheimage: function (smallimage, largeimage) { 1280 var self = this; 1281 var newImg = new Image(); 1282 1283 if (self.options.loadingIcon && !self.spinner) { 1284 var styleAttr = 'background: url(\'' + self.options.loadingIcon + '\') no-repeat center;' + 1285 'height:' + self.nzHeight + 'px;' + 1286 'width:' + self.nzWidth + 'px;' + 1287 'z-index: 2000;' + 1288 'position: absolute; ' + 1289 'background-position: center center;'; 1290 if (self.options.zoomType === 'inner') { 1291 styleAttr += 'top: 0px;'; 1292 }
1293 self.spinner = $('<div class="ezp-spinner" style="' + styleAttr + '"></div>'); 1294 self.$elem.after(self.spinner); 1295 } else if (self.spinner) { 1296 self.spinner.show(); 1297 } 1298 1299 self.options.onImageSwap(self.$elem); 1300 1301 newImg.onload = function () { 1302 self.largeWidth = newImg.width; 1303 self.largeHeight = newImg.height; 1304 self.zoomImage = largeimage; 1305 self.zoomWindow.css('background-size', self.largeWidth + 'px ' + self.largeHeight + 'px'); 1306 1307 self.swapAction(smallimage, largeimage); 1308 return; 1309 }; 1310 self.setImageSource(newImg, largeimage); // this must be done AFTER setting onload 1311 }, 1312 1313 swapAction: function (smallimage, largeimage) { 1314 var self = this; 1315 var elemWidth = self.$elem.width(); 1316 var elemHeight = self.$elem.height(); 1317 var newImg2 = new Image(); 1318 newImg2.onload = function () { 1319 //re-calculate values 1320 self.nzHeight = newImg2.height; 1321 self.nzWidth = newImg2.width; 1322 self.options.onImageSwapComplete(self.$elem); 1323 1324 self.doneCallback(); 1325 return; 1326 }; 1327 self.setImageSource(newImg2, smallimage); 1328 1329 //reset the zoomlevel to that initially set in options 1330 self.currentZoomLevel = self.options.zoomLevel; 1331 self.options.maxZoomLevel = false; 1332 1333 //swaps the main image 1334 //self.$elem.attr('src',smallimage); 1335 //swaps the zoom image 1336 if (self.options.zoomType === 'lens') { 1337 self.zoomLens.css('background-image', 'url("' + largeimage + '")'); 1338 } 1339 if (self.options.zoomType === 'window') { 1340 self.zoomWindow.css('background-image', 'url("' + largeimage + '")'); 1341 } 1342 if (self.options.zoomType === 'inner') { 1343 self.zoomWindow.css('background-image', 'url("' + largeimage + '")'); 1344 } 1345 1346 self.currentImage = largeimage; 1347 1348 if (self.options.imageCrossfade) { 1349 var oldImg = self.$elem; 1350 var newImg = oldImg.clone(); 1351 self.$elem.attr('src', smallimage); 1352 self.$elem.after(newImg); 1353 newImg.stop(true).fadeOut(self.options.imageCrossfade, function () { 1354 $(this).remove(); 1355 }); 1356 1357 // if(self.options.zoomType === 'inner'){ 1358 //remove any attributes on the cloned image so we can resize later 1359 self.$elem.width('auto').removeAttr('width'); 1360 self.$elem.height('auto').removeAttr('height'); 1361 // } 1362 1363 oldImg.fadeIn(self.options.imageCrossfade); 1364 1365 if (self.options.tint && self.options.zoomType !== 'inner') { 1366 1367 var oldImgTint = self.zoomTintImage; 1368 var newImgTint = oldImgTint.clone(); 1369 self.zoomTintImage.attr('src', largeimage); 1370 self.zoomTintImage.after(newImgTint); 1371 newImgTint.stop(true).fadeOut(self.options.imageCrossfade, function () { 1372 $(this).remove(); 1373 }); 1374 1375 oldImgTint.fadeIn(self.options.imageCrossfade); 1376 1377 //self.zoomTintImage.attr('width',elem.data('image')); 1378 1379 //resize the tint window 1380 self.zoomTint.css({ 1381 height: elemHeight, 1382 width: elemWidth 1383 }); 1384 } 1385 1386 self.zoomContainer.css({ 1387 'height': elemHeight, 1388 'width': elemWidth 1389 }); 1390 1391 if (self.options.zoomType === 'inner') { 1392 if (!self.options.constrainType) { 1393 self.zoomWrap.parent().css({ 1394 'height': elemHeight, 1395 'width': elemWidth 1396 }); 1397 1398 self.zoomWindow.css({ 1399 'height': elemHeight, 1400 'width': elemWidth 1401 }); 1402 } 1403 } 1404 1405 if (self.options.imageCrossfade) { 1406 self.zoomWrap.css({ 1407 'height': elemHeight, 1408 'width': elemWidth 1409 }); 1410 } 1411 } 1412 else { 1413 self.$elem.attr('src', smallimage); 1414 if (self.options.tint) { 1415 self.zoomTintImage.attr('src', largeimage); 1416 //self.zoomTintImage.attr('width',elem.data('image')); 1417 self.zoomTintImage.attr('height', elemHeight); 1418 //self.zoomTintImage.attr('src') = elem.data('image'); 1419 self.zoomTintImage.css('height', elemHeight); 1420 self.zoomTint.css('height', elemHeight); 1421 1422 } 1423 self.zoomContainer.css({ 1424 'height': elemHeight, 1425 'width': elemWidth 1426 }); 1427 1428 if (self.options.imageCrossfade) { 1429 self.zoomWrap.css({ 1430 'height': elemHeight, 1431 'width': elemWidth 1432 }); 1433 } 1434 } 1435 if (self.options.constrainType) { 1436 1437 //This will contrain the image proportions 1438 if (self.options.constrainType === 'height') { 1439 1440 var autoWDimension = { 1441 'height': self.options.constrainSize, 1442 'width': 'auto' 1443 }; 1444 self.zoomContainer.css(autoWDimension); 1445 1446 if (self.options.imageCrossfade) { 1447 self.zoomWrap.css(autoWDimension); 1448 self.constwidth = self.zoomWrap.width(); 1449 } 1450 else { 1451 self.$elem.css(autoWDimension); 1452 self.constwidth = elemWidth; 1453 } 1454 1455 var constWDim = { 1456 'height': self.options.constrainSize, 1457 'width': self.constwidth 1458 }; 1459 if (self.options.zoomType === 'inner') { 1460 1461 self.zoomWrap.parent().css(constWDim); 1462 self.zoomWindow.css(constWDim); 1463 } 1464 if (self.options.tint) { 1465 self.tintContainer.css(constWDim); 1466 self.zoomTint.css(constWDim); 1467 self.zoomTintImage.css(constWDim); 1468 } 1469 1470 } 1471 if (self.options.constrainType === 'width') { 1472 var autoHDimension = { 1473 'height': 'auto', 1474 'width': self.options.constrainSize 1475 }; 1476 self.zoomContainer.css(autoHDimension); 1477 1478 if (self.options.imageCrossfade) { 1479 self.zoomWrap.css(autoHDimension); 1480 self.constheight = self.zoomWrap.height(); 1481 } 1482 else { 1483 self.$elem.css(autoHDimension); 1484 self.constheight = elemHeight; 1485 } 1486 1487 var constHDim = { 1488 'height': self.constheight, 1489 'width': self.options.constrainSize 1490 }; 1491 if (self.options.zoomType === 'inner') { 1492 self.zoomWrap.parent().css(constHDim); 1493 self.zoomWindow.css(constHDim); 1494 } 1495 if (self.options.tint) { 1496 self.tintContainer.css(constHDim); 1497 self.zoomTint.css(constHDim); 1498 self.zoomTintImage.css(constHDim); 1499 } 1500 } 1501 } 1502 }, 1503 1504 doneCallback: function () { 1505 var self = this; 1506 if (self.options.loadingIcon && !!self.spinner && !!self.spinner.length) { 1507 self.spinner.hide(); 1508 } 1509 1510 self.nzOffset = self.$elem.offset(); 1511 self.nzWidth = self.$elem.width(); 1512 self.nzHeight = self.$elem.height(); 1513 1514 // reset the zoomlevel back to default 1515 self.currentZoomLevel = self.options.zoomLevel; 1516 1517 //ratio of the large to small image 1518 self.widthRatio = self.largeWidth / self.nzWidth; 1519 self.heightRatio = self.largeHeight / self.nzHeight; 1520 1521 //NEED TO ADD THE LENS SIZE FOR ROUND 1522 // adjust images less than the window height 1523 if (self.options.zoomType === 'window') { 1524 1525 if (self.nzHeight < self.options.zoomWindowHeight / self.heightRatio) { 1526 self.lensHeight = self.nzHeight; 1527 1528 } 1529 else { 1530 self.lensHeight = String((self.options.zoomWindowHeight / self.heightRatio)); 1531 } 1532 1533 if (self.nzWidth < self.options.zoomWindowWidth) { 1534 self.lensWidth = self.nzWidth; 1535 } 1536 else { 1537 self.lensWidth = (self.options.zoomWindowWidth / self.widthRatio); 1538 } 1539 1540 if (self.zoomLens) { 1541 self.zoomLens.css({ 1542 'width': self.lensWidth, 1543 'height': self.lensHeight 1544 }); 1545 } 1546 } 1547 }, 1548 1549 getCurrentImage: function () { 1550 var self = this; 1551 return self.zoomImage; 1552 }, 1553 1554 getGalleryList: function () { 1555 var self = this; 1556 //loop through the gallery options and set them in list for fancybox 1557 self.gallerylist = []; 1558 if (self.options.gallery) { 1559 $('#' + self.options.gallery + ' a').each(function () { 1560 1561 var imgSrc = ''; 1562 if ($(this).data(self.options.attrImageZoomSrc)) { 1563 imgSrc = $(this).data(self.options.attrImageZoomSrc); 1564 } 1565 else if ($(this).data('image')) { 1566 imgSrc = $(this).data('image'); 1567 } 1568 //put the current image at the start 1569 if (imgSrc === self.zoomImage) { 1570 self.gallerylist.unshift({ 1571 href: '' + imgSrc + '', 1572 title: $(this).find('img').attr('title') 1573 }); 1574 } 1575 else { 1576 self.gallerylist.push({ 1577 href: '' + imgSrc + '', 1578 title: $(this).find('img').attr('title') 1579 }); 1580 } 1581 }); 1582 } 1583 //if no gallery - return current image 1584 else { 1585 self.gallerylist.push({ 1586 href: '' + self.zoomImage + '', 1587 title: $(this).find('img').attr('title') 1588 }); 1589 } 1590 return self.gallerylist; 1591 }, 1592 1593 changeZoomLevel: function (value) { 1594 var self = this; 1595 1596 //flag a zoom, so can adjust the easing during setPosition 1597 self.scrollingLock = true; 1598 1599 //round to two decimal places 1600 self.newvalue = parseFloat(value).toFixed(2); 1601 var newvalue = self.newvalue; 1602 1603 //maxwidth & Maxheight of the image 1604 var maxheightnewvalue = self.largeHeight / ((self.options.zoomWindowHeight / self.nzHeight) * self.nzHeight); 1605 var maxwidthtnewvalue = self.largeWidth / ((self.options.zoomWindowWidth / self.nzWidth) * self.nzWidth); 1606 1607 //calculate new heightratio
1608 if (self.options.zoomType !== 'inner') { 1609 if (maxheightnewvalue <= newvalue) { 1610 self.heightRatio = (self.largeHeight / maxheightnewvalue) / self.nzHeight; 1611 self.newvalueheight = maxheightnewvalue; 1612 self.fullheight = true; 1613 } 1614 else { 1615 self.heightRatio = (self.largeHeight / newvalue) / self.nzHeight; 1616 self.newvalueheight = newvalue; 1617 self.fullheight = false; 1618 } 1619 1620 // calculate new width ratio 1621 1622 if (maxwidthtnewvalue <= newvalue) { 1623 self.widthRatio = (self.largeWidth / maxwidthtnewvalue) / self.nzWidth; 1624 self.newvaluewidth = maxwidthtnewvalue; 1625 self.fullwidth = true; 1626 } 1627 else { 1628 self.widthRatio = (self.largeWidth / newvalue) / self.nzWidth; 1629 self.newvaluewidth = newvalue; 1630 self.fullwidth = false; 1631 } 1632 if (self.options.zoomType === 'lens') { 1633 if (maxheightnewvalue <= newvalue) { 1634 self.fullwidth = true; 1635 self.newvaluewidth = maxheightnewvalue; 1636 } else { 1637 self.widthRatio = (self.largeWidth / newvalue) / self.nzWidth; 1638 self.newvaluewidth = newvalue; 1639 1640 self.fullwidth = false; 1641 } 1642 } 1643 } 1644 1645 if (self.options.zoomType === 'inner') { 1646 maxheightnewvalue = parseFloat(self.largeHeight / self.nzHeight).toFixed(2); 1647 maxwidthtnewvalue = parseFloat(self.largeWidth / self.nzWidth).toFixed(2); 1648 if (newvalue > maxheightnewvalue) { 1649 newvalue = maxheightnewvalue; 1650 } 1651 if (newvalue > maxwidthtnewvalue) { 1652 newvalue = maxwidthtnewvalue; 1653 } 1654 1655 if (maxheightnewvalue <= newvalue) { 1656 self.heightRatio = (self.largeHeight / newvalue) / self.nzHeight; 1657 if (newvalue > maxheightnewvalue) { 1658 self.newvalueheight = maxheightnewvalue; 1659 } else { 1660 self.newvalueheight = newvalue; 1661 } 1662 self.fullheight = true; 1663 } 1664 else { 1665 self.heightRatio = (self.largeHeight / newvalue) / self.nzHeight; 1666 1667 if (newvalue > maxheightnewvalue) { 1668 1669 self.newvalueheight = maxheightnewvalue; 1670 } else { 1671 self.newvalueheight = newvalue; 1672 } 1673 self.fullheight = false; 1674 } 1675 1676 if (maxwidthtnewvalue <= newvalue) { 1677 1678 self.widthRatio = (self.largeWidth / newvalue) / self.nzWidth; 1679 if (newvalue > maxwidthtnewvalue) { 1680 1681 self.newvaluewidth = maxwidthtnewvalue; 1682 } else { 1683 self.newvaluewidth = newvalue; 1684 } 1685 1686 self.fullwidth = true; 1687 } 1688 else { 1689 self.widthRatio = (self.largeWidth / newvalue) / self.nzWidth; 1690 self.newvaluewidth = newvalue; 1691 self.fullwidth = false; 1692 } 1693 } //end inner 1694 var scrcontinue = false; 1695 1696 if (self.options.zoomType === 'inner') { 1697 if (self.nzWidth >= self.nzHeight) { 1698 if (self.newvaluewidth <= maxwidthtnewvalue) { 1699 scrcontinue = true; 1700 } 1701 else { 1702 scrcontinue = false; 1703 self.fullheight = true; 1704 self.fullwidth = true; 1705 } 1706 } 1707 if (self.nzHeight > self.nzWidth) { 1708 if (self.newvaluewidth <= maxwidthtnewvalue) { 1709 scrcontinue = true; 1710 } 1711 else { 1712 scrcontinue = false;
1713 self.fullheight = true; 1714 self.fullwidth = true; 1715 } 1716 } 1717 } 1718 1719 if (self.options.zoomType !== 'inner') { 1720 scrcontinue = true; 1721 } 1722 1723 if (scrcontinue) { 1724 self.zoomLock = 0; 1725 self.changeZoom = true; 1726 1727 //if lens height is less than image height 1728 if (((self.options.zoomWindowHeight) / self.heightRatio) <= self.nzHeight) { 1729 self.currentZoomLevel = self.newvalueheight; 1730 if (self.options.zoomType !== 'lens' && self.options.zoomType !== 'inner') { 1731 self.changeBgSize = true; 1732 self.zoomLens.css('height', String(self.options.zoomWindowHeight / self.heightRatio) + 'px'); 1733 } 1734 if (self.options.zoomType === 'lens' || self.options.zoomType === 'inner') { 1735 self.changeBgSize = true; 1736 } 1737 } 1738 1739 if ((self.options.zoomWindowWidth / self.widthRatio) <= self.nzWidth) { 1740 if (self.options.zoomType !== 'inner') { 1741 if (self.newvaluewidth > self.newvalueheight) { 1742 self.currentZoomLevel = self.newvaluewidth; 1743 } 1744 } 1745 1746 if (self.options.zoomType !== 'lens' && self.options.zoomType !== 'inner') { 1747 self.changeBgSize = true; 1748 1749 self.zoomLens.css('width', String(self.options.zoomWindowWidth / self.widthRatio) + 'px'); 1750 } 1751 if (self.options.zoomType === 'lens' || self.options.zoomType === 'inner') { 1752 self.changeBgSize = true; 1753 } 1754 1755 } 1756 if (self.options.zoomType === 'inner') { 1757 self.changeBgSize = true; 1758 1759 if (self.nzWidth > self.nzHeight) { 1760 self.currentZoomLevel = self.newvaluewidth; 1761 } 1762 else if (self.nzHeight >= self.nzWidth) { 1763 self.currentZoomLevel = self.newvaluewidth; 1764 } 1765 } 1766 } //under 1767 1768 //sets the boundry change, called in setWindowPos 1769 self.setPosition(self.currentLoc); 1770 // 1771 }, 1772 1773 closeAll: function () { 1774 var self = this; 1775 if (self.zoomWindow) { 1776 self.zoomWindow.hide(); 1777 } 1778 if (self.zoomLens) { 1779 self.zoomLens.hide(); 1780 } 1781 if (self.zoomTint) { 1782 self.zoomTint.hide(); 1783 } 1784 }, 1785 1786 changeState: function (value) { 1787 var self = this; 1788 if (value === 'enable') { 1789 self.options.zoomEnabled = true; 1790 } 1791 if (value === 'disable') { 1792 self.options.zoomEnabled = false; 1793 } 1794 }, 1795 1796 responsiveConfig: function (options) { 1797 if (options.respond && options.respond.length > 0) { 1798 return $.extend({}, options, this.configByScreenWidth(options)); 1799 } 1800 return options; 1801 }, 1802 1803 configByScreenWidth: function (options) { 1804 var screenWidth = $(window).width(); 1805 1806 var config = $.grep(options.respond, function (item) { 1807 var range = item.range.split('-'); 1808 return (screenWidth >= range[0]) && (screenWidth <= range[1]); 1809 }); 1810 1811 if (config.length > 0) { 1812 return config[0]; 1813 } else { 1814 return options; 1815 } 1816 } 1817 }; 1818 1819 $.fn.ezPlus = function (options) { 1820 return this.each(function () { 1821 var elevate = Object.create(EZP); 1822 1823 elevate.init(options, this); 1824 1825 $.data(this, 'ezPlus', elevate); 1826 1827 }); 1828 }; 1829 1830 $.fn.ezPlus.options = { 1831 attrImageZoomSrc: 'zoom-image', // attribute to plugin use for zoom 1832 borderColour: '#888', 1833 borderSize: 4, 1834 constrainSize: false, //in pixels the dimensions you want to constrain on 1835 constrainType: false, //width or height 1836 containLensZoom: false, 1837 cursor: 'inherit', // user should set to what they want the cursor as, if they have set a click function 1838 debug: false, 1839 easing: false,
1840 easingAmount: 12, 1841 enabled: true, 1842 1843 gallery: false, 1844 galleryActiveClass: 'zoomGalleryActive', 1845 gallerySelector: false, 1846 galleryItem: 'a', 1847 1848 imageCrossfade: false, 1849 1850 lensBorderColour: '#000', 1851 lensBorderSize: 1, 1852 lensColour: 'white', //colour of the lens background 1853 lensFadeIn: false, 1854 lensFadeOut: false, 1855 lensOpacity: 0.4, //opacity of the lens 1856 lensShape: 'square', //can be 'round' 1857 lensSize: 200, 1858 lenszoom: false, 1859 1860 loadingIcon: false, //http://www.example.com/spinner.gif 1861 1862 // This change will allow to decide if you want to decrease 1863 // zoom of one of the dimensions once the other reached it's top value, 1864 // or keep the aspect ratio, default behaviour still being as always, 1865 // allow to continue zooming out, so it keeps retrocompatibility. 1866 mantainZoomAspectRatio: false, 1867 maxZoomLevel: false, 1868 minZoomLevel: false, 1869 1870 onComplete: $.noop, 1871 onDestroy: $.noop, 1872 onImageClick: $.noop, 1873 onImageSwap: $.noop, 1874 onImageSwapComplete: $.noop, 1875 onShow: $.noop, 1876 onZoomedImageLoaded: $.noop, 1877 1878 preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION) 1879 respond: [], 1880 responsive: true, 1881 scrollZoom: false, //allow zoom on mousewheel, true to activate 1882 scrollZoomIncrement: 0.1, //steps of the scrollzoom 1883 showLens: true, 1884 tint: false, //enable the tinting 1885 tintColour: '#333', //default tint color, can be anything, red, #ccc, rgb(0,0,0) 1886 tintOpacity: 0.4, //opacity of the tint 1887 touchEnabled: true, 1888 1889 zoomActivation: 'hover', // Can also be click (PLACEHOLDER FOR NEXT VERSION) 1890 zoomContainerAppendTo: 'body', //zoom container parent selector 1891 zoomId: -1, // identifier for the zoom container 1892 zoomLevel: 1, //default zoom level of image 1893 zoomTintFadeIn: false, 1894 zoomTintFadeOut: false, 1895 zoomType: 'window', //window is default, also 'lens' available - 1896 zoomWindowAlwaysShow: false, 1897 zoomWindowBgColour: '#fff', 1898 zoomWindowFadeIn: false, 1899 zoomWindowFadeOut: false, 1900 zoomWindowHeight: 400, 1901 zoomWindowOffsetX: 0, 1902 zoomWindowOffsetY: 0, 1903 zoomWindowPosition: 1, //Possible values: 1-16, but we can also position with a selector string. 1904 zoomWindowWidth: 400, 1905 zoomEnabled: true, //false disables zoomwindow from showing 1906 zIndex: 999 1907 }; 1908 1909})(jQuery, window, document);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.