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