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