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