2 * jQuery elevateZoom 3.0.3
3 * Demo's and documentation:
4 * www.elevateweb.co.uk/image-zoom
6 * Copyright (c) 2012 Andrew Eades
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
15 if ( typeof Object.create !== 'function' ) {
16 Object.create = function( obj ) {
23 (function( $, window, document, undefined ) {
25 init: function( options, elem ) {
29 self.$elem = $( elem );
31 self.imageSrc = self.$elem.data("zoom-image") ? self.$elem.data("zoom-image") : self.$elem.attr("src");
33 self.options = $.extend( {}, $.fn.elevateZoom.options, options );
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
40 //INNER OVERRIDE SETTINGS
41 if(self.options.zoomType == "inner") {self.options.showLens = false;}
46 self.$elem.parent().removeAttr('title').removeAttr('alt');
48 self.zoomImage = self.imageSrc;
54 //Create the image swap from the gallery
55 $('#'+self.options.gallery + ' a').click( function(e) {
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);
62 //stop any link on the a tag from working
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);
74 refresh: function( length ) {
77 setTimeout(function() {
78 self.fetch(self.imageSrc);
80 }, length || self.options.refresh );
83 fetch: function(imgsrc) {
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
93 self.currentImage = self.imageSrc;
94 //let caller know image has been loaded
95 self.options.onZoomedImageLoaded(self.$elem);
97 newImg.src = imgsrc; // this must be done AFTER setting onload
103 startZoom: function( ) {
105 //get dimensions of the non zoomed image
106 self.nzWidth = self.$elem.width();
107 self.nzHeight = self.$elem.height();
110 self.isWindowActive = false;
111 self.isLensActive = false;
112 self.isTintActive = false;
113 self.overWindow = false;
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');
122 self.scrollingLock = false;
123 self.changeBgSize = false;
124 self.currentZoomLevel = self.options.zoomLevel;
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;
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)
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;";
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)
157 + "cursor:"+(self.options.cursor)+";"
158 + "px solid " + self.options.borderColour
159 + ";background-repeat: no-repeat;"
160 + "position: absolute;";
165 //lens style for window zoom
166 if(self.options.zoomType == "window") {
169 // adjust images less than the window height
171 if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
172 lensHeight = self.nzHeight;
175 lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
177 if(self.largeWidth < self.options.zoomWindowWidth){
178 lensWidth = self.nzWidth;
181 lensWidth = (self.options.zoomWindowWidth/self.widthRatio);
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;"
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;";
201 self.tintStyle = "display: block;"
202 + "position: absolute;"
203 + "background-color: "+self.options.tintColour+";"
204 + "filter:alpha(opacity=0);"
206 + "width: " + self.nzWidth + "px;"
207 + "height: " + self.nzHeight + "px;"
211 //lens style for lens zoom with optional round for modern browsers
214 if(self.options.zoomType == "lens") {
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;";
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;";
236 //create the div's + ""
237 //self.zoomContainer = $('<div/>').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth});
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);
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");
247 if(self.options.zoomType != "inner") {
248 self.zoomLens = $("<div class='zoomLens' style='" + self.lensStyle + self.lensRound +"'> </div>")
249 .appendTo(self.zoomContainer)
251 self.$elem.trigger('click');
257 if(self.options.tint) {
258 self.tintContainer = $('<div/>').addClass('tintContainer');
259 self.zoomTint = $("<div class='zoomTint' style='"+self.tintStyle+"'></div>");
262 self.zoomLens.wrap(self.tintContainer);
265 self.zoomTintcss = self.zoomLens.after(self.zoomTint);
267 //if tint enabled - set an image to show over the tint
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)
273 self.$elem.trigger('click');
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'> </div>")
285 self.$elem.trigger('click');
288 self.zoomWindow = $("<div style='z-index:999;left:"+(self.windowOffsetLeft)+"px;top:"+(self.windowOffsetTop)+"px;" + self.zoomWindowStyle + "' class='zoomWindow'> </div>")
289 .appendTo(self.zoomContainer)
291 self.$elem.trigger('click');
294 self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth);
295 self.zoomWindow.wrap(self.zoomWindowContainer);
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());
301 if(self.options.zoomType == "lens") {
302 self.zoomLens.css({ backgroundImage: "url('" + self.imageSrc + "')" });
304 if(self.options.zoomType == "window") {
305 self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" });
307 if(self.options.zoomType == "inner") {
308 self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" });
310 /*-------------------END THE ZOOM WINDOW AND LENS----------------------------------*/
312 self.$elem.bind('touchmove', function(e){
314 var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
315 self.setPosition(touch);
318 self.zoomContainer.bind('touchmove', function(e){
319 if(self.options.zoomType == "inner") {
320 self.showHideWindow("show");
324 var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
325 self.setPosition(touch);
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");}
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");}
339 if(self.options.showLens) {
340 self.zoomLens.bind('touchmove', function(e){
343 var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
344 self.setPosition(touch);
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");}
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){
362 self.lastX = e.clientX;
363 self.lastY = e.clientY;
367 self.zoomContainer.bind('mousemove', function(e){
369 if(self.overWindow == false){self.setElements("show");}
371 //make sure on orientation change the setposition is not fired
372 if(self.lastX !== e.clientX || self.lastY !== e.clientY){
376 self.lastX = e.clientX;
377 self.lastY = e.clientY;
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){
386 self.lastX = e.clientX;
387 self.lastY = e.clientY;
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){
397 self.lastX = e.clientX;
398 self.lastY = e.clientY;
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){
410 self.lastX = e.clientX;
411 self.lastY = e.clientY;
417 // lensFadeOut: 500, zoomTintFadeIn
418 self.zoomContainer.add(self.$elem).mouseenter(function(){
420 if(self.overWindow == false){self.setElements("show");}
423 }).mouseleave(function(){
424 if(!self.scrollLock){
425 self.setElements("hide");
434 if(self.options.zoomType != "inner") {
435 self.zoomWindow.mouseenter(function(){
436 self.overWindow = true;
437 self.setElements("hide");
438 }).mouseleave(function(){
440 self.overWindow = false;
447 // var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);
452 //fix for initial zoom setting
453 if (self.options.zoomLevel != 1){
454 self.changeZoomLevel(self.currentZoomLevel);
456 //set the min zoomlevel
457 if(self.options.minZoomLevel){
458 self.minZoomLevel = self.options.minZoomLevel;
461 self.minZoomLevel = self.options.scrollZoomIncrement * 2;
465 if(self.options.scrollZoom){
468 self.zoomContainer.add(self.$elem).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(e){
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;
480 var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail*-1
483 //this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
484 // e.preventDefault();
487 e.stopImmediatePropagation();
492 if(theEvent /120 > 0) {
494 if(self.currentZoomLevel >= self.minZoomLevel){
495 self.changeZoomLevel(self.currentZoomLevel-self.options.scrollZoomIncrement);
503 if(self.options.maxZoomLevel){
504 if(self.currentZoomLevel <= self.options.maxZoomLevel){
505 self.changeZoomLevel(parseFloat(self.currentZoomLevel)+self.options.scrollZoomIncrement);
511 self.changeZoomLevel(parseFloat(self.currentZoomLevel)+self.options.scrollZoomIncrement);
521 setElements: function(type) {
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");
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");}
541 setPosition: function(e) {
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();
552 if(self.options.tint) {
553 self.zoomTint.css({ top: 398});
554 self.zoomTint.css({ left: 0});
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;
564 lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
566 if(self.largeWidth < self.options.zoomWindowWidth){
567 lensWidth = self.nzHWidth;
570 lensWidth = (self.options.zoomWindowWidth/self.widthRatio);
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' })
578 if(self.options.zoomType == "lens") {
579 self.zoomLens.css({ width: String(self.options.lensSize) + 'px', height: String(self.options.lensSize) + 'px' })
582 //end responsive image change
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
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)));
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)));
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");
613 //else continue with operations
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);
626 //adjust the background position if the mouse is in one of the outer regions
634 self.windowLeftPos = 0;
635 self.lensLeftPos = 0;
638 //Set bottom and right region for window mode
639 if(self.options.zoomType == "window") {
641 self.lensTopPos = Math.max( (self.nzHeight)-self.zoomLens.height()-(self.options.lensBorderSize*2), 0 );
644 self.lensLeftPos = (self.nzWidth-(self.zoomLens.width())-(self.options.lensBorderSize*2));
647 //Set bottom and right region for inner mode
648 if(self.options.zoomType == "inner") {
650 self.lensTopPos = Math.max( ((self.nzHeight)-(self.options.lensBorderSize*2)), 0 );
653 self.lensLeftPos = (self.nzWidth-(self.nzWidth)-(self.options.lensBorderSize*2));
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));
662 self.zoomLens.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
664 if(self.changeBgSize){
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' });
671 self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
674 if(self.options.zoomType == "lens"){
675 self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
677 self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
679 self.changeBgSize = false;
682 self.setWindowPostition(e);
685 if(self.options.tint) {
686 self.setTintPosition(e);
689 //set the css background position
690 if(self.options.zoomType == "window") {
691 self.setWindowPostition(e);
693 if(self.options.zoomType == "inner") {
694 self.setWindowPostition(e);
696 if(self.options.showLens) {
698 if(self.fullwidth && self.options.zoomType != "lens"){
699 self.lensLeftPos = 0;
702 self.zoomLens.css({ left: self.lensLeftPos + 'px', top: self.lensTopPos + 'px' })
710 showHideWindow: function(change) {
712 if(change == "show"){
713 if(!self.isWindowActive){
714 if(self.options.zoomWindowFadeIn){
715 self.zoomWindow.stop(true, true, false).fadeIn(self.options.zoomWindowFadeIn);
717 else{self.zoomWindow.show();}
718 self.isWindowActive = true;
721 if(change == "hide"){
722 if(self.isWindowActive){
723 if(self.options.zoomWindowFadeOut){
724 self.zoomWindow.stop(true, true).fadeOut(self.options.zoomWindowFadeOut);
726 else{self.zoomWindow.hide();}
727 self.isWindowActive = false;
731 showHideLens: function(change) {
733 if(change == "show"){
734 if(!self.isLensActive){
735 if(self.options.lensFadeIn){
736 self.zoomLens.stop(true, true, false).fadeIn(self.options.lensFadeIn);
738 else{self.zoomLens.show();}
739 self.isLensActive = true;
742 if(change == "hide"){
743 if(self.isLensActive){
744 if(self.options.lensFadeOut){
745 self.zoomLens.stop(true, true).fadeOut(self.options.lensFadeOut);
747 else{self.zoomLens.hide();}
748 self.isLensActive = false;
752 showHideTint: function(change) {
754 if(change == "show"){
755 if(!self.isTintActive){
757 if(self.options.zoomTintFadeIn){
758 self.zoomTint.css({opacity:self.options.tintOpacity}).animate().stop(true, true).fadeIn("slow");
761 self.zoomTint.css({opacity:self.options.tintOpacity}).animate();
762 self.zoomTint.show();
766 self.isTintActive = true;
769 if(change == "hide"){
770 if(self.isTintActive){
772 if(self.options.zoomTintFadeOut){
773 self.zoomTint.stop(true, true).fadeOut(self.options.zoomTintFadeOut);
775 else{self.zoomTint.hide();}
776 self.isTintActive = false;
780 setLensPostition: function( e ) {
784 setWindowPostition: function( e ) {
785 //return obj.slice( 0, count );
788 if(!isNaN(self.options.zoomWindowPosition)){
790 switch (self.options.zoomWindowPosition) {
792 self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1
793 self.windowOffsetLeft =(+self.nzWidth); //DONE 1, 2, 3, 4, 16
796 if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
798 self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1);
799 self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
801 else{ //negative margin
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
810 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
811 self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
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
818 if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
819 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
821 self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1);
823 else{ //negative margin
830 self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
831 self.windowOffsetLeft = 0; //DONE 7, 13
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
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
842 if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
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
847 else{ //negative margin
852 self.windowOffsetTop = (self.options.zoomWindowOffety);
853 self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
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
860 self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
861 self.windowOffsetLeft =(0); //DONE 7, 13
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
867 self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1);
869 else{ //negative margin
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
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
883 self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1
884 self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
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();
894 self.windowOffsetTop = self.externalContainerOffset.top;//DONE - 1
895 self.windowOffsetLeft =self.externalContainerOffset.left; //DONE 1, 2, 3, 4, 16
898 self.isWindowSet = true;
899 self.windowOffsetTop = self.windowOffsetTop + self.options.zoomWindowOffety;
900 self.windowOffsetLeft = self.windowOffsetLeft + self.options.zoomWindowOffetx;
902 self.zoomWindow.css({ top: self.windowOffsetTop});
903 self.zoomWindow.css({ left: self.windowOffsetLeft});
905 if(self.options.zoomType == "inner") {
906 self.zoomWindow.css({ top: 398});
907 self.zoomWindow.css({ left: 0});
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));}
919 //stops micro movements
921 self.windowTopPos = 0;
925 self.windowLeftPos = 0;
928 //set the css background position
931 if(self.options.zoomType == "window" || self.options.zoomType == "inner") {
933 if(self.zoomLock == 1){
934 //overrides for images not zoomable
935 if(self.widthRatio <= 1){
937 self.windowLeftPos = 0;
939 if(self.heightRatio <= 1){
940 self.windowTopPos = 0;
943 // adjust images less than the window height
945 if(self.largeHeight < self.options.zoomWindowHeight){
947 self.windowTopPos = 0;
949 if(self.largeWidth < self.options.zoomWindowWidth){
950 self.windowLeftPos = 0;
953 //set the zoomwindow background position
954 if (self.options.easing){
956 // if(self.changeZoom){
957 // clearInterval(self.loop);
958 // self.changeZoom = false;
959 // self.loop = false;
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
967 self.loop = setInterval(function(){
968 //using zeno's paradox
970 self.xp += (self.windowLeftPos - self.xp) / self.options.easingAmount;
971 self.yp += (self.windowTopPos - self.yp) / self.options.easingAmount;
972 if(self.scrollingLock){
975 clearInterval(self.loop);
976 self.xp = self.windowLeftPos;
977 self.yp = self.windowTopPos
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));
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' });
987 self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
990 if(self.options.zoomType != "lens"){
991 self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
993 self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
998 if(!self.bgxp){self.bgxp = self.largeWidth/self.newvalue;}
999 if(!self.bgyp){self.bgyp = self.largeHeight/self.newvalue ;}
1001 self.bgloop = setInterval(function(){
1003 self.bgxp += (self.largeWidth/self.newvalue - self.bgxp) / self.options.easingAmount;
1004 self.bgyp += (self.largeHeight/self.newvalue - self.bgyp) / self.options.easingAmount;
1006 self.zoomWindow.css({ "background-size": self.bgxp + 'px ' + self.bgyp + 'px' });
1013 self.changeBgSize = false;
1016 self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
1017 self.scrollingLock = false;
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' });
1027 self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
1030 if(self.options.zoomType != "lens"){
1031 self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
1033 self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
1035 self.changeBgSize = false;
1038 self.zoomWindow.css({ backgroundPosition: self.xp + 'px ' + self.yp + 'px' });
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' });
1050 self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
1053 if(self.options.zoomType == "lens"){
1054 self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
1056 if((self.largeHeight/self.newvaluewidth) < self.options.zoomWindowHeight){
1058 self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
1062 self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
1066 self.changeBgSize = false;
1069 self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
1073 setTintPosition: function(e){
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));
1085 self.tintposy = (self.nzHeight-self.zoomLens.height()-(self.options.lensBorderSize*2))*(-1);
1088 self.tintpos = ((self.nzWidth-self.zoomLens.width()-(self.options.lensBorderSize*2))*(-1));
1090 if(self.options.tint) {
1091 //stops micro movements
1092 if(self.fullheight){
1100 self.zoomTintImage.css({'left': self.tintpos+'px'});
1101 self.zoomTintImage.css({'top': self.tintposy+'px'});
1105 swaptheimage: function(smallimage, largeimage){
1107 var newImg = new Image();
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);
1114 self.options.onImageSwap(self.$elem);
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);
1124 newImg.src = largeimage; // this must be done AFTER setting onload
1127 swapAction: function(smallimage, largeimage){
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);
1139 self.doneCallback();
1142 newImg2.src = smallimage;
1144 //reset the zoomlevel to that initially set in options
1145 self.currentZoomLevel = self.options.zoomLevel;
1146 self.options.maxZoomLevel = false;
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 + "')" });
1154 if(self.options.zoomType == "window") {
1155 self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" });
1157 if(self.options.zoomType == "inner") {
1158 self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" });
1163 self.currentImage = largeimage;
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() {
1174 oldImg.fadeIn(self.options.imageCrossfade);
1176 if(self.options.tint) {
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() {
1185 oldImgTint.fadeIn(self.options.imageCrossfade);
1188 //self.zoomTintImage.attr("width",elem.data("image"));
1190 self.zoomTint.css({ height: self.$elem.height()});
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()});
1207 if(self.options.constrainType){
1209 //This will contrain the image proportions
1210 if(self.options.constrainType == "height"){
1212 if(self.options.imageCrossfade){
1213 self.zoomWrap.css("height", self.options.constrainSize);
1214 self.zoomWrap.css("width", "auto");
1217 self.$elem.css("height", self.options.constrainSize);
1218 self.$elem.css("width", "auto");
1222 self.zoomTintImage.css("height", self.options.constrainSize);
1223 self.zoomTintImage.css("width", "auto");
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);
1235 self.$elem.css("height", "auto");
1236 self.$elem.css("width", self.options.constrainSize);
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);
1251 doneCallback: function(){
1254 if(self.options.loadingIcon){
1255 self.spinner.hide();
1258 self.nzOffset = self.$elem.offset();
1259 self.nzWidth = self.$elem.width();
1260 self.nzHeight = self.$elem.height();
1262 // reset the zoomlevel back to default
1263 self.currentZoomLevel = self.options.zoomLevel;
1265 //ratio of the large to small image
1266 self.widthRatio = self.largeWidth / self.nzWidth;
1267 self.heightRatio = self.largeHeight / self.nzHeight;
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;
1276 lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
1278 if(self.largeWidth < self.options.zoomWindowWidth){
1279 lensWidth = self.nzHWidth;
1282 lensWidth = (self.options.zoomWindowWidth/self.widthRatio);
1286 self.zoomLens.css('width', lensWidth);
1287 self.zoomLens.css('height', lensHeight);
1291 getCurrentImage: function(){
1293 return self.zoomImage;
1295 getGalleryList: function(){
1297 //loop through the gallery options and set them in list for fancybox
1298 self.gallerylist = [];
1299 if (self.options.gallery){
1302 $('#'+self.options.gallery + ' a').each(function() {
1305 if($(this).data("zoom-image")){
1306 img_src = $(this).data("zoom-image");
1308 else if($(this).data("image")){
1309 img_src = $(this).data("image");
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")
1319 self.gallerylist.push({
1320 href: ''+img_src+'',
1321 title: $(this).find('img').attr("title")
1328 //if no gallery - return current image
1330 self.gallerylist.push({
1331 href: ''+self.zoomImage+'',
1332 title: $(this).find('img').attr("title")
1335 return self.gallerylist;
1338 changeZoomLevel: function(value){
1341 //flag a zoom, so can adjust the easing during setPosition
1342 self.scrollingLock = true;
1344 //round to two decimal places
1345 self.newvalue = parseFloat(value).toFixed(2);
1346 newvalue = parseFloat(value).toFixed(2);
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);
1358 //calculate new heightratio
1359 if(self.options.zoomType != "inner")
1361 if(maxheightnewvalue <= newvalue){
1362 self.heightRatio = (self.largeHeight/maxheightnewvalue) / self.nzHeight;
1363 self.newvalueheight = maxheightnewvalue;
1364 self.fullheight = true;
1368 self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight;
1369 self.newvalueheight = newvalue;
1370 self.fullheight = false;
1375 // calculate new width ratio
1377 if(maxwidthtnewvalue <= newvalue){
1378 self.widthRatio = (self.largeWidth/maxwidthtnewvalue) / self.nzWidth;
1379 self.newvaluewidth = maxwidthtnewvalue;
1380 self.fullwidth = true;
1384 self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
1385 self.newvaluewidth = newvalue;
1386 self.fullwidth = false;
1389 if(self.options.zoomType == "lens"){
1390 if(maxheightnewvalue <= newvalue){
1391 self.fullwidth = true;
1392 self.newvaluewidth = maxheightnewvalue;
1395 self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
1396 self.newvaluewidth = newvalue;
1398 self.fullwidth = false;
1404 if(self.options.zoomType == "inner")
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;
1411 if(newvalue > maxwidthtnewvalue){
1412 newvalue = maxwidthtnewvalue;
1416 if(maxheightnewvalue <= newvalue){
1419 self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight;
1420 if(newvalue > maxheightnewvalue){
1421 self.newvalueheight = maxheightnewvalue;
1423 self.newvalueheight = newvalue;
1425 self.fullheight = true;
1433 self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight;
1435 if(newvalue > maxheightnewvalue){
1437 self.newvalueheight = maxheightnewvalue;
1439 self.newvalueheight = newvalue;
1441 self.fullheight = false;
1447 if(maxwidthtnewvalue <= newvalue){
1449 self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
1450 if(newvalue > maxwidthtnewvalue){
1452 self.newvaluewidth = maxwidthtnewvalue;
1454 self.newvaluewidth = newvalue;
1457 self.fullwidth = true;
1463 self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
1464 self.newvaluewidth = newvalue;
1465 self.fullwidth = false;
1470 scrcontinue = false;
1472 if(self.options.zoomType == "inner"){
1474 if(self.nzWidth > self.nzHeight){
1475 if( self.newvaluewidth <= maxwidthtnewvalue){
1480 scrcontinue = false;
1481 self.fullheight = true;
1482 self.fullwidth = true;
1485 if(self.nzHeight > self.nzWidth){
1486 if( self.newvaluewidth <= maxwidthtnewvalue){
1490 scrcontinue = false;
1492 self.fullheight = true;
1493 self.fullwidth = true;
1498 if(self.options.zoomType != "inner"){
1507 self.changeZoom = true;
1509 //if lens height is less than image height
1512 if(((self.options.zoomWindowHeight)/self.heightRatio) <= self.nzHeight){
1515 self.currentZoomLevel = self.newvalueheight;
1516 if(self.options.zoomType != "lens" && self.options.zoomType != "inner") {
1517 self.changeBgSize = true;
1519 self.zoomLens.css({height: String((self.options.zoomWindowHeight)/self.heightRatio) + 'px' })
1521 if(self.options.zoomType == "lens" || self.options.zoomType == "inner") {
1522 self.changeBgSize = true;
1531 if((self.options.zoomWindowWidth/self.widthRatio) <= self.nzWidth){
1535 if(self.options.zoomType != "inner"){
1536 if(self.newvaluewidth > self.newvalueheight) {
1537 self.currentZoomLevel = self.newvaluewidth;
1542 if(self.options.zoomType != "lens" && self.options.zoomType != "inner") {
1543 self.changeBgSize = true;
1545 self.zoomLens.css({width: String((self.options.zoomWindowWidth)/self.widthRatio) + 'px' })
1547 if(self.options.zoomType == "lens" || self.options.zoomType == "inner") {
1548 self.changeBgSize = true;
1552 if(self.options.zoomType == "inner"){
1553 self.changeBgSize = true;
1555 if(self.nzWidth > self.nzHeight){
1556 self.currentZoomLevel = self.newvaluewidth;
1558 if(self.nzHeight > self.nzWidth){
1559 self.currentZoomLevel = self.newvaluewidth;
1565 //sets the boundry change, called in setWindowPos
1566 self.setPosition(self.currentLoc);
1569 closeAll: function(){
1570 if(self.zoomWindow){self.zoomWindow.hide();};
1571 if(self.zoomLens){self.zoomLens.hide();}
1572 if(self.zoomTint){self.zoomTint.hide();}
1580 $.fn.elevateZoom = function( options ) {
1581 return this.each(function() {
1582 var elevate = Object.create( ElevateZoom );
1584 elevate.init( options, this );
1586 $.data( this, 'elevateZoom', elevate );
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,
1602 zoomWindowWidth: 600,
1603 zoomWindowHeight: 400,
1604 zoomWindowOffetx: 0,
1605 zoomWindowOffety: 0,
1606 zoomWindowPosition: 1,
1607 zoomWindowBgColour: "#fff",
1611 zoomWindowFadeIn: false,
1612 zoomWindowFadeOut: false,
1613 zoomWindowAlwaysShow: false,
1614 zoomTintFadeIn: false,
1615 zoomTintFadeOut: false,
1618 borderColour: "#888",
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
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
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
1639 onZoomedImageLoaded: function() {},
1640 onImageSwap: $.noop,
1641 onImageSwapComplete: $.noop
1644 })( jQuery, window, document );