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