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