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