xp-dev.com Git - namibia/blob - public/js/vendor/jquery.elevatezoom.js

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