1/* 2 * jQuery elevateZoom 2.1.1 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 15if ( typeof Object.create !== 'function' ) { 16 Object.create = function( obj ) { 17 function F() {}; 18 F.prototype = obj; 19 return new F(); 20 }; 21} 22 23(function( $, window, document, undefined ) { 24 var ElevateZoom = { 25 init: function( options, elem ) { 26 var self = this; 27 28 self.elem = elem; 29 self.$elem = $( elem ); 30 31 self.imageSrc = self.$elem.data("zoom-image") ? self.$elem.data("zoom-image") : self.$elem.attr("src"); 32 33 self.options = $.extend( {}, $.fn.elevateZoom.options, options ); 34 35 //TINT OVERRIDE SETTINGS 36 if(self.options.tint) { 37 self.options.lensColour = "none", //colour of the lens background 38 self.options.lensOpacity = "1" //opacity of the lens 39 } 40 //INNER OVERRIDE SETTINGS 41 if(self.options.zoomType == "inner") {self.options.showLens = false;} 42 43 44 //Remove alt on hover 45 46 self.$elem.parent().removeAttr('title').removeAttr('alt'); 47 48 self.zoomImage = self.imageSrc; 49 50 self.refresh( 1 ); 51 52 53 54 //Create the image swap from the gallery 55 $('#'+self.options.gallery + ' a').click( function(e) { 56 57 //stop any link on the a tag from working 58 e.preventDefault(); 59 60 //call the swap image function 61 if($(this).data("zoom-image")){self.zoomImagePre = $(this).data("zoom-image")} 62 else{self.zoomImagePre = $(this).data("image");} 63 self.swaptheimage($(this).data("image"), self.zoomImagePre); 64 return false; 65 }); 66 67 }, 68 69 refresh: function( length ) { 70 var self = this; 71 72 setTimeout(function() { 73 self.fetch(self.imageSrc); 74 75 }, length || self.options.refresh ); 76 }, 77 78 fetch: function(imgsrc) { 79 //get the image 80 var self = this; 81 var newImg = new Image(); 82 newImg.onload = function() { 83 //set the large image dimensions - used to calculte ratio's 84 self.largeWidth = newImg.width; 85 self.largeHeight = newImg.height; 86 //once image is loaded start the calls 87 self.startZoom(); 88 self.currentImage = self.imageSrc; 89 } 90 newImg.src = imgsrc; // this must be done AFTER setting onload 91 92 return; 93 94 }, 95 96 startZoom: function( ) { 97 var self = this; 98 //get dimensions of the non zoomed image 99 self.nzWidth = self.$elem.width(); 100 self.nzHeight = self.$elem.height(); 101 102 //get offset of the non zoomed image 103 self.nzOffset = self.$elem.offset(); 104 //calculate the width ratio of the large/small image 105 self.widthRatio = self.largeWidth / self.nzWidth; 106 self.heightRatio = self.largeHeight / self.nzHeight; 107 108 109// if window zoom 110 if(self.options.zoomType == "window") { 111 self.zoomWindowStyle = "overflow: hidden;" 112 + "background-position: 0px 0px;background-color:white;text-align:center;" 113 + "width: " + String(self.options.zoomWindowWidth) + "px;" 114 + "height: " + String(self.options.zoomWindowHeight) 115 + "px;float: left;" 116 + "display: none;z-index:100" 117 + "px;border: " + String(self.options.borderSize) 118 + "px solid " + self.options.borderColour 119 + ";background-repeat: no-repeat;" 120 + "position: absolute;"; 121 } 122// if inner zoom 123 if(self.options.zoomType == "inner") { 124 self.zoomWindowStyle = "overflow: hidden;" 125 + "background-position: 0px 0px;" 126 + "width: " + String(self.nzWidth) + "px;" 127 + "height: " + String(self.nzHeight) 128 + "px;float: left;" 129 + "display: none;" 130 + "cursor:"+(self.options.cursor)+";" 131 + "px solid " + self.options.borderColour 132 + ";background-repeat: no-repeat;" 133 + "position: absolute;"; 134 } 135 136 137 138 //lens style for window zoom 139 if(self.options.zoomType == "window") { 140 141 142 // adjust images less than the window height 143 144 if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){ 145 lensHeight = self.nzHeight; 146 } 147 else{ 148 lensHeight = String((self.options.zoomWindowHeight/self.heightRatio)) 149 } 150 if(self.largeWidth < self.options.zoomWindowWidth){ 151 lensWidth = self.nzHWidth; 152 } 153 else{ 154 lensWidth = (self.options.zoomWindowWidth/self.widthRatio); 155 } 156 157 158 self.lensStyle = "background-position: 0px 0px;width: " + String((self.options.zoomWindowWidth)/self.widthRatio) + "px;height: " + String((self.options.zoomWindowHeight)/self.heightRatio) 159 + "px;float: right;display: none;" 160 + "overflow: hidden;" 161 + "z-index: 999;" 162 + "opacity:"+(self.options.lensOpacity)+";filter: alpha(opacity = "+(self.options.lensOpacity*100)+"); zoom:1;" 163 + "width:"+lensWidth+"px;" 164 + "height:"+lensHeight+"px;" 165 + "background-color:"+(self.options.lensColour)+";" 166 + "cursor:"+(self.options.cursor)+";" 167 + "border: "+(self.options.lensBorder)+"px" + 168 " solid black;background-repeat: no-repeat;position: absolute;"; 169 } 170 171 172 //tint style 173 self.tintStyle = "display: block;" 174 + "position: absolute;" 175 + "background-color: "+self.options.tintColour+";" 176 + "opacity: 0;" 177 + "width: " + self.nzWidth + "px;" 178 + "height: " + self.nzHeight + "px;" 179 180 ; 181 182 //lens style for lens zoom with optional round for modern browsers 183 self.lensRound = ''; 184 if(self.options.zoomType == "lens") { 185 self.lensStyle = "background-position: 0px 0px;" 186 + "float: left;display: none;" 187 + "border: " + String(self.options.borderSize) + "px solid " + self.options.borderColour+";" 188 + "width:"+ String(self.options.lensSize) +"px;" 189 + "height:"+ String(self.options.lensSize)+"px;" 190 + "background-repeat: no-repeat;position: absolute;"; 191 192 193 } 194 195 196 //does not round in all browsers 197 if(self.options.lensShape == "round") { 198 self.lensRound = "border-top-left-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;" 199 + "border-top-right-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;" 200 + "border-bottom-left-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;" 201 + "border-bottom-right-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"; 202 203 } 204 205 //create the div's
206 //self.zoomContainer = $('<div/>').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth}); 207 208 self.zoomContainer = $('<div class="zoomContainer" style="position:absolute;left:'+self.nzOffset.left+'px;top:'+self.nzOffset.top+'px;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;"></div>'); 209 self.$elem.after(self.zoomContainer); 210 211 212 //this will add overflow hidden and contrain the lens on lens mode 213 if(self.options.containLensZoom && self.options.zoomType == "lens"){ 214 self.zoomContainer.css("overflow", "hidden"); 215 } 216 if(self.options.zoomType != "inner") { 217 self.zoomLens = $("<div class='zoomLens' style='" + self.lensStyle + self.lensRound +"'> </div>") 218 .appendTo(self.zoomContainer) 219 .click(function () { 220 self.$elem.trigger('click'); 221 }); 222 } 223 224 225 226 if(self.options.tint) { 227 self.tintContainer = $('<div/>').addClass('tintContainer'); 228 self.zoomTint = $("<div class='zoomTint' style='"+self.tintStyle+"'></div>"); 229 230 231 self.zoomLens.wrap(self.tintContainer); 232 233 234 self.zoomTintcss = self.zoomLens.after(self.zoomTint); 235 236 //if tint enabled - set an image to show over the tint 237 238 self.zoomTintImage = $('<img style="position: absolute; left: 0px; top: 0px; max-width: none; width: '+self.nzWidth+'px; height: '+self.nzHeight+'px;" src="'+self.imageSrc+'">') 239 .appendTo(self.zoomLens) 240 .click(function () { 241 242 self.$elem.trigger('click'); 243 }); 244 245 } 246 247 248 249 //create zoom window 250 if(isNaN(self.options.zoomWindowPosition)){ 251 self.zoomWindow = $("<div style='z-index:999;left:"+(self.windowOffsetLeft)+"px;top:"+(self.windowOffsetTop)+"px;" + self.zoomWindowStyle + "' class='zoomWindow'> </div>") 252 .appendTo('body') 253 .click(function () { 254 self.$elem.trigger('click'); 255 }); 256 }else{ 257 self.zoomWindow = $("<div style='z-index:999;left:"+(self.windowOffsetLeft)+"px;top:"+(self.windowOffsetTop)+"px;" + self.zoomWindowStyle + "' class='zoomWindow'> </div>") 258 .appendTo(self.zoomContainer) 259 .click(function () { 260 self.$elem.trigger('click'); 261 }); 262 }
263 self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth); 264 self.zoomWindow.wrap(self.zoomWindowContainer); 265 266 267 // self.captionStyle = "text-align: left;background-color: black;color: white;font-weight: bold;padding: 10px;font-family: sans-serif;font-size: 11px"; 268 // self.zoomCaption = $('<div class="elevatezoom-caption" style="'+self.captionStyle+'display: block; width: 280px;">INSERT ALT TAG</div>').appendTo(self.zoomWindow.parent()); 269 270 //set image attibutes 271 if(self.options.tint) { 272 // zoomLens.css({ backgroundImage: "url('" + imageSrc + "')" }); 273 } 274 275 if(self.options.zoomType == "lens") { 276 self.zoomLens.css({ backgroundImage: "url('" + self.imageSrc + "')" }); 277 } 278 if(self.options.zoomType == "window") { 279 self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" }); 280 } 281 if(self.options.zoomType == "inner") { 282 self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" }); 283 } 284 /*-------------------END THE ZOOM WINDOW AND LENS----------------------------------*/ 285 286 //Needed to work in IE 287 self.$elem.bind('mousemove', function(e){ 288 self.setPosition(e); 289 }); 290 291 self.zoomContainer.bind('mousemove', function(e){ 292 self.setPosition(e); 293 }); 294 if(self.options.zoomType != "inner") { 295 self.zoomLens.bind('mousemove', function(e){ 296 self.setPosition(e); 297 }); 298 } 299 if(self.options.tint) { 300 self.zoomTint.bind('mousemove', function(e){ 301 self.setPosition(e); 302 }); 303 304 } 305 if(self.options.zoomType == "inner") { 306 self.zoomWindow.bind('mousemove', function(e){ 307 self.setPosition(e); 308 }); 309 310 } 311 312 // lensFadeOut: 500, zoomTintFadeIn 313 self.zoomContainer.mouseenter(function(){ 314 315 if(self.options.zoomType == "inner") { 316 if(self.options.zoomWindowFadeIn){ 317 self.zoomWindow.stop(true, true).fadeIn(self.options.zoomWindowFadeIn); 318 } 319 else{self.zoomWindow.show();} 320 321 } 322 if(self.options.zoomType == "window") { 323 324 if(self.options.zoomWindowFadeIn){ 325 self.zoomWindow.stop(true, true).fadeIn(self.options.zoomWindowFadeIn); 326 } 327 else{self.zoomWindow.show();} 328 329 } 330 if(self.options.showLens) { 331 332 if(self.options.lensFadeIn){ 333 self.zoomLens.stop(true, true).fadeIn(self.options.lensFadeIn); 334 } 335 else{self.zoomLens.show();} 336 337 } 338 if(self.options.tint) { 339 340 if(self.options.zoomTintFadeIn){ 341 self.zoomTint.stop(true, true).fadeIn(self.options.zoomTintFadeIn); 342 } 343 else{self.zoomTint.show();} 344 345 // self.zoomTint.show(); 346 347 348 } 349 }).mouseleave(function(){ 350 351 self.zoomWindow.hide(); 352 if(self.options.showLens) {self.zoomLens.hide();} 353 354 if(self.options.tint) { 355 self.zoomTint.hide(); 356 } 357 }); 358 //end ove image 359 360 self.$elem.mouseenter(function(){ 361 362 if(self.options.zoomType == "inner") { 363 if(self.options.zoomWindowFadeIn){ 364 self.zoomWindow.stop(true, true).fadeIn(self.options.zoomWindowFadeIn); 365 } 366 else{self.zoomWindow.show();} 367 368 } 369 if(self.options.zoomType == "window") { 370 371 if(self.options.zoomWindowFadeIn){ 372 self.zoomWindow.stop(true, true).fadeIn(self.options.zoomWindowFadeIn); 373 } 374 else{self.zoomWindow.show();} 375 376 } 377 if(self.options.showLens) { 378 379 if(self.options.lensFadeIn){ 380 self.zoomLens.stop(true, true).fadeIn(self.options.lensFadeIn); 381 } 382 else{self.zoomLens.show();} 383 384 } 385 if(self.options.tint) { 386 387 if(self.options.zoomTintFadeIn){ 388 self.zoomTint.stop(true, true).fadeIn(self.options.zoomTintFadeIn); 389 } 390 else{self.zoomTint.show();} 391 392 // self.zoomTint.show(); 393 394 395 } 396 }).mouseleave(function(){ 397 398 self.zoomWindow.hide(); 399 if(self.options.showLens) {self.zoomLens.hide();} 400 401 if(self.options.tint) { 402 self.zoomTint.hide(); 403 } 404 }); 405 //end ove image 406 407 if(self.options.zoomType != "inner") { 408 409 self.zoomLens.mouseenter(function(){ 410 if(self.options.zoomType == "inner") { 411 if(self.options.zoomWindowFadeIn){ 412 413 self.zoomWindow.stop(true, true).fadeIn(self.options.zoomWindowFadeIn); 414 } 415 else{ 416 417 self.zoomWindow.show(); 418 } 419 } 420 if(self.options.zoomType == "window") {self.zoomWindow.show();} 421 if(self.options.showLens) {self.zoomLens.show();} 422 if(self.options.tint) {self.zoomTint.show(); } 423 }).mouseleave(function(){ 424 425 426 if(self.options.zoomWindowFadeOut){ 427 self.zoomWindow.stop(true, true).fadeOut(self.options.zoomWindowFadeOut); 428 } 429 else{self.zoomWindow.hide();} 430 431 432 if(self.options.zoomType != "inner") { 433 self.zoomLens.hide(); 434 } 435 if(self.options.tint) {self.zoomTint.hide(); } 436 });
437 } 438 439 440 if(self.options.tint) { 441 self.zoomTint.mouseenter(function(){ 442 if(self.options.zoomType == "inner") {self.zoomWindow.show();} 443 if(self.options.zoomType == "window") {self.zoomWindow.show();} 444 if(self.options.showLens) {self.zoomLens.show();} 445 self.zoomTint.show(); 446 447 }).mouseleave(function(){ 448 449 self.zoomWindow.hide(); 450 if(self.options.zoomType != "inner") { 451 self.zoomLens.hide(); 452 } 453 self.zoomTint.hide(); 454 455 }); 456 } 457 458 if(self.options.zoomType == "inner") { 459 self.zoomWindow.mouseenter(function(){ 460 if(self.options.zoomType == "inner") {self.zoomWindow.show();} 461 if(self.options.zoomType == "window") {self.zoomWindow.show();} 462 if(self.options.showLens) {self.zoomLens.show();} 463 464 465 }).mouseleave(function(){ 466 467 if(self.options.zoomWindowFadeOut){ 468 self.zoomWindow.stop(true, true).fadeOut(self.options.zoomWindowFadeOut); 469 } 470 else{self.zoomWindow.hide();} 471 if(self.options.zoomType != "inner") { 472 self.zoomLens.hide(); 473 } 474 475 476 }); 477 } 478 }, 479 480 setPosition: function(e) { 481 482 var self = this; 483 484 485 //recaclc offset each time in case the image moves 486 //this can be caused by other on page elements 487 self.nzHeight = self.$elem.height(); 488 self.nzWidth = self.$elem.width(); 489 self.nzOffset = self.$elem.offset(); 490 491 if(self.options.tint) { 492 self.zoomTint.css({ top: 0}); 493 self.zoomTint.css({ left: 0}); 494 } 495 496 //container fix 497 self.zoomContainer.css({ top: self.nzOffset.top}); 498 self.zoomContainer.css({ left: self.nzOffset.left}); 499 self.mouseLeft = parseInt(e.pageX - self.nzOffset.left); 500 self.mouseTop = parseInt(e.pageY - self.nzOffset.top); 501 //calculate the Location of the Lens 502 503 //calculate the bound regions - but only if zoom window 504 if(self.options.zoomType == "window") { 505 self.Etoppos = (self.mouseTop < (self.zoomLens.height()/2)); 506 self.Eboppos = (self.mouseTop > self.nzHeight - (self.zoomLens.height()/2)-(self.options.lensBorder*2)); 507 self.Eloppos = (self.mouseLeft < 0+((self.zoomLens.width()/2))); 508 self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.zoomLens.width()/2)-(self.options.lensBorder*2))); 509 } 510 //calculate the bound regions - but only for inner zoom 511 if(self.options.zoomType == "inner"){ 512 self.Etoppos = (self.mouseTop < (self.nzHeight/2)/self.heightRatio ); 513 self.Eboppos = (self.mouseTop > self.nzHeight - ((self.nzHeight/2)/self.heightRatio)); 514 self.Eloppos = (self.mouseLeft < 0+((self.nzWidth/2)/self.widthRatio)); 515 self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.nzWidth/2)/self.widthRatio-(self.options.lensBorder*2))); 516 } 517 518 // if the mouse position of the slider is one of the outerbounds, then hide window and lens 519 if (self.mouseLeft < 0 || self.mouseTop <= 0 || self.mouseLeft > self.nzWidth || self.mouseTop > self.nzHeight ) { 520 self.zoomWindow.hide(); 521 if(self.options.showLens) {self.zoomLens.hide();} 522 if(self.options.tint) {self.zoomTint.hide();} 523 return; 524 } 525 //else continue with operations 526 else { 527 528 //should already be visible - but make sure 529 if(self.options.zoomType == "window") {self.zoomWindow.show();} 530 if(self.options.tint) {self.zoomTint.show();} 531 532 //lens options 533 if(self.options.showLens) { 534 self.zoomLens.show(); 535 //set background position of lens 536 self.lensLeftPos = String(self.mouseLeft - self.zoomLens.width() / 2); 537 self.lensTopPos = String(self.mouseTop - self.zoomLens.height() / 2); 538 } 539 //adjust the background position if the mouse is in one of the outer regions 540 541 //Top region 542 if(self.Etoppos){ 543 self.lensTopPos = 0; 544 } 545 //Left Region 546 if(self.Eloppos){ 547 self.windowLeftPos = 0; 548 self.lensLeftPos = 0; 549 self.tintpos=0; 550 } 551 //Set bottom and right region for window mode 552 if(self.options.zoomType == "window") { 553 if(self.Eboppos){ 554 self.lensTopPos = Math.max( (self.nzHeight)-self.zoomLens.height()-(self.options.lensBorder*2), 0 ); 555 } 556 if(self.Eroppos){ 557 self.lensLeftPos = (self.nzWidth-(self.zoomLens.width())-(self.options.lensBorder*2)); 558 } 559 } 560 //Set bottom and right region for inner mode 561 if(self.options.zoomType == "inner") { 562 if(self.Eboppos){ 563 self.lensTopPos = Math.max( (self.nzHeight)-(self.options.lensBorder*2), 0 ); 564 } 565 if(self.Eroppos){ 566 self.lensLeftPos = (self.nzWidth-(self.nzWidth)-(self.options.lensBorder*2)); 567 } 568 } 569 //if lens zoom 570 if(self.options.zoomType == "lens") { 571 self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomLens.width() / 2) * (-1)); 572 self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomLens.height() / 2) * (-1)); 573 self.zoomLens.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' }); 574 self.setWindowPostition(e); 575 } 576 //if tint zoom 577 if(self.options.tint) { 578 self.setTintPosition(e); 579 580 } 581 //set the css background position 582 if(self.options.zoomType == "window") { 583 self.setWindowPostition(e); 584 } 585 if(self.options.zoomType == "inner") { 586 self.setWindowPostition(e); 587 } 588 if(self.options.showLens) { 589 self.zoomLens.css({ left: self.lensLeftPos + 'px', top: self.lensTopPos + 'px' }) 590 } 591 592 } //end else
593 594 595 596 }, 597 setLensPostition: function( e ) { 598 599 600 }, 601 setWindowPostition: function( e ) { 602 //return obj.slice( 0, count ); 603 var self = this; 604 605 if(!isNaN(self.options.zoomWindowPosition)){ 606 607 switch (self.options.zoomWindowPosition) { 608 case 1: //done 609 self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1 610 self.windowOffsetLeft =(+self.nzWidth); //DONE 1, 2, 3, 4, 16 611 break; 612 case 2: 613 if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin 614 615 self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1); 616 self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16 617 } 618 else{ //negative margin 619 620 } 621 break; 622 case 3: //done 623 self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize*2)); //DONE 3,9 624 self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16 625 break; 626 case 4: //done 627 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 628 self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16 629 break; 630 case 5: //done 631 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 632 self.windowOffsetLeft =(self.nzWidth-self.zoomWindow.width()-(self.options.borderSize*2)); //DONE - 5,15 633 break; 634 case 6: 635 if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin 636 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 637 638 self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1); 639 } 640 else{ //negative margin 641 642 } 643 644 645 break; 646 case 7: //done 647 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 648 self.windowOffsetLeft = 0; //DONE 7, 13 649 break; 650 case 8: //done 651 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8 652 self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12 653 break; 654 case 9: //done 655 self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize*2)); //DONE 3,9 656 self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12 657 break; 658 case 10: 659 if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin 660 661 self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1); 662 self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12 663 } 664 else{ //negative margin 665 666 } 667 break; 668 case 11: 669 self.windowOffsetTop = (self.options.zoomWindowOffety); 670 self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12 671 break; 672 case 12: //done 673 self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16 674 self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12 675 break; 676 case 13: //done 677 self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16 678 self.windowOffsetLeft =(0); //DONE 7, 13 679 break; 680 case 14: 681 if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin 682 self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16 683 684 self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1); 685 } 686 else{ //negative margin 687 688 } 689 690 break; 691 case 15://done 692 self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16 693 self.windowOffsetLeft =(self.nzWidth-self.zoomWindow.width()-(self.options.borderSize*2)); //DONE - 5,15 694 break; 695 case 16: //done 696 self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16 697 self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16 698 break; 699 default: //done 700 self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1 701 self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16 702 } 703 } //end isNAN 704 else{ 705// WE CAN POSITION IN A CLASS - ASSUME THAT ANY STRING PASSED IS 706 self.externalContainer = $('#'+self.options.zoomWindowPosition); 707 self.externalContainerWidth = self.externalContainer.width(); 708 self.externalContainerHeight = self.externalContainer.height(); 709 self.externalContainerOffset = self.externalContainer.offset(); 710 711 self.windowOffsetTop = self.externalContainerOffset.top;//DONE - 1 712 self.windowOffsetLeft =self.externalContainerOffset.left; //DONE 1, 2, 3, 4, 16 713 714 } 715 self.windowOffsetTop = self.windowOffsetTop + self.options.zoomWindowOffety; 716 self.windowOffsetLeft = self.windowOffsetLeft + self.options.zoomWindowOffetx; 717 718 self.zoomWindow.css({ top: self.windowOffsetTop}); 719 self.zoomWindow.css({ left: self.windowOffsetLeft}); 720 721 if(self.options.zoomType == "inner") { 722 self.zoomWindow.css({ top: 0}); 723 self.zoomWindow.css({ left: 0}); 724 725 } 726 727 728 self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1)); 729 self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1)); 730 if(self.Etoppos){self.windowTopPos = 0;} 731 if(self.Eloppos){self.windowLeftPos = 0;} 732 if(self.Eboppos){self.windowTopPos = (self.largeHeight-self.zoomWindow.height())*(-1);} 733 if(self.Eroppos){self.windowLeftPos = ((self.largeWidth-self.zoomWindow.width())*(-1));} 734 //set the css background position 735 736 737 if(self.options.zoomType == "window") { 738 739 //overrides for images not zoomable 740 if(self.widthRatio <= 1){ 741 self.windowLeftPos = 0; 742 } 743 744 if(self.heightRatio <= 1){ 745 self.windowTopPos = 0; 746 } 747 748 // adjust images less than the window height 749 750 if(self.largeHeight < self.options.zoomWindowHeight){ 751 self.windowTopPos = 0; 752 } 753 if(self.largeWidth < self.options.zoomWindowWidth){ 754 self.windowLeftPos = 0; 755 } 756 757 //set the zoomwindow background position 758 if (self.options.easing){ 759 760 $.easing.zoomsmoothmove = function (x, t, b, c, d) { 761 // return -c *(t/=d)*(t-2) + b; 762 //return c * Math.sin(t/d * (Math.PI/2)) + b; //easeoutsin 763 // return -c *(t/=d)*(t-2) + b;//easeoutquad 764 return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; //ease out expo 765 }; 766 //if mozilla, it doesnt work on x/y background position 767 if($.browser.mozilla){ 768 var bgpos = 'background-position', cc = $.camelCase; 769 function normalize(value) { 770 var h = '100%', z = '0px', options = {top : z, bottom: h, left
770: z, right: h}; 771 return options[value] || value; 772 } 773 $.each(['x', 'y'], function (i, v) { 774 var camelCase = cc(bgpos + '-' + v); 775 $.cssHooks[camelCase] = { 776 get: function (elem) { 777 var pos = $.css(elem, bgpos).split(/\s+/, 2); 778 return normalize(pos[i]); 779 }, 780 set: function (elem, value) { 781 var pos = $.css(elem, bgpos).split(/\s+/, 2); 782 pos[i] = normalize(value); 783 $.style(elem, bgpos, pos.join(' ')); 784 } 785 }; 786 $.fx.step[camelCase] = function (fx) { 787 $.style(fx.elem, fx.prop, fx.now); 788 }; 789 }); 790 // 791 self.zoomWindow.stop().animate({ 792 backgroundPositionY: self.windowTopPos, 793 backgroundPositionX: self.windowLeftPos 794 },{queue:false,duration:self.options.easingDuration,easing:'zoomsmoothmove'}); 795 796 } 797 //do split easing 798 else { 799 800 801 self.zoomWindow.animate({ 802 'background-position-x': self.windowLeftPos, 803 'background-position-y': self.windowTopPos 804 },{queue:false,duration:self.options.easingDuration,easing:'zoomsmoothmove'}); 805 806 } 807 } 808 else{ 809 self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' }); 810 } 811 812 813 } 814 //set the css background position 815 if(self.options.zoomType == "inner") { 816 817 self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' }); 818 } 819 }, 820 setTintPosition: function(e){ 821 var self = this; 822 self.nzOffset = self.$elem.offset(); 823 self.tintpos = String(((e.pageX - self.nzOffset.left)-(self.zoomLens.width() / 2)) * (-1)); 824 self.tintposy = String(((e.pageY - self.nzOffset.top) - self.zoomLens.height() / 2) * (-1)); 825 if(self.Etoppos){ 826 self.tintposy = 0; 827 } 828 if(self.Eloppos){ 829 self.tintpos=0; 830 } 831 if(self.Eboppos){ 832 self.tintposy = (self.nzHeight-self.zoomLens.height()-(self.options.lensBorder*2))*(-1); 833 } 834 if(self.Eroppos){ 835 self.tintpos = ((self.nzWidth-self.zoomLens.width()-(self.options.lensBorder*2))*(-1)); 836 } 837 if(self.options.tint) { 838 self.zoomTint.css({opacity:self.options.tintOpacity}).animate().fadeIn("slow"); 839 self.zoomTintImage.css({'left': self.tintpos-self.options.lensBorder+'px'}); 840 self.zoomTintImage.css({'top': self.tintposy-self.options.lensBorder+'px'}); 841 } 842 }, 843 844 swaptheimage: function(smallimage, largeimage){ 845 var self = this; 846 var newImg = new Image(); 847 newImg.onload = function() { 848 self.largeWidth = newImg.width; 849 self.largeHeight = newImg.height; 850 self.zoomImage = largeimage; 851 self.swapAction(smallimage, largeimage); 852 return; 853 } 854 newImg.src = largeimage; // this must be done AFTER setting onload 855 856 }, 857 swapAction: function(smallimage, largeimage){ 858 859 860 var self = this; 861 862 var newImg2 = new Image(); 863 newImg2.onload = function() { 864 //re-calculate values 865 self.nzHeight = newImg2.height; 866 self.nzWidth = newImg2.width; 867 868 869 self.doneCallback(); 870 return; 871 } 872 newImg2.src = smallimage; 873 874 //swaps the main image 875 //self.$elem.attr("src",smallimage); 876 //swaps the zoom image 877 self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" }); 878 879 self.currentImage = largeimage; 880 881 self.$elem.attr("src",smallimage); 882 }, 883 doneCallback: function(){ 884 885 var self = this; 886 887 888 if(self.options.tint) { 889 self.zoomTintImage.attr("src",largeimage); 890 //self.zoomTintImage.attr("width",elem.data("image")); 891 self.zoomTintImage.attr("height",self.$elem.height()); 892 //self.zoomTintImage.attr('src') = elem.data("image"); 893 self.zoomTintImage.css({ height: self.$elem.height()}); 894 self.zoomTint.css({ height: self.$elem.height()}); 895 896 } 897 self.nzOffset = self.$elem.offset(); 898 self.nzWidth = self.$elem.width(); 899 self.nzHeight = self.$elem.height(); 900 // alert("THIS"); 901 //ratio of the large to small image 902 self.widthRatio = self.largeWidth / self.nzWidth; 903 self.heightRatio = self.largeHeight / self.nzHeight; 904 905 //NEED TO ADD THE LENS SIZE FOR ROUND 906 // adjust images less than the window height 907 908 if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){ 909 lensHeight = self.nzHeight; 910 } 911 else{ 912 lensHeight = String((self.options.zoomWindowHeight/self.heightRatio)) 913 } 914 if(self.largeWidth < self.options.zoomWindowWidth){ 915 lensWidth = self.nzHWidth; 916 } 917 else{ 918 lensWidth = (self.options.zoomWindowWidth/self.widthRatio); 919 } 920 921 922 self.zoomLens.css('width', lensWidth); 923 924 self.zoomLens.css('height', lensHeight); 925 926 927 928 929 930 }, 931 getCurrentImage: function(){ 932 var self = this; 933 return self.zoomImage; 934 }, 935 getGalleryList: function(){ 936 var self = this; 937 //loop through the gallery options and set them in list for fancybox 938 self.gallerylist = []; 939 if (self.options.gallery){ 940 941 942 $('#'+self.options.gallery + ' a').each(function() { 943 944 var img_src = ''; 945 if($(this).data("zoom-image")){ 946 img_src = $(this).data("zoom-image"); 947 } 948 else if($(this).data("image")){ 949 img_src = $(this).data("image"); 950 } 951 //put the current image at the start 952 if(img_src == self.zoomImage){ 953 self.gallerylist.unshift({ 954 href: ''+img_src+'', 955 title: $(this).find('img').attr("title") 956 }); 957 } 958 else{ 959 self.gallerylist.push({ 960 href: ''+img_src+'', 961 title: $(this).find('img').attr("title") 962 });
963 } 964 965 966 }); 967 } 968 //if no gallery - return current image 969 else{ 970 self.gallerylist.push({ 971 href: ''+self.zoomImage+'', 972 title: $(this).find('img').attr("title") 973 }); 974 } 975 return self.gallerylist; 976 977 } 978 979 }; 980 981 982 983 984 $.fn.elevateZoom = function( options ) { 985 return this.each(function() { 986 var elevate = Object.create( ElevateZoom ); 987 988 elevate.init( options, this ); 989 990 $.data( this, 'elevateZoom', elevate ); 991 992 }); 993 }; 994 995 $.fn.elevateZoom.options = { 996 easing: false, 997 easingType: 'zoomdefault', 998 easingDuration: 2000, 999 lensSize: 50, 1000 zoomWindowWidth: 250, 1001 zoomWindowHeight: 384, 1002 zoomWindowOffetx: 20, 1003 zoomWindowOffety: -5, 1004 zoomWindowPosition: 1, 1005 lensFadeIn: false, 1006 lensFadeOut: false, 1007 debug: false, 1008 zoomWindowFadeIn: false, 1009 zoomWindowFadeOut: false, 1010 zoomWindowAlwaysShow: false, 1011 zoomTintFadeIn: false, 1012 zoomTintFadeOut: false, 1013 borderSize: 4, 1014 showLens: true, 1015 borderColour: "#888", 1016 lensBorder: 1, 1017 lensShape: "square", //can be "round" 1018 zoomType: "inner", //window is default, also "lens" available - 1019 containLensZoom: false, 1020 lensColour: "white", //colour of the lens background 1021 lensOpacity: 0.4, //opacity of the lens 1022 lenszoom: false, 1023 tint: false, //enable the tinting 1024 tintColour: "#333", //default tint color, can be anything, red, #ccc, rgb(0,0,0) 1025 tintOpacity: 1, //opacity of the tint 1026 gallery: false, 1027 cursor:"default", // user should set to what they want the cursor as, if they have set a click function 1028 onComplete: $.noop 1029 }; 1030 1031})( 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.