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