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: 1;' + 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) { //modified by pinger 518 519 //scrolling down 520 521 //Check if it has to maintain original zoom window aspect ratio or not 522 if ((!self.fullheight && !self.fullwidth) || !self.options.mantainZoomAspectRatio) { 523 if (self.options.maxZoomLevel) { 524 if (self.currentZoomLevel <= self.options.maxZoomLevel) { 525 self.changeZoomLevel(parseFloat(self.currentZoomLevel) + self.options.scrollZoomIncrement); 526 } 527 } 528 else { 529 //andy 530 self.changeZoomLevel(parseFloat(self.currentZoomLevel) + self.options.scrollZoomIncrement); 531 } 532 } 533 } 534 else { 535 //scrolling up 536 if (self.currentZoomLevel >= self.minZoomLevel) { 537 self.changeZoomLevel(self.currentZoomLevel - self.options.scrollZoomIncrement); 538 } 539 } 540 return false;
541 }); 542 } 543 }, 544 destroy: function () { 545 var self = this; 546 self.$elem.unbind('ezpspace'); 547 $(self.zoomContainer).remove(); 548 if (self.options.loadingIcon && !!self.spinner && !!self.spinner.length) { 549 self.spinner.remove(); 550 delete self.spinner; 551 } 552 }, 553 getIdentifier: function () { 554 var self = this; 555 return self.options.zoomId; 556 }, 557 setElements: function (type) { 558 var self = this; 559 if (!self.options.zoomEnabled) { 560 return false; 561 } 562 if (type === 'show') { 563 if (self.isWindowSet) { 564 if (self.options.zoomType === 'inner') { 565 self.showHideWindow('show'); 566 } 567 if (self.options.zoomType === 'window') { 568 self.showHideWindow('show'); 569 } 570 if (self.options.showLens) { 571 self.showHideLens('show'); 572 } 573 if (self.options.tint && self.options.zoomType !== 'inner') { 574 self.showHideTint('show'); 575 } 576 } 577 } 578 579 if (type === 'hide') { 580 if (self.options.zoomType === 'window') { 581 self.showHideWindow('hide'); 582 } 583 if (!self.options.tint) { 584 self.showHideWindow('hide'); 585 } 586 if (self.options.showLens) { 587 self.showHideLens('hide'); 588 } 589 if (self.options.tint) { 590 self.showHideTint('hide'); 591 } 592 } 593 }, 594 setPosition: function (e) { 595 596 var self = this; 597 598 if (!self.options.zoomEnabled) { 599 return false; 600 } 601 602 //recaclc offset each time in case the image moves 603 //this can be caused by other on page elements 604 self.nzHeight = self.$elem.height(); 605 self.nzWidth = self.$elem.width(); 606 self.nzOffset = self.$elem.offset(); 607 608 if (self.options.tint && self.options.zoomType !== 'inner') { 609 self.zoomTint.css({ 610 top: 0, 611 left: 0 612 }); 613 } 614 //set responsive 615 //will checking if the image needs changing before running this code work faster? 616 if (self.options.responsive && !self.options.scrollZoom) { 617 if (self.options.showLens) { 618 var lensHeight, lensWidth; 619 if (self.nzHeight < self.options.zoomWindowWidth / self.widthRatio) { 620 self.lensHeight = self.nzHeight; 621 } 622 else { 623 self.lensHeight = String((self.options.zoomWindowHeight / self.heightRatio)); 624 } 625 if (self.largeWidth < self.options.zoomWindowWidth) { 626 self.lensWidth = self.nzWidth; 627 } 628 else { 629 self.lensWidth = (self.options.zoomWindowWidth / self.widthRatio); 630 } 631 self.widthRatio = self.largeWidth / self.nzWidth; 632 self.heightRatio = self.largeHeight / self.nzHeight; 633 if (self.options.zoomType !== 'lens') { 634 //possibly dont need to keep recalcalculating 635 //if the lens is heigher than the image, then set lens size to image size 636 if (self.nzHeight < self.options.zoomWindowWidth / self.widthRatio) { 637 self.lensHeight = self.nzHeight; 638 639 } 640 else { 641 self.lensHeight = String((self.options.zoomWindowHeight / self.heightRatio)); 642 } 643 644 if (self.nzWidth < self.options.zoomWindowHeight / self.heightRatio) { 645 self.lensWidth = self.nzWidth; 646 } 647 else { 648 self.lensWidth = String((self.options.zoomWindowWidth / self.widthRatio)); 649 } 650 651 self.zoomLens.css({ 652 'width': self.lensWidth, 653 'height': self.lensHeight 654 }); 655 656 if (self.options.tint) { 657 self.zoomTintImage.css({ 658 'width': self.nzWidth, 659 'height': self.nzHeight 660 }); 661 } 662 663 } 664 if (self.options.zoomType === 'lens') { 665 self.zoomLens.css({ 666 width: String(self.options.lensSize) + 'px', 667 height: String(self.options.lensSize) + 'px' 668 }); 669 } 670 //end responsive image change 671 } 672 } 673 674 //container fix 675 self.zoomContainer.css({ 676 // top: self.nzOffset.top, //original 677 top: '0px', 678 // left: self.nzOffset.left, //original 679 left: '0px', 680 width: self.nzWidth, // new code 681 height: self.nzHeight // new code 682 }); 683 self.mouseLeft = parseInt(e.pageX - self.nzOffset.left); 684 self.mouseTop = parseInt(e.pageY - self.nzOffset.top); 685 //calculate the Location of the Lens 686 687 //calculate the bound regions - but only if zoom window 688 if (self.options.zoomType === 'window') { 689 var zoomLensHeight = self.zoomLens.height() / 2; 690 var zoomLensWidth = self.zoomLens.width() / 2; 691 self.Etoppos = (self.mouseTop < 0 + zoomLensHeight); 692 self.Eboppos = (self.mouseTop > self.nzHeight - zoomLensHeight - (self.options.lensBorderSize * 2)); 693 self.Eloppos = (self.mouseLeft < 0 + zoomLensWidth); 694 self.Eroppos = (self.mouseLeft > (self.nzWidth - zoomLensWidth - (self.options.lensBorderSize * 2))); 695 } 696 //calculate the bound regions - but only for inner zoom 697 if (self.options.zoomType === 'inner') { 698 self.Etoppos = (self.mouseTop < ((self.nzHeight / 2) / self.heightRatio)); 699 self.Eboppos = (self.mouseTop > (self.nzHeight - ((self.nzHeight / 2) / self.heightRatio))); 700 self.Eloppos = (self.mouseLeft < 0 + (((self.nzWidth / 2) / self.widthRatio))); 701 self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.nzWidth / 2) / self.widthRatio - (self.options.lensBorderSize * 2))); 702 } 703 704 // if the mouse position of the slider is one of the outerbounds, then hide window and lens 705 if (self.mouseLeft < 0 || self.mouseTop < 0 || self.mouseLeft > self.nzWidth || self.mouseTop > self.nzHeight) { 706 self.setElements('hide'); 707 return; 708 } 709 //else continue with operations 710 else { 711 //lens options 712 if (self.options.showLens) { 713 // self.showHideLens('show'); 714 //set background position of lens 715 self.lensLeftPos = String(Math.floor(self.mouseLeft - self.zoomLens.width() / 2)); 716 self.lensTopPos = String(Math.floor(self.mouseTop - self.zoomLens.height() / 2)); 717 } 718 //adjust the background position if the mouse is in one of the outer regions 719 720 //Top region 721 if (self.Etoppos) { 722 self.lensTopPos = 0; 723 } 724 //Left Region 725 if (self.Eloppos) { 726 self.windowLeftPos = 0; 727 self.lensLeftPos = 0; 728 self.tintpos = 0; 729 } 730 //Set bottom and right region for window mode 731 if (self.options.zoomType === 'window') { 732 if (self.Eboppos) { 733 self.lensTopPos = Math.max((self.nzHeight) - self.zoomLens.height() - (self.options.lensBorderSize * 2), 0); 734 } 735 if (self.Eroppos) { 736 self.lensLeftPos = (self.nzWidth - (self.zoomLens.width())
736- (self.options.lensBorderSize * 2)); 737 } 738 } 739 //Set bottom and right region for inner mode 740 if (self.options.zoomType === 'inner') { 741 if (self.Eboppos) { 742 self.lensTopPos = Math.max(((self.nzHeight) - (self.options.lensBorderSize * 2)), 0); 743 } 744 if (self.Eroppos) { 745 self.lensLeftPos = (self.nzWidth - (self.nzWidth) - (self.options.lensBorderSize * 2)); 746 } 747 } 748 //if lens zoom 749 if (self.options.zoomType === 'lens') { 750 751 self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomLens.width() / 2) * (-1)); 752 self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomLens.height() / 2) * (-1)); 753 self.zoomLens.css('background-position', self.windowLeftPos + 'px ' + self.windowTopPos + 'px'); 754 755 if (self.changeBgSize) { 756 if (self.nzHeight > self.nzWidth) { 757 if (self.options.zoomType === 'lens') { 758 self.zoomLens.css('background-size', 759 self.largeWidth / self.newvalueheight + 'px ' + 760 self.largeHeight / self.newvalueheight + 'px'); 761 } 762 763 self.zoomWindow.css('background-size', 764 self.largeWidth / self.newvalueheight + 'px ' + 765 self.largeHeight / self.newvalueheight + 'px'); 766 } 767 else { 768 if (self.options.zoomType === 'lens') { 769 self.zoomLens.css('background-size', 770 self.largeWidth / self.newvaluewidth + 'px ' + 771 self.largeHeight / self.newvaluewidth + 'px'); 772 } 773 self.zoomWindow.css('background-size', 774 self.largeWidth / self.newvaluewidth + 'px ' + 775 self.largeHeight / self.newvaluewidth + 'px'); 776 } 777 self.changeBgSize = false; 778 } 779 780 self.setWindowPosition(e); 781 } 782 //if tint zoom 783 if (self.options.tint && self.options.zoomType !== 'inner') { 784 self.setTintPosition(e); 785 } 786 //set the css background position 787 if (self.options.zoomType === 'window') { 788 self.setWindowPosition(e); 789 } 790 if (self.options.zoomType === 'inner') { 791 self.setWindowPosition(e); 792 } 793 if (self.options.showLens) { 794 if (self.fullwidth && self.options.zoomType !== 'lens') { 795 self.lensLeftPos = 0; 796 } 797 self.zoomLens.css({ 798 left: self.lensLeftPos + 'px', 799 top: self.lensTopPos + 'px' 800 }); 801 } 802 803 } //end else 804 }, 805 showHideZoomContainer: function (change) { 806 var self = this; 807 if (change === 'show') { 808 if (self.zoomContainer) { 809 self.zoomContainer.show(); 810 } 811 } 812 if (change === 'hide') { 813 if (self.zoomContainer) { 814 self.zoomContainer.hide(); 815 } 816 } 817 }, 818 showHideWindow: function (change) { 819 var self = this; 820 if (change === 'show') { 821 if (!self.isWindowActive && self.zoomWindow) { 822 self.options.onShow(self); 823 if (self.options.zoomWindowFadeIn) { 824 self.zoomWindow.stop(true, true, false).fadeIn(self.options.zoomWindowFadeIn); 825 } 826 else { 827 self.zoomWindow.show(); 828 } 829 self.isWindowActive = true; 830 } 831 } 832 if (change === 'hide') { 833 if (self.isWindowActive) { 834 if (self.options.zoomWindowFadeOut) { 835 self.zoomWindow.stop(true, true).fadeOut(self.options.zoomWindowFadeOut, function () { 836 if (self.loop) { 837 //stop moving the zoom window when zoom window is faded out 838 clearInterval(self.loop); 839 self.loop = false;
840 } 841 }); 842 } 843 else { 844 self.zoomWindow.hide(); 845 } 846 self.isWindowActive = false; 847 } 848 } 849 }, 850 showHideLens: function (change) { 851 var self = this; 852 if (change === 'show') { 853 if (!self.isLensActive) { 854 if (self.options.lensFadeIn && self.zoomLens) { 855 self.zoomLens.stop(true, true, false).fadeIn(self.options.lensFadeIn); 856 } 857 else { 858 self.zoomLens.show(); 859 } 860 self.isLensActive = true; 861 } 862 } 863 if (change === 'hide') { 864 if (self.isLensActive) { 865 if (self.options.lensFadeOut) { 866 self.zoomLens.stop(true, true).fadeOut(self.options.lensFadeOut); 867 } 868 else { 869 self.zoomLens.hide(); 870 } 871 self.isLensActive = false; 872 } 873 } 874 }, 875 showHideTint: function (change) { 876 var self = this; 877 if (change === 'show') { 878 if (!self.isTintActive && self.zoomTint) { 879 880 if (self.options.zoomTintFadeIn) { 881 self.zoomTint.css('opacity', self.options.tintOpacity).animate().stop(true, true).fadeIn('slow'); 882 } 883 else { 884 self.zoomTint.css('opacity', self.options.tintOpacity).animate(); 885 self.zoomTint.show(); 886 } 887 self.isTintActive = true; 888 } 889 } 890 if (change === 'hide') { 891 if (self.isTintActive) { 892 893 if (self.options.zoomTintFadeOut) { 894 self.zoomTint.stop(true, true).fadeOut(self.options.zoomTintFadeOut); 895 } 896 else { 897 self.zoomTint.hide(); 898 } 899 self.isTintActive = false; 900 } 901 } 902 }, 903 904 setLensPosition: function (e) { 905 }, 906 907 setWindowPosition: function (e) { 908 //return obj.slice( 0, count ); 909 var self = this; 910 911 if (!isNaN(self.options.zoomWindowPosition)) { 912 913 switch (self.options.zoomWindowPosition) { 914 case 1: //done 915 self.windowOffsetTop = (self.options.zoomWindowOffsetY);//DONE - 1 916 self.windowOffsetLeft = (+self.nzWidth); //DONE 1, 2, 3, 4, 16 917 break; 918 case 2: 919 if (self.options.zoomWindowHeight > self.nzHeight) { //positive margin 920 921 self.windowOffsetTop = ((self.options.zoomWindowHeight / 2) - (self.nzHeight / 2)) * (-1); 922 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 923 } 924 else { //negative margin 925 $.noop(); 926 } 927 break; 928 case 3: //done 929 self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize * 2)); //DONE 3,9 930 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 931 break; 932 case 4: //done 933 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 934 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 935 break; 936 case 5: //done 937 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 938 self.windowOffsetLeft = (self.nzWidth - self.zoomWindow.width() - (self.options.borderSize * 2)); //DONE - 5,15 939 break; 940 case 6: 941 if (self.options.zoomWindowHeight > self.nzHeight) { //positive margin 942 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 943 944 self.windowOffsetLeft = ((self.options.zoomWindowWidth / 2) - (self.nzWidth / 2) + (self.options.borderSize * 2)) * (-1); 945 } 946 else { //negative margin 947 $.noop(); 948 } 949 950 break; 951 case 7: //done 952 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 953 self.windowOffsetLeft = 0; //DONE 7, 13 954 break; 955 case 8: //done 956 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 957 self.windowOffsetLeft = (self.zoomWindow.width() + (self.options.borderSize * 2)) * (-1);
957 //DONE 8,9,10,11,12 958 break; 959 case 9: //done 960 self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize * 2)); //DONE 3,9 961 self.windowOffsetLeft = (self.zoomWindow.width() + (self.options.borderSize * 2)) * (-1); //DONE 8,9,10,11,12 962 break; 963 case 10: 964 if (self.options.zoomWindowHeight > self.nzHeight) { //positive margin 965 966 self.windowOffsetTop = ((self.options.zoomWindowHeight / 2) - (self.nzHeight / 2)) * (-1); 967 self.windowOffsetLeft = (self.zoomWindow.width() + (self.options.borderSize * 2)) * (-1); //DONE 8,9,10,11,12 968 } 969 else { //negative margin 970 $.noop(); 971 } 972 break; 973 case 11: 974 self.windowOffsetTop = (self.options.zoomWindowOffsetY); 975 self.windowOffsetLeft = (self.zoomWindow.width() + (self.options.borderSize * 2)) * (-1); //DONE 8,9,10,11,12 976 break; 977 case 12: //done 978 self.windowOffsetTop = (self.zoomWindow.height() + (self.options.borderSize * 2)) * (-1); //DONE 12,13,14,15,16 979 self.windowOffsetLeft = (self.zoomWindow.width() + (self.options.borderSize * 2)) * (-1); //DONE 8,9,10,11,12 980 break; 981 case 13: //done 982 self.windowOffsetTop = (self.zoomWindow.height() + (self.options.borderSize * 2)) * (-1); //DONE 12,13,14,15,16 983 self.windowOffsetLeft = (0); //DONE 7, 13 984 break; 985 case 14: 986 if (self.options.zoomWindowHeight > self.nzHeight) { //positive margin 987 self.windowOffsetTop = (self.zoomWindow.height() + (self.options.borderSize * 2)) * (-1); //DONE 12,13,14,15,16 988 989 self.windowOffsetLeft = ((self.options.zoomWindowWidth / 2) - (self.nzWidth / 2) + (self.options.borderSize * 2)) * (-1); 990 } 991 else { //negative margin 992 $.noop(); 993 } 994 break; 995 case 15://done 996 self.windowOffsetTop = (self.zoomWindow.height() + (self.options.borderSize * 2)) * (-1); //DONE 12,13,14,15,16 997 self.windowOffsetLeft = (self.nzWidth - self.zoomWindow.width() - (self.options.borderSize * 2)); //DONE - 5,15 998 break; 999 case 16: //done 1000 self.windowOffsetTop = (self.zoomWindow.height() + (self.options.borderSize * 2)) * (-1); //DONE 12,13,14,15,16 1001 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 1002 break; 1003 default: //done 1004 self.windowOffsetTop = (self.options.zoomWindowOffsetY);//DONE - 1 1005 self.windowOffsetLeft = (self.nzWidth); //DONE 1, 2, 3, 4, 16 1006 } 1007 } //end isNAN 1008 else { 1009 // For BC purposes, treat passed element as ID if element not found 1010 self.externalContainer = $(self.options.zoomWindowPosition); 1011 if (!self.externalContainer.length) { 1012 self.externalContainer = $('#' + self.options.zoomWindowPosition); 1013 } 1014 1015 self.externalContainerWidth = self.externalContainer.width(); 1016 self.externalContainerHeight = self.externalContainer.height(); 1017 self.externalContainerOffset = self.externalContainer.offset(); 1018 1019 self.windowOffsetTop = self.externalContainerOffset.top;//DONE - 1 1020 self.windowOffsetLeft = self.externalContainerOffset.left; //DONE 1, 2, 3, 4, 16 1021 1022 } 1023 self.isWindowSet = true; 1024 self.windowOffsetTop = self.windowOffsetTop + self.options.zoomWindowOffsetY; 1025 self.windowOffsetLeft = self.windowOffsetLeft + self.options.zoomWindowOffsetX; 1026 1027 self.zoomWindow.css({ 1028 top: self.windowOffsetTop, 1029 left: self.windowOffsetLeft 1030 }); 1031 1032 if (self.options.zoomType === 'inner') { 1033 self.zoomWindow.css({ 1034 top: 0, 1035 left: 0 1036 }); 1037 1038 } 1039 1040 self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1)); 1041 self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1)); 1042 if (self.Etoppos) { 1043 self.windowTopPos = 0; 1044 } 1045 if (self.Eloppos) { 1046 self.windowLeftPos = 0; 1047 } 1048 if (self.Eboppos) { 1049 self.windowTopPos = (self.largeHeight / self.currentZoomLevel - self.zoomWindow.height()) * (-1); 1050 } 1051 if (self.Eroppos) { 1052 self.windowLeftPos = ((self.largeWidth / self.currentZoomLevel - self.zoomWindow.width()) * (-1)); 1053 } 1054 1055 //stops micro movements 1056 if (self.fullheight) { 1057 self.windowTopPos = 0; 1058 } 1059 if (self.fullwidth) { 1060 self.windowLeftPos = 0; 1061 } 1062 1063 //set the css background position 1064 if (self.options.zoomType === 'window' || self.options.zoomType === 'inner') { 1065 1066 if (self.zoomLock === 1) { 1067 //overrides for images not zoomable 1068 if (self.widthRatio <= 1) { 1069 self.windowLeftPos = 0; 1070 } 1071 if (self.heightRatio <= 1) { 1072 self.windowTopPos = 0; 1073 } 1074 } 1075 // adjust images less than the window height 1076 1077 if (self.options.zoomType === 'window') { 1078 if (self.largeHeight < self.options.zoomWindowHeight) { 1079 self.windowTopPos = 0; 1080 } 1081 if (self.largeWidth < self.options.zoomWindowWidth) { 1082 self.windowLeftPos = 0; 1083 } 1084 } 1085 //set the zoomwindow background position 1086 if (self.options.easing) { 1087 1088 // if(self.changeZoom){ 1089 // clearInterval(self.loop); 1090 // self.changeZoom = false;
1091 // self.loop = false; 1092 1093 // } 1094 //set the pos to 0 if not set 1095 if (!self.xp) { 1096 self.xp = 0; 1097 } 1098 if (!self.yp) { 1099 self.yp = 0; 1100 } 1101 var interval = 16; 1102 if (Number.isInteger(parseInt(self.options.easing))){ 1103 interval = parseInt(self.options.easing); 1104 } 1105 //if loop not already started, then run it 1106 if (!self.loop) { 1107 self.loop = setInterval(function () { 1108 //using zeno's paradox 1109 1110 self.xp += (self.windowLeftPos - self.xp) / self.options.easingAmount; 1111 self.yp += (self.windowTopPos - self.yp) / self.options.easingAmount; 1112 if (self.scrollingLock) { 1113 1114 clearInterval(self.loop); 1115 self.xp = self.windowLeftPos; 1116 self.yp = self.windowTopPos; 1117 1118 self.xp = ((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1); 1119 self.yp = (((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1)); 1120 1121 if (self.changeBgSize) { 1122 if (self.nzHeight > self.nzWidth) { 1123 if (self.options.zoomType === 'lens') { 1124 self.zoomLens.css('background-size', 1125 self.largeWidth / self.newvalueheight + 'px ' + 1126 self.largeHeight / self.newvalueheight + 'px'); 1127 } 1128 self.zoomWindow.css('background-size', 1129 self.largeWidth / self.newvalueheight + 'px ' + 1130 self.largeHeight / self.newvalueheight + 'px'); 1131 } 1132 else { 1133 if (self.options.zoomType !== 'lens') { 1134 self.zoomLens.css('background-size', 1135 self.largeWidth / self.newvaluewidth + 'px ' + 1136 self.largeHeight / self.newvalueheight + 'px'); 1137 } 1138 self.zoomWindow.css('background-size', 1139 self.largeWidth / self.newvaluewidth + 'px ' + 1140 self.largeHeight / self.newvaluewidth + 'px'); 1141 } 1142 1143 /* 1144 if(!self.bgxp){self.bgxp = self.largeWidth/self.newvalue;} 1145 if(!self.bgyp){self.bgyp = self.largeHeight/self.newvalue ;} 1146 if (!self.bgloop){ 1147 self.bgloop = setInterval(function(){ 1148 1149 self.bgxp += (self.largeWidth/self.newvalue - self.bgxp) / self.options.easingAmount; 1150 self.bgyp += (self.largeHeight/self.newvalue - self.bgyp) / self.options.easingAmount; 1151 1152 self.zoomWindow.css('background-size', self.bgxp + 'px ' + self.bgyp + 'px' ); 1153 1154 1155 }, 16); 1156 1157 } 1158 */ 1159 self.changeBgSize = false; 1160 } 1161 1162 self.zoomWindow.css('background-position', self.windowLeftPos + 'px ' + self.windowTopPos + 'px'); 1163 self.scrollingLock = false;
1164 self.loop = false; 1165 1166 } 1167 else if (Math.round(Math.abs(self.xp - self.windowLeftPos) + Math.abs(self.yp - self.windowTopPos)) < 1) { 1168 //stops micro movements 1169 clearInterval(self.loop); 1170 self.zoomWindow.css('background-position', self.windowLeftPos + 'px ' + self.windowTopPos + 'px'); 1171 self.loop = false; 1172 } 1173 else { 1174 if (self.changeBgSize) { 1175 if (self.nzHeight > self.nzWidth) { 1176 if (self.options.zoomType === 'lens') { 1177 self.zoomLens.css('background-size', 1178 self.largeWidth / self.newvalueheight + 'px ' + 1179 self.largeHeight / self.newvalueheight + 'px'); 1180 } 1181 self.zoomWindow.css('background-size', 1182 self.largeWidth / self.newvalueheight + 'px ' + 1183 self.largeHeight / self.newvalueheight + 'px'); 1184 } 1185 else { 1186 if (self.options.zoomType !== 'lens') { 1187 self.zoomLens.css('background-size', 1188 self.largeWidth / self.newvaluewidth + 'px ' + 1189 self.largeHeight / self.newvaluewidth + 'px'); 1190 } 1191 self.zoomWindow.css('background-size', 1192 self.largeWidth / self.newvaluewidth + 'px ' + 1193 self.largeHeight / self.newvaluewidth + 'px'); 1194 } 1195 self.changeBgSize = false; 1196 } 1197 1198 self.zoomWindow.css('background-position', self.xp + 'px ' + self.yp + 'px'); 1199 } 1200 }, interval); 1201 } 1202 } 1203 else { 1204 if (self.changeBgSize) { 1205 if (self.nzHeight > self.nzWidth) { 1206 if (self.options.zoomType === 'lens') { 1207 self.zoomLens.css('background-size', 1208 self.largeWidth / self.newvalueheight + 'px ' + 1209 self.largeHeight / self.newvalueheight + 'px'); 1210 } 1211 1212 self.zoomWindow.css('background-size', 1213 self.largeWidth / self.newvalueheight + 'px ' + 1214 self.largeHeight / self.newvalueheight + 'px'); 1215 } 1216 else { 1217 if (self.options.zoomType === 'lens') { 1218 self.zoomLens.css('background-size', 1219 self.largeWidth / self.newvaluewidth + 'px ' + 1220 self.largeHeight / self.newvaluewidth + 'px'); 1221 } 1222 if ((self.largeHeight / self.newvaluewidth) < self.options.zoomWindowHeight) { 1223 1224 self.zoomWindow.css('background-size', 1225 self.largeWidth / self.newvaluewidth + 'px ' + 1226 self.largeHeight / self.newvaluewidth + 'px'); 1227 } 1228 else { 1229 1230 self.zoomWindow.css('background-size', 1231 self.largeWidth / self.newvalueheight + 'px ' + 1232 self.largeHeight / self.newvalueheight + 'px'); 1233 } 1234 1235 } 1236 self.changeBgSize = false;
1237 } 1238 1239 self.zoomWindow.css('background-position', 1240 self.windowLeftPos + 'px ' + 1241 self.windowTopPos + 'px'); 1242 } 1243 } 1244 }, 1245 1246 setTintPosition: function (e) { 1247 var self = this; 1248 var zoomLensWidth = self.zoomLens.width(); 1249 var zoomLensHeight = self.zoomLens.height(); 1250 self.nzOffset = self.$elem.offset(); 1251 self.tintpos = String(((e.pageX - self.nzOffset.left) - (zoomLensWidth / 2)) * (-1)); 1252 self.tintposy = String(((e.pageY - self.nzOffset.top) - zoomLensHeight / 2) * (-1)); 1253 if (self.Etoppos) { 1254 self.tintposy = 0; 1255 } 1256 if (self.Eloppos) { 1257 self.tintpos = 0; 1258 } 1259 if (self.Eboppos) { 1260 self.tintposy = (self.nzHeight - zoomLensHeight - (self.options.lensBorderSize * 2)) * (-1); 1261 } 1262 if (self.Eroppos) { 1263 self.tintpos = ((self.nzWidth - zoomLensWidth - (self.options.lensBorderSize * 2)) * (-1)); 1264 } 1265 if (self.options.tint) { 1266 //stops micro movements 1267 if (self.fullheight) { 1268 self.tintposy = 0; 1269 1270 } 1271 if (self.fullwidth) { 1272 self.tintpos = 0; 1273 1274 } 1275 self.zoomTintImage.css({ 1276 'left': self.tintpos + 'px', 1277 'top': self.tintposy + 'px' 1278 }); 1279 } 1280 }, 1281 1282 swaptheimage: function (smallimage, largeimage) { 1283 var self = this; 1284 var newImg = new Image(); 1285 1286 if (self.options.loadingIcon && !self.spinner) { 1287 var styleAttr = 'background: url(\'' + self.options.loadingIcon + '\') no-repeat center;' + 1288 'height:' + self.nzHeight + 'px;' + 1289 'width:' + self.nzWidth + 'px;' + 1290 'z-index: 2000;' + 1291 'position: absolute; ' + 1292 'background-position: center center;'; 1293 if (self.options.zoomType === 'inner') { 1294 styleAttr += 'top: 0px;'; 1295 }
1296 self.spinner = $('<div class="ezp-spinner" style="' + styleAttr + '"></div>'); 1297 self.$elem.after(self.spinner); 1298 } else if (self.spinner) { 1299 self.spinner.show(); 1300 } 1301 1302 self.options.onImageSwap(self.$elem); 1303 1304 newImg.onload = function () { 1305 self.largeWidth = newImg.width; 1306 self.largeHeight = newImg.height; 1307 self.zoomImage = largeimage; 1308 self.zoomWindow.css('background-size', self.largeWidth + 'px ' + self.largeHeight + 'px'); 1309 1310 self.swapAction(smallimage, largeimage); 1311 return; 1312 }; 1313 self.setImageSource(newImg, largeimage); // this must be done AFTER setting onload 1314 }, 1315 1316 swapAction: function (smallimage, largeimage) { 1317 var self = this; 1318 var elemWidth = self.$elem.width(); 1319 var elemHeight = self.$elem.height(); 1320 var newImg2 = new Image(); 1321 newImg2.onload = function () { 1322 //re-calculate values 1323 self.nzHeight = newImg2.height; 1324 self.nzWidth = newImg2.width; 1325 self.options.onImageSwapComplete(self.$elem); 1326 1327 self.doneCallback(); 1328 return; 1329 }; 1330 self.setImageSource(newImg2, smallimage); 1331 1332 //reset the zoomlevel to that initially set in options 1333 self.currentZoomLevel = self.options.zoomLevel; 1334 self.options.maxZoomLevel = false; 1335 1336 //swaps the main image 1337 //self.$elem.attr('src',smallimage); 1338 //swaps the zoom image 1339 if (self.options.zoomType === 'lens') { 1340 self.zoomLens.css('background-image', 'url("' + largeimage + '")'); 1341 } 1342 if (self.options.zoomType === 'window') { 1343 self.zoomWindow.css('background-image', 'url("' + largeimage + '")'); 1344 } 1345 if (self.options.zoomType === 'inner') { 1346 self.zoomWindow.css('background-image', 'url("' + largeimage + '")'); 1347 } 1348 1349 self.currentImage = largeimage; 1350 1351 if (self.options.imageCrossfade) { 1352 var oldImg = self.$elem; 1353 var newImg = oldImg.clone(); 1354 self.$elem.attr('src', smallimage); 1355 self.$elem.after(newImg); 1356 newImg.stop(true).fadeOut(self.options.imageCrossfade, function () { 1357 $(this).remove(); 1358 }); 1359 1360 // if(self.options.zoomType === 'inner'){ 1361 //remove any attributes on the cloned image so we can resize later 1362 self.$elem.width('auto').removeAttr('width'); 1363 self.$elem.height('auto').removeAttr('height'); 1364 // } 1365 1366 oldImg.fadeIn(self.options.imageCrossfade); 1367 1368 if (self.options.tint && self.options.zoomType !== 'inner') { 1369 1370 var oldImgTint = self.zoomTintImage; 1371 var newImgTint = oldImgTint.clone(); 1372 self.zoomTintImage.attr('src', largeimage); 1373 self.zoomTintImage.after(newImgTint); 1374 newImgTint.stop(true).fadeOut(self.options.imageCrossfade, function () { 1375 $(this).remove(); 1376 }); 1377 1378 oldImgTint.fadeIn(self.options.imageCrossfade); 1379 1380 //self.zoomTintImage.attr('width',elem.data('image')); 1381 1382 //resize the tint window 1383 self.zoomTint.css({ 1384 height: elemHeight, 1385 width: elemWidth 1386 }); 1387 } 1388 1389 self.zoomContainer.css({ 1390 'height': elemHeight, 1391 'width': elemWidth 1392 }); 1393 1394 if (self.options.zoomType === 'inner') { 1395 if (!self.options.constrainType) { 1396 self.zoomWrap.parent().css({ 1397 'height': elemHeight, 1398 'width': elemWidth 1399 }); 1400 1401 self.zoomWindow.css({ 1402 'height': elemHeight, 1403 'width': elemWidth 1404 }); 1405 } 1406 } 1407 1408 if (self.options.imageCrossfade) { 1409 self.zoomWrap.css({ 1410 'height': elemHeight, 1411 'width': elemWidth 1412 }); 1413 } 1414 } 1415 else { 1416 self.$elem.attr('src', smallimage); 1417 if (self.options.tint) { 1418 self.zoomTintImage.attr('src', largeimage); 1419 //self.zoomTintImage.attr('width',elem.data('image')); 1420 self.zoomTintImage.attr('height', elemHeight); 1421 //self.zoomTintImage.attr('src') = elem.data('image'); 1422 self.zoomTintImage.css('height', elemHeight); 1423 self.zoomTint.css('height', elemHeight); 1424 1425 } 1426 self.zoomContainer.css({ 1427 'height': elemHeight, 1428 'width': elemWidth 1429 }); 1430 1431 if (self.options.imageCrossfade) { 1432 self.zoomWrap.css({ 1433 'height': elemHeight, 1434 'width': elemWidth 1435 }); 1436 } 1437 } 1438 if (self.options.constrainType) { 1439 1440 //This will contrain the image proportions 1441 if (self.options.constrainType === 'height') { 1442 1443 var autoWDimension = { 1444 'height': self.options.constrainSize, 1445 'width': 'auto' 1446 }; 1447 self.zoomContainer.css(autoWDimension); 1448 1449 if (self.options.imageCrossfade) { 1450 self.zoomWrap.css(autoWDimension); 1451 self.constwidth = self.zoomWrap.width(); 1452 } 1453 else { 1454 self.$elem.css(autoWDimension); 1455 self.constwidth = elemWidth; 1456 } 1457 1458 var constWDim = { 1459 'height': self.options.constrainSize, 1460 'width': self.constwidth 1461 }; 1462 if (self.options.zoomType === 'inner') { 1463 1464 self.zoomWrap.parent().css(constWDim); 1465 self.zoomWindow.css(constWDim); 1466 } 1467 if (self.options.tint) { 1468 self.tintContainer.css(constWDim); 1469 self.zoomTint.css(constWDim); 1470 self.zoomTintImage.css(constWDim); 1471 } 1472 1473 } 1474 if (self.options.constrainType === 'width') { 1475 var autoHDimension = { 1476 'height': 'auto', 1477 'width': self.options.constrainSize 1478 }; 1479 self.zoomContainer.css(autoHDimension); 1480 1481 if (self.options.imageCrossfade) { 1482 self.zoomWrap.css(autoHDimension); 1483 self.constheight = self.zoomWrap.height(); 1484 } 1485 else { 1486 self.$elem.css(autoHDimension); 1487 self.constheight = elemHeight; 1488 } 1489 1490 var constHDim = { 1491 'height': self.constheight, 1492 'width': self.options.constrainSize 1493 }; 1494 if (self.options.zoomType === 'inner') { 1495 self.zoomWrap.parent().css(constHDim); 1496 self.zoomWindow.css(constHDim); 1497 } 1498 if (self.options.tint) { 1499 self.tintContainer.css(constHDim); 1500 self.zoomTint.css(constHDim); 1501 self.zoomTintImage.css(constHDim); 1502 } 1503 } 1504 } 1505 }, 1506 1507 doneCallback: function () { 1508 var self = this; 1509 if (self.options.loadingIcon && !!self.spinner && !!self.spinner.length) { 1510 self.spinner.hide(); 1511 } 1512 1513 self.nzOffset = self.$elem.offset(); 1514 self.nzWidth = self.$elem.width(); 1515 self.nzHeight = self.$elem.height(); 1516 1517 // reset the zoomlevel back to default 1518 self.currentZoomLevel = self.options.zoomLevel; 1519 1520 //ratio of the large to small image 1521 self.widthRatio = self.largeWidth / self.nzWidth; 1522 self.heightRatio = self.largeHeight / self.nzHeight; 1523 1524 //NEED TO ADD THE LENS SIZE FOR ROUND 1525 // adjust images less than the window height 1526 if (self.options.zoomType === 'window') { 1527 1528 // original 1529 // if (self.nzHeight < self.options.zoomWindowHeight / self.heightRatio) { 1530 // self.lensHeight = self.nzHeight; 1531 1532 // } 1533 // else { 1534 // self.lensHeight = String((self.options.zoomWindowHeight / self.heightRatio)); 1535 // } 1536 1537 // if (self.nzWidth < self.options.zoomWindowWidth) { 1538 // self.lensWidth = self.nzWidth; 1539 // } 1540 // else { 1541 // self.lensWidth = (self.options.zoomWindowWidth / self.widthRatio); 1542 // } 1543 1544 //edited for when swap the image, the zoom lens will get the correct size 1545 if (self.nzHeight < self.options.zoomWindowHeight / self.heightRatio) { 1546 self.lensHeight = self.nzHeight; 1547 } 1548 else { 1549 self.lensHeight = String(self.options.zoomWindowHeight / self.heightRatio); 1550 } 1551 if (self.largeWidth < self.options.zoomWindowWidth) { 1552 self.lensWidth = self.nzWidth; 1553 } 1554 else { 1555 self.lensWidth = String(self.options.zoomWindowWidth / self.widthRatio); 1556 } 1557 1558 if (self.zoomLens) { 1559 self.zoomLens.css({ 1560 'width': self.lensWidth, 1561 'height': self.lensHeight 1562 }); 1563 } 1564 } 1565 }, 1566 1567 getCurrentImage: function () { 1568 var self = this; 1569 return self.zoomImage; 1570 }, 1571 1572 getGalleryList: function () { 1573 var self = this; 1574 //loop through the gallery options and set them in list for fancybox 1575 self.gallerylist = []; 1576 if (self.options.gallery) { 1577 $('#' + self.options.gallery + ' a').each(function () { 1578 1579 var imgSrc = ''; 1580 if ($(this).data(self.options.attrImageZoomSrc)) { 1581 imgSrc = $(this).data(self.options.attrImageZoomSrc); 1582 } 1583 else if ($(this).data('image')) { 1584 imgSrc = $(this).data('image'); 1585 } 1586 //put the current image at the start 1587 if (imgSrc === self.zoomImage) { 1588 self.gallerylist.unshift({ 1589 href: '' + imgSrc + '', 1590 title: $(this).find('img').attr('title') 1591 }); 1592 } 1593 else { 1594 self.gallerylist.push({ 1595 href: '' + imgSrc + '', 1596 title: $(this).find('img').attr('title') 1597 }); 1598 } 1599 }); 1600 } 1601 //if no gallery - return current image 1602 else { 1603 self.gallerylist.push({ 1604 href: '' + self.zoomImage + '', 1605 title: $(this).find('img').attr('title') 1606 }); 1607 } 1608 return self.gallerylist; 1609 }, 1610 1611 changeZoomLevel: function (value) { 1612 var self = this; 1613 1614 //flag a zoom, so can adjust the easing during setPosition 1615 self.scrollingLock = true; 1616 1617 //round to two decimal places 1618 self.newvalue = parseFloat(value).toFixed(2); 1619 var newvalue = self.newvalue; 1620 1621 //maxwidth & Maxheight of the image 1622 var maxheightnewvalue = self.largeHeight / ((self.options.zoomWindowHeight / self.nzHeight) * self.nzHeight); 1623 var maxwidthtnewvalue = self.largeWidth / ((self.options.zoomWindowWidth / self.nzWidth) * self.nzWidth); 1624 1625 //calculate new heightratio
1626 if (self.options.zoomType !== 'inner') { 1627 if (maxheightnewvalue <= newvalue) { 1628 self.heightRatio = (self.largeHeight / maxheightnewvalue) / self.nzHeight; 1629 self.newvalueheight = maxheightnewvalue; 1630 self.fullheight = true; 1631 } 1632 else { 1633 self.heightRatio = (self.largeHeight / newvalue) / self.nzHeight; 1634 self.newvalueheight = newvalue; 1635 self.fullheight = false; 1636 } 1637 1638 // calculate new width ratio 1639 1640 if (maxwidthtnewvalue <= newvalue) { 1641 self.widthRatio = (self.largeWidth / maxwidthtnewvalue) / self.nzWidth; 1642 self.newvaluewidth = maxwidthtnewvalue; 1643 self.fullwidth = true; 1644 } 1645 else { 1646 self.widthRatio = (self.largeWidth / newvalue) / self.nzWidth; 1647 self.newvaluewidth = newvalue; 1648 self.fullwidth = false; 1649 } 1650 if (self.options.zoomType === 'lens') { 1651 if (maxheightnewvalue <= newvalue) { 1652 self.fullwidth = true; 1653 self.newvaluewidth = maxheightnewvalue; 1654 } else { 1655 self.widthRatio = (self.largeWidth / newvalue) / self.nzWidth; 1656 self.newvaluewidth = newvalue; 1657 1658 self.fullwidth = false; 1659 } 1660 } 1661 } 1662 1663 if (self.options.zoomType === 'inner') { 1664 maxheightnewvalue = parseFloat(self.largeHeight / self.nzHeight).toFixed(2); 1665 maxwidthtnewvalue = parseFloat(self.largeWidth / self.nzWidth).toFixed(2); 1666 if (newvalue > maxheightnewvalue) { 1667 newvalue = maxheightnewvalue; 1668 } 1669 if (newvalue > maxwidthtnewvalue) { 1670 newvalue = maxwidthtnewvalue; 1671 } 1672 1673 if (maxheightnewvalue <= newvalue) { 1674 self.heightRatio = (self.largeHeight / newvalue) / self.nzHeight; 1675 if (newvalue > maxheightnewvalue) { 1676 self.newvalueheight = maxheightnewvalue; 1677 } else { 1678 self.newvalueheight = newvalue; 1679 } 1680 self.fullheight = true; 1681 } 1682 else { 1683 self.heightRatio = (self.largeHeight / newvalue) / self.nzHeight; 1684 1685 if (newvalue > maxheightnewvalue) { 1686 1687 self.newvalueheight = maxheightnewvalue; 1688 } else { 1689 self.newvalueheight = newvalue; 1690 } 1691 self.fullheight = false; 1692 } 1693 1694 if (maxwidthtnewvalue <= newvalue) { 1695 1696 self.widthRatio = (self.largeWidth / newvalue) / self.nzWidth; 1697 if (newvalue > maxwidthtnewvalue) { 1698 1699 self.newvaluewidth = maxwidthtnewvalue; 1700 } else { 1701 self.newvaluewidth = newvalue; 1702 } 1703 1704 self.fullwidth = true; 1705 } 1706 else { 1707 self.widthRatio = (self.largeWidth / newvalue) / self.nzWidth; 1708 self.newvaluewidth = newvalue; 1709 self.fullwidth = false; 1710 } 1711 } //end inner 1712 var scrcontinue = false; 1713 1714 if (self.options.zoomType === 'inner') { 1715 if (self.nzWidth >= self.nzHeight) { 1716 if (self.newvaluewidth <= maxwidthtnewvalue) { 1717 scrcontinue = true; 1718 } 1719 else { 1720 scrcontinue = false; 1721 self.fullheight = true; 1722 self.fullwidth = true; 1723 } 1724 } 1725 if (self.nzHeight > self.nzWidth) { 1726 if (self.newvaluewidth <= maxwidthtnewvalue) { 1727 scrcontinue = true; 1728 } 1729 else { 1730 scrcontinue = false;
1731 self.fullheight = true; 1732 self.fullwidth = true; 1733 } 1734 } 1735 } 1736 1737 if (self.options.zoomType !== 'inner') { 1738 scrcontinue = true; 1739 } 1740 1741 if (scrcontinue) { 1742 self.zoomLock = 0; 1743 self.changeZoom = true; 1744 1745 //if lens height is less than image height 1746 if (((self.options.zoomWindowHeight) / self.heightRatio) <= self.nzHeight) { 1747 self.currentZoomLevel = self.newvalueheight; 1748 if (self.options.zoomType !== 'lens' && self.options.zoomType !== 'inner') { 1749 self.changeBgSize = true; 1750 self.zoomLens.css('height', String(self.options.zoomWindowHeight / self.heightRatio) + 'px'); 1751 } 1752 if (self.options.zoomType === 'lens' || self.options.zoomType === 'inner') { 1753 self.changeBgSize = true; 1754 } 1755 } 1756 1757 if ((self.options.zoomWindowWidth / self.widthRatio) <= self.nzWidth) { 1758 if (self.options.zoomType !== 'inner') { 1759 if (self.newvaluewidth > self.newvalueheight) { 1760 self.currentZoomLevel = self.newvaluewidth; 1761 } 1762 } 1763 1764 if (self.options.zoomType !== 'lens' && self.options.zoomType !== 'inner') { 1765 self.changeBgSize = true; 1766 1767 self.zoomLens.css('width', String(self.options.zoomWindowWidth / self.widthRatio) + 'px'); 1768 } 1769 if (self.options.zoomType === 'lens' || self.options.zoomType === 'inner') { 1770 self.changeBgSize = true; 1771 } 1772 1773 } 1774 if (self.options.zoomType === 'inner') { 1775 self.changeBgSize = true; 1776 1777 if (self.nzWidth > self.nzHeight) { 1778 self.currentZoomLevel = self.newvaluewidth; 1779 } 1780 else if (self.nzHeight >= self.nzWidth) { 1781 self.currentZoomLevel = self.newvaluewidth; 1782 } 1783 } 1784 } //under 1785 1786 //sets the boundry change, called in setWindowPos 1787 self.setPosition(self.currentLoc); 1788 // 1789 }, 1790 1791 closeAll: function () { 1792 var self = this; 1793 if (self.zoomWindow) { 1794 self.zoomWindow.hide(); 1795 } 1796 if (self.zoomLens) { 1797 self.zoomLens.hide(); 1798 } 1799 if (self.zoomTint) { 1800 self.zoomTint.hide(); 1801 } 1802 }, 1803 1804 changeState: function (value) { 1805 var self = this; 1806 if (value === 'enable') { 1807 self.options.zoomEnabled = true; 1808 } 1809 if (value === 'disable') { 1810 self.options.zoomEnabled = false; 1811 } 1812 }, 1813 1814 responsiveConfig: function (options) { 1815 if (options.respond && options.respond.length > 0) { 1816 return $.extend({}, options, this.configByScreenWidth(options)); 1817 } 1818 return options; 1819 }, 1820 1821 configByScreenWidth: function (options) { 1822 var screenWidth = $(window).width(); 1823 1824 var config = $.grep(options.respond, function (item) { 1825 var range = item.range.split('-'); 1826 return (screenWidth >= range[0]) && (screenWidth <= range[1]); 1827 }); 1828 1829 if (config.length > 0) { 1830 return config[0]; 1831 } else { 1832 return options; 1833 } 1834 } 1835 }; 1836 1837 $.fn.ezPlus = function (options) { 1838 return this.each(function () { 1839 var elevate = Object.create(EZP); 1840 1841 elevate.init(options, this); 1842 1843 $.data(this, 'ezPlus', elevate); 1844 1845 }); 1846 }; 1847 1848 $.fn.ezPlus.options = { 1849 attrImageZoomSrc: 'zoom-image', // attribute to plugin use for zoom 1850 borderColour: '#888', 1851 borderSize: 4, 1852 constrainSize: false, //in pixels the dimensions you want to constrain on 1853 constrainType: false, //width or height 1854 containLensZoom: false, 1855 cursor: 'inherit', // user should set to what they want the cursor as, if they have set a click function 1856 debug: false, 1857 easing: false,
1858 easingAmount: 12, 1859 enabled: true, 1860 1861 gallery: false, 1862 galleryActiveClass: 'zoomGalleryActive', 1863 gallerySelector: false, 1864 galleryItem: 'a', 1865 1866 imageCrossfade: false, 1867 1868 lensBorderColour: '#000', 1869 lensBorderSize: 1, 1870 lensColour: 'white', //colour of the lens background 1871 lensFadeIn: false, 1872 lensFadeOut: false, 1873 lensOpacity: 0.4, //opacity of the lens 1874 lensShape: 'square', //can be 'round' 1875 lensSize: 200, 1876 lenszoom: false, 1877 1878 loadingIcon: false, //http://www.example.com/spinner.gif 1879 1880 // This change will allow to decide if you want to decrease 1881 // zoom of one of the dimensions once the other reached it's top value, 1882 // or keep the aspect ratio, default behaviour still being as always, 1883 // allow to continue zooming out, so it keeps retrocompatibility. 1884 mantainZoomAspectRatio: false, 1885 maxZoomLevel: false, 1886 minZoomLevel: false, 1887 1888 onComplete: $.noop, 1889 onDestroy: $.noop, 1890 onImageClick: $.noop, 1891 onImageSwap: $.noop, 1892 onImageSwapComplete: $.noop, 1893 // onShow: $.noop, 1894 onShow: function(self) { //edited for fix small image zoom 1895 var img = new Image; 1896 img.src = self.zoomImage; 1897 var bgImgWidth = img.width; 1898 var bgImgHeight = img.height; 1899 if (bgImgWidth < self.options.zoomWindowWidth) { 1900 self.options.zoomWindowWidth = bgImgWidth; 1901 $(self.zoomWindow).width(bgImgWidth); 1902 } 1903 if (bgImgHeight < self.options.zoomWindowHeight) { 1904 self.options.zoomWindowHeight = bgImgHeight; 1905 $(self.zoomWindow).height(bgImgHeight); 1906 } 1907 }, 1908 onZoomedImageLoaded: $.noop, 1909 1910 preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION) 1911 respond: [], 1912 responsive: true, 1913 scrollZoom: false, //allow zoom on mousewheel, true to activate 1914 scrollZoomIncrement: 0.1, //steps of the scrollzoom 1915 showLens: true, 1916 tint: false, //enable the tinting 1917 tintColour: '#333', //default tint color, can be anything, red, #ccc, rgb(0,0,0) 1918 tintOpacity: 0.4, //opacity of the tint 1919 touchEnabled: true, 1920 1921 zoomActivation: 'hover', // Can also be click (PLACEHOLDER FOR NEXT VERSION) 1922 // zoomContainerAppendTo: 'body', //original 1923 zoomContainerAppendTo: 'section#product-product div#main-content div#product-frame div.img-main', //zoom container parent selector 1924 zoomId: -1, // identifier for the zoom container 1925 zoomLevel: 1, //default zoom level of image 1926 zoomTintFadeIn: false, 1927 zoomTintFadeOut: false, 1928 zoomType: 'window', //window is default, also 'lens' available - 1929 zoomWindowAlwaysShow: false, 1930 zoomWindowBgColour: '#fff', 1931 zoomWindowFadeIn: false, 1932 zoomWindowFadeOut: false, 1933 zoomWindowHeight: 400, 1934 zoomWindowOffsetX: 0, 1935 zoomWindowOffsetY: 0, 1936 zoomWindowPosition: 1, //Possible values: 1-16, but we can also position with a selector string. 1937 zoomWindowWidth: 400, 1938 zoomEnabled: true, //false disables zoomwindow from showing 1939 zIndex: 2 1940 }; 1941 1942})(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.