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