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