| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790 |
- /*
- * jQuery elevateZoom 3.0.8
- * Demo's and documentation:
- * www.elevateweb.co.uk/image-zoom
- *
- * Copyright (c) 2012 Andrew Eades
- * www.elevateweb.co.uk
- *
- * Dual licensed under the GPL and MIT licenses.
- * http://en.wikipedia.org/wiki/MIT_License
- * http://en.wikipedia.org/wiki/GNU_General_Public_License
- *
- /*
- * jQuery elevateZoom 3.0.3
- * Demo's and documentation:
- * www.elevateweb.co.uk/image-zoom
- *
- * Copyright (c) 2012 Andrew Eades
- * www.elevateweb.co.uk
- *
- * Dual licensed under the GPL and MIT licenses.
- * http://en.wikipedia.org/wiki/MIT_License
- * http://en.wikipedia.org/wiki/GNU_General_Public_License
- */
- if ( typeof Object.create !== 'function' ) {
- Object.create = function( obj ) {
- function F() {};
- F.prototype = obj;
- return new F();
- };
- }
- (function( $, window, document, undefined ) {
- var ElevateZoom = {
- init: function( options, elem ) {
- var self = this;
- self.elem = elem;
- self.$elem = $( elem );
- self.imageSrc = self.$elem.data("zoom-image") ? self.$elem.data("zoom-image") : self.$elem.attr("src");
- self.options = $.extend( {}, $.fn.elevateZoom.options, options );
- //TINT OVERRIDE SETTINGS
- if(self.options.tint) {
- self.options.lensColour = "none", //colour of the lens background
- self.options.lensOpacity = "1" //opacity of the lens
- }
- //INNER OVERRIDE SETTINGS
- if(self.options.zoomType == "inner") {self.options.showLens = false;}
- //Remove alt on hover
- self.$elem.parent().removeAttr('title').removeAttr('alt');
- self.zoomImage = self.imageSrc;
- self.refresh( 1 );
- //Create the image swap from the gallery
- $('#'+self.options.gallery + ' a').click( function(e) {
- //Set a class on the currently active gallery image
- if(self.options.galleryActiveClass){
- $('#'+self.options.gallery + ' a').removeClass(self.options.galleryActiveClass);
- $(this).addClass(self.options.galleryActiveClass);
- }
- //stop any link on the a tag from working
- e.preventDefault();
- //call the swap image function
- if($(this).data("zoom-image")){self.zoomImagePre = $(this).data("zoom-image")}
- else{self.zoomImagePre = $(this).data("image");}
- self.swaptheimage($(this).data("image"), self.zoomImagePre);
- return false;
- });
- },
- refresh: function( length ) {
- var self = this;
- setTimeout(function() {
- self.fetch(self.imageSrc);
- }, length || self.options.refresh );
- },
- fetch: function(imgsrc) {
- //get the image
- var self = this;
- var newImg = new Image();
- newImg.onload = function() {
- //set the large image dimensions - used to calculte ratio's
- self.largeWidth = newImg.width;
- self.largeHeight = newImg.height;
- //once image is loaded start the calls
- self.startZoom();
- self.currentImage = self.imageSrc;
- //let caller know image has been loaded
- self.options.onZoomedImageLoaded(self.$elem);
- }
- newImg.src = imgsrc; // this must be done AFTER setting onload
- return;
- },
- startZoom: function( ) {
- var self = this;
- //get dimensions of the non zoomed image
- self.nzWidth = self.$elem.width();
- self.nzHeight = self.$elem.height();
- //activated elements
- self.isWindowActive = false;
- self.isLensActive = false;
- self.isTintActive = false;
- self.overWindow = false;
- //CrossFade Wrappe
- if(self.options.imageCrossfade){
- self.zoomWrap = self.$elem.wrap('<div style="height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;" class="zoomWrapper" />');
- self.$elem.css('position', 'absolute');
- }
- self.zoomLock = 1;
- self.scrollingLock = false;
- self.changeBgSize = false;
- self.currentZoomLevel = self.options.zoomLevel;
- //get offset of the non zoomed image
- self.nzOffset = self.$elem.offset();
- //calculate the width ratio of the large/small image
- self.widthRatio = (self.largeWidth/self.currentZoomLevel) / self.nzWidth;
- self.heightRatio = (self.largeHeight/self.currentZoomLevel) / self.nzHeight;
- //if window zoom
- if(self.options.zoomType == "window") {
- self.zoomWindowStyle = "overflow: hidden;"
- + "background-position: 0px 0px;text-align:center;"
- + "background-color: " + String(self.options.zoomWindowBgColour)
- + ";width: " + String(self.options.zoomWindowWidth) + "px;"
- + "height: " + String(self.options.zoomWindowHeight)
- + "px;float: left;"
- + "background-size: "+ self.largeWidth/self.currentZoomLevel+ "px " +self.largeHeight/self.currentZoomLevel + "px;"
- + "display: none;z-index:100;"
- + "border: " + String(self.options.borderSize)
- + "px solid " + self.options.borderColour
- + ";background-repeat: no-repeat;"
- + "position: absolute;";
- }
- //if inner zoom
- if(self.options.zoomType == "inner") {
- //has a border been put on the image? Lets cater for this
- var borderWidth = self.$elem.css("border-left-width");
- self.zoomWindowStyle = "overflow: hidden;"
- + "margin-left: " + String(borderWidth) + ";"
- + "margin-top: " + String(borderWidth) + ";"
- + "background-position: 0px 0px;"
- + "width: " + String(self.nzWidth) + "px;"
- + "height: " + String(self.nzHeight) + "px;"
- + "px;float: left;"
- + "display: none;"
- + "cursor:"+(self.options.cursor)+";"
- + "px solid " + self.options.borderColour
- + ";background-repeat: no-repeat;"
- + "position: absolute;";
- }
- //lens style for window zoom
- if(self.options.zoomType == "window") {
- // adjust images less than the window height
- if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
- lensHeight = self.nzHeight;
- }
- else{
- lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
- }
- if(self.largeWidth < self.options.zoomWindowWidth){
- lensWidth = self.nzWidth;
- }
- else{
- lensWidth = (self.options.zoomWindowWidth/self.widthRatio);
- }
- self.lensStyle = "background-position: 0px 0px;width: " + String((self.options.zoomWindowWidth)/self.widthRatio) + "px;height: " + String((self.options.zoomWindowHeight)/self.heightRatio)
- + "px;float: right;display: none;"
- + "overflow: hidden;"
- + "z-index: 999;"
- + "-webkit-transform: translateZ(0);"
- + "opacity:"+(self.options.lensOpacity)+";filter: alpha(opacity = "+(self.options.lensOpacity*100)+"); zoom:1;"
- + "width:"+lensWidth+"px;"
- + "height:"+lensHeight+"px;"
- + "background-color:"+(self.options.lensColour)+";"
- + "cursor:"+(self.options.cursor)+";"
- + "border: "+(self.options.lensBorderSize)+"px" +
- " solid "+(self.options.lensBorderColour)+";background-repeat: no-repeat;position: absolute;";
- }
- //tint style
- self.tintStyle = "display: block;"
- + "position: absolute;"
- + "background-color: "+self.options.tintColour+";"
- + "filter:alpha(opacity=0);"
- + "opacity: 0;"
- + "width: " + self.nzWidth + "px;"
- + "height: " + self.nzHeight + "px;"
- ;
- //lens style for lens zoom with optional round for modern browsers
- self.lensRound = '';
- if(self.options.zoomType == "lens") {
- self.lensStyle = "background-position: 0px 0px;"
- + "float: left;display: none;"
- + "border: " + String(self.options.borderSize) + "px solid " + self.options.borderColour+";"
- + "width:"+ String(self.options.lensSize) +"px;"
- + "height:"+ String(self.options.lensSize)+"px;"
- + "background-repeat: no-repeat;position: absolute;";
- }
- //does not round in all browsers
- if(self.options.lensShape == "round") {
- self.lensRound = "border-top-left-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"
- + "border-top-right-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"
- + "border-bottom-left-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;"
- + "border-bottom-right-radius: " + String(self.options.lensSize / 2 + self.options.borderSize) + "px;";
- }
- //create the div's + ""
- //self.zoomContainer = $('<div/>').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth});
- 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>');
- $('body').append(self.zoomContainer);
- //this will add overflow hidden and contrain the lens on lens mode
- if(self.options.containLensZoom && self.options.zoomType == "lens"){
- self.zoomContainer.css("overflow", "hidden");
- }
- if(self.options.zoomType != "inner") {
- self.zoomLens = $("<div class='zoomLens' style='" + self.lensStyle + self.lensRound +"'> </div>")
- .appendTo(self.zoomContainer)
- .click(function () {
- self.$elem.trigger('click');
- });
- if(self.options.tint) {
- self.tintContainer = $('<div/>').addClass('tintContainer');
- self.zoomTint = $("<div class='zoomTint' style='"+self.tintStyle+"'></div>");
- self.zoomLens.wrap(self.tintContainer);
- self.zoomTintcss = self.zoomLens.after(self.zoomTint);
- //if tint enabled - set an image to show over the tint
- self.zoomTintImage = $('<img style="position: absolute; left: 0px; top: 0px; max-width: none; width: '+self.nzWidth+'px; height: '+self.nzHeight+'px;" src="'+self.imageSrc+'">')
- .appendTo(self.zoomLens)
- .click(function () {
- self.$elem.trigger('click');
- });
- }
- }
- //create zoom window
- if(isNaN(self.options.zoomWindowPosition)){
- self.zoomWindow = $("<div style='z-index:999;left:"+(self.windowOffsetLeft)+"px;top:"+(self.windowOffsetTop)+"px;" + self.zoomWindowStyle + "' class='zoomWindow'> </div>")
- .appendTo('body')
- .click(function () {
- self.$elem.trigger('click');
- });
- }else{
- self.zoomWindow = $("<div style='z-index:999;left:"+(self.windowOffsetLeft)+"px;top:"+(self.windowOffsetTop)+"px;" + self.zoomWindowStyle + "' class='zoomWindow'> </div>")
- .appendTo(self.zoomContainer)
- .click(function () {
- self.$elem.trigger('click');
- });
- }
- self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth);
- self.zoomWindow.wrap(self.zoomWindowContainer);
- // self.captionStyle = "text-align: left;background-color: black;color: white;font-weight: bold;padding: 10px;font-family: sans-serif;font-size: 11px";
- // self.zoomCaption = $('<div class="elevatezoom-caption" style="'+self.captionStyle+'display: block; width: 280px;">INSERT ALT TAG</div>').appendTo(self.zoomWindow.parent());
- if(self.options.zoomType == "lens") {
- self.zoomLens.css({ backgroundImage: "url('" + self.imageSrc + "')" });
- }
- if(self.options.zoomType == "window") {
- self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" });
- }
- if(self.options.zoomType == "inner") {
- self.zoomWindow.css({ backgroundImage: "url('" + self.imageSrc + "')" });
- }
- /*-------------------END THE ZOOM WINDOW AND LENS----------------------------------*/
- //touch events
- self.$elem.bind('touchmove', function(e){
- e.preventDefault();
- var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
- self.setPosition(touch);
- });
- self.zoomContainer.bind('touchmove', function(e){
- if(self.options.zoomType == "inner") {
- self.showHideWindow("show");
- }
- e.preventDefault();
- var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
- self.setPosition(touch);
- });
- self.zoomContainer.bind('touchend', function(e){
- self.showHideWindow("hide");
- if(self.options.showLens) {self.showHideLens("hide");}
- if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
- });
- self.$elem.bind('touchend', function(e){
- self.showHideWindow("hide");
- if(self.options.showLens) {self.showHideLens("hide");}
- if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
- });
- if(self.options.showLens) {
- self.zoomLens.bind('touchmove', function(e){
- e.preventDefault();
- var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
- self.setPosition(touch);
- });
- self.zoomLens.bind('touchend', function(e){
- self.showHideWindow("hide");
- if(self.options.showLens) {self.showHideLens("hide");}
- if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("hide");}
- });
- }
- //Needed to work in IE
- self.$elem.bind('mousemove', function(e){
- if(self.overWindow == false){self.setElements("show");}
- //make sure on orientation change the setposition is not fired
- if(self.lastX !== e.clientX || self.lastY !== e.clientY){
- self.setPosition(e);
- self.currentLoc = e;
- }
- self.lastX = e.clientX;
- self.lastY = e.clientY;
- });
- self.zoomContainer.bind('mousemove', function(e){
- if(self.overWindow == false){self.setElements("show");}
- //make sure on orientation change the setposition is not fired
- if(self.lastX !== e.clientX || self.lastY !== e.clientY){
- self.setPosition(e);
- self.currentLoc = e;
- }
- self.lastX = e.clientX;
- self.lastY = e.clientY;
- });
- if(self.options.zoomType != "inner") {
- self.zoomLens.bind('mousemove', function(e){
- //make sure on orientation change the setposition is not fired
- if(self.lastX !== e.clientX || self.lastY !== e.clientY){
- self.setPosition(e);
- self.currentLoc = e;
- }
- self.lastX = e.clientX;
- self.lastY = e.clientY;
- });
- }
- if(self.options.tint && self.options.zoomType != "inner") {
- self.zoomTint.bind('mousemove', function(e){
- //make sure on orientation change the setposition is not fired
- if(self.lastX !== e.clientX || self.lastY !== e.clientY){
- self.setPosition(e);
- self.currentLoc = e;
- }
- self.lastX = e.clientX;
- self.lastY = e.clientY;
- });
- }
- if(self.options.zoomType == "inner") {
- self.zoomWindow.bind('mousemove', function(e) {
- //self.overWindow = true;
- //make sure on orientation change the setposition is not fired
- if(self.lastX !== e.clientX || self.lastY !== e.clientY){
- self.setPosition(e);
- self.currentLoc = e;
- }
- self.lastX = e.clientX;
- self.lastY = e.clientY;
- });
- }
- // lensFadeOut: 500, zoomTintFadeIn
- self.zoomContainer.add(self.$elem).mouseenter(function(){
- if(self.overWindow == false){self.setElements("show");}
- }).mouseleave(function(){
- if(!self.scrollLock){
- self.setElements("hide");
- self.options.onDestroy(self.$elem);
- }
- });
- //end ove image
- if(self.options.zoomType != "inner") {
- self.zoomWindow.mouseenter(function(){
- self.overWindow = true;
- self.setElements("hide");
- }).mouseleave(function(){
- self.overWindow = false;
- });
- }
- //end ove image
- // var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);
- // $(this).empty();
- // return false;
- //fix for initial zoom setting
- if (self.options.zoomLevel != 1){
- // self.changeZoomLevel(self.currentZoomLevel);
- }
- //set the min zoomlevel
- if(self.options.minZoomLevel){
- self.minZoomLevel = self.options.minZoomLevel;
- }
- else{
- self.minZoomLevel = self.options.scrollZoomIncrement * 2;
- }
- if(self.options.scrollZoom){
- self.zoomContainer.add(self.$elem).bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(e){
- // in IE there is issue with firing of mouseleave - So check whether still scrolling
- // and on mouseleave check if scrolllock
- self.scrollLock = true;
- clearTimeout($.data(this, 'timer'));
- $.data(this, 'timer', setTimeout(function() {
- self.scrollLock = false;
- //do something
- }, 250));
- var theEvent = e.originalEvent.wheelDelta || e.originalEvent.detail*-1
- //this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
- // e.preventDefault();
- e.stopImmediatePropagation();
- e.stopPropagation();
- e.preventDefault();
- if(theEvent /120 > 0) {
- //scrolling up
- if(self.currentZoomLevel >= self.minZoomLevel){
- self.changeZoomLevel(self.currentZoomLevel-self.options.scrollZoomIncrement);
- }
- }
- else{
- //scrolling down
- if(self.options.maxZoomLevel){
- if(self.currentZoomLevel <= self.options.maxZoomLevel){
- self.changeZoomLevel(parseFloat(self.currentZoomLevel)+self.options.scrollZoomIncrement);
- }
- }
- else{
- //andy
- self.changeZoomLevel(parseFloat(self.currentZoomLevel)+self.options.scrollZoomIncrement);
- }
- }
- return false;
- });
- }
- },
- setElements: function(type) {
- var self = this;
- if(!self.options.zoomEnabled){return false;}
- if(type=="show"){
- if(self.isWindowSet){
- if(self.options.zoomType == "inner") {self.showHideWindow("show");}
- if(self.options.zoomType == "window") {self.showHideWindow("show");}
- if(self.options.showLens) {self.showHideLens("show");}
- if(self.options.tint && self.options.zoomType != "inner") {self.showHideTint("show");
- }
- }
- }
- if(type=="hide"){
- if(self.options.zoomType == "window") {self.showHideWindow("hide");}
- if(!self.options.tint) {self.showHideWindow("hide");}
- if(self.options.showLens) {self.showHideLens("hide");}
- if(self.options.tint) { self.showHideTint("hide");}
- }
- },
- setPosition: function(e) {
-
- var self = this;
-
- if(!self.options.zoomEnabled){return false;}
- //recaclc offset each time in case the image moves
- //this can be caused by other on page elements
- self.nzHeight = self.$elem.height();
- self.nzWidth = self.$elem.width();
- self.nzOffset = self.$elem.offset();
- if(self.options.tint && self.options.zoomType != "inner") {
- self.zoomTint.css({ top: 0});
- self.zoomTint.css({ left: 0});
- }
- //set responsive
- //will checking if the image needs changing before running this code work faster?
- if(self.options.responsive && !self.options.scrollZoom){
- if(self.options.showLens){
- if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
- lensHeight = self.nzHeight;
- }
- else{
- lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
- }
- if(self.largeWidth < self.options.zoomWindowWidth){
- lensWidth = self.nzWidth;
- }
- else{
- lensWidth = (self.options.zoomWindowWidth/self.widthRatio);
- }
- self.widthRatio = self.largeWidth / self.nzWidth;
- self.heightRatio = self.largeHeight / self.nzHeight;
- if(self.options.zoomType != "lens") {
- //possibly dont need to keep recalcalculating
- //if the lens is heigher than the image, then set lens size to image size
- if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
- lensHeight = self.nzHeight;
- }
- else{
- lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
- }
- if(self.nzWidth < self.options.zoomWindowHeight/self.heightRatio){
- lensWidth = self.nzWidth;
- }
- else{
- lensWidth = String((self.options.zoomWindowWidth/self.widthRatio));
- }
- self.zoomLens.css('width', lensWidth);
- self.zoomLens.css('height', lensHeight);
- if(self.options.tint){
- self.zoomTintImage.css('width', self.nzWidth);
- self.zoomTintImage.css('height', self.nzHeight);
- }
- }
- if(self.options.zoomType == "lens") {
- self.zoomLens.css({ width: String(self.options.lensSize) + 'px', height: String(self.options.lensSize) + 'px' })
- }
- //end responsive image change
- }
- }
- //container fix
- self.zoomContainer.css({ top: self.nzOffset.top});
- self.zoomContainer.css({ left: self.nzOffset.left});
- self.mouseLeft = parseInt(e.pageX - self.nzOffset.left);
- self.mouseTop = parseInt(e.pageY - self.nzOffset.top);
- //calculate the Location of the Lens
- //calculate the bound regions - but only if zoom window
- if(self.options.zoomType == "window") {
- self.Etoppos = (self.mouseTop < (self.zoomLens.height()/2));
- self.Eboppos = (self.mouseTop > self.nzHeight - (self.zoomLens.height()/2)-(self.options.lensBorderSize*2));
- self.Eloppos = (self.mouseLeft < 0+((self.zoomLens.width()/2)));
- self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.zoomLens.width()/2)-(self.options.lensBorderSize*2)));
- }
- //calculate the bound regions - but only for inner zoom
- if(self.options.zoomType == "inner"){
- self.Etoppos = (self.mouseTop < ((self.nzHeight/2)/self.heightRatio) );
- self.Eboppos = (self.mouseTop > (self.nzHeight - ((self.nzHeight/2)/self.heightRatio)));
- self.Eloppos = (self.mouseLeft < 0+(((self.nzWidth/2)/self.widthRatio)));
- self.Eroppos = (self.mouseLeft > (self.nzWidth - (self.nzWidth/2)/self.widthRatio-(self.options.lensBorderSize*2)));
- }
- // if the mouse position of the slider is one of the outerbounds, then hide window and lens
- if (self.mouseLeft < 0 || self.mouseTop < 0 || self.mouseLeft > self.nzWidth || self.mouseTop > self.nzHeight ) {
- self.setElements("hide");
- return;
- }
- //else continue with operations
- else {
- //lens options
- if(self.options.showLens) {
- // self.showHideLens("show");
- //set background position of lens
- self.lensLeftPos = String(Math.floor(self.mouseLeft - self.zoomLens.width() / 2));
- self.lensTopPos = String(Math.floor(self.mouseTop - self.zoomLens.height() / 2));
- }
- //adjust the background position if the mouse is in one of the outer regions
- //Top region
- if(self.Etoppos){
- self.lensTopPos = 0;
- }
- //Left Region
- if(self.Eloppos){
- self.windowLeftPos = 0;
- self.lensLeftPos = 0;
- self.tintpos=0;
- }
- //Set bottom and right region for window mode
- if(self.options.zoomType == "window") {
- if(self.Eboppos){
- self.lensTopPos = Math.max( (self.nzHeight)-self.zoomLens.height()-(self.options.lensBorderSize*2), 0 );
- }
- if(self.Eroppos){
- self.lensLeftPos = (self.nzWidth-(self.zoomLens.width())-(self.options.lensBorderSize*2));
- }
- }
- //Set bottom and right region for inner mode
- if(self.options.zoomType == "inner") {
- if(self.Eboppos){
- self.lensTopPos = Math.max( ((self.nzHeight)-(self.options.lensBorderSize*2)), 0 );
- }
- if(self.Eroppos){
- self.lensLeftPos = (self.nzWidth-(self.nzWidth)-(self.options.lensBorderSize*2));
- }
- }
- //if lens zoom
- if(self.options.zoomType == "lens") {
- self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomLens.width() / 2) * (-1));
- self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomLens.height() / 2) * (-1));
- self.zoomLens.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
- if(self.changeBgSize){
- if(self.nzHeight>self.nzWidth){
- if(self.options.zoomType == "lens"){
- self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
- }
- self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
- }
- else{
- if(self.options.zoomType == "lens"){
- self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
- }
- self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
- }
- self.changeBgSize = false;
- }
- self.setWindowPostition(e);
- }
- //if tint zoom
- if(self.options.tint && self.options.zoomType != "inner") {
- self.setTintPosition(e);
- }
- //set the css background position
- if(self.options.zoomType == "window") {
- self.setWindowPostition(e);
- }
- if(self.options.zoomType == "inner") {
- self.setWindowPostition(e);
- }
- if(self.options.showLens) {
- if(self.fullwidth && self.options.zoomType != "lens"){
- self.lensLeftPos = 0;
- }
- self.zoomLens.css({ left: self.lensLeftPos + 'px', top: self.lensTopPos + 'px' })
- }
- } //end else
- },
- showHideWindow: function(change) {
- var self = this;
- if(change == "show"){
- if(!self.isWindowActive){
- if(self.options.zoomWindowFadeIn){
- self.zoomWindow.stop(true, true, false).fadeIn(self.options.zoomWindowFadeIn);
- }
- else{self.zoomWindow.show();}
- self.isWindowActive = true;
- }
- }
- if(change == "hide"){
- if(self.isWindowActive){
- if(self.options.zoomWindowFadeOut){
- self.zoomWindow.stop(true, true).fadeOut(self.options.zoomWindowFadeOut, function () {
- if (self.loop) {
- //stop moving the zoom window when zoom window is faded out
- clearInterval(self.loop);
- self.loop = false;
- }
- });
- }
- else{self.zoomWindow.hide();}
- self.isWindowActive = false;
- }
- }
- },
- showHideLens: function(change) {
- var self = this;
- if(change == "show"){
- if(!self.isLensActive){
- if(self.options.lensFadeIn){
- self.zoomLens.stop(true, true, false).fadeIn(self.options.lensFadeIn);
- }
- else{self.zoomLens.show();}
- self.isLensActive = true;
- }
- }
- if(change == "hide"){
- if(self.isLensActive){
- if(self.options.lensFadeOut){
- self.zoomLens.stop(true, true).fadeOut(self.options.lensFadeOut);
- }
- else{self.zoomLens.hide();}
- self.isLensActive = false;
- }
- }
- },
- showHideTint: function(change) {
- var self = this;
- if(change == "show"){
- if(!self.isTintActive){
- if(self.options.zoomTintFadeIn){
- self.zoomTint.css({opacity:self.options.tintOpacity}).animate().stop(true, true).fadeIn("slow");
- }
- else{
- self.zoomTint.css({opacity:self.options.tintOpacity}).animate();
- self.zoomTint.show();
- }
- self.isTintActive = true;
- }
- }
- if(change == "hide"){
- if(self.isTintActive){
- if(self.options.zoomTintFadeOut){
- self.zoomTint.stop(true, true).fadeOut(self.options.zoomTintFadeOut);
- }
- else{self.zoomTint.hide();}
- self.isTintActive = false;
- }
- }
- },
- setLensPostition: function( e ) {
- },
- setWindowPostition: function( e ) {
- //return obj.slice( 0, count );
- var self = this;
- if(!isNaN(self.options.zoomWindowPosition)){
- switch (self.options.zoomWindowPosition) {
- case 1: //done
- self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1
- self.windowOffsetLeft =(+self.nzWidth); //DONE 1, 2, 3, 4, 16
- break;
- case 2:
- if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
- self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1);
- self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
- }
- else{ //negative margin
- }
- break;
- case 3: //done
- self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize*2)); //DONE 3,9
- self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
- break;
- case 4: //done
- self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
- self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
- break;
- case 5: //done
- self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
- self.windowOffsetLeft =(self.nzWidth-self.zoomWindow.width()-(self.options.borderSize*2)); //DONE - 5,15
- break;
- case 6:
- if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
- self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
- self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1);
- }
- else{ //negative margin
- }
- break;
- case 7: //done
- self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
- self.windowOffsetLeft = 0; //DONE 7, 13
- break;
- case 8: //done
- self.windowOffsetTop = (self.nzHeight); //DONE - 4,5,6,7,8
- self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
- break;
- case 9: //done
- self.windowOffsetTop = (self.nzHeight - self.zoomWindow.height() - (self.options.borderSize*2)); //DONE 3,9
- self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
- break;
- case 10:
- if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
- self.windowOffsetTop = ((self.options.zoomWindowHeight/2)-(self.nzHeight/2))*(-1);
- self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
- }
- else{ //negative margin
- }
- break;
- case 11:
- self.windowOffsetTop = (self.options.zoomWindowOffety);
- self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
- break;
- case 12: //done
- self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
- self.windowOffsetLeft =(self.zoomWindow.width()+(self.options.borderSize*2) )* (-1); //DONE 8,9,10,11,12
- break;
- case 13: //done
- self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
- self.windowOffsetLeft =(0); //DONE 7, 13
- break;
- case 14:
- if(self.options.zoomWindowHeight > self.nzHeight){ //positive margin
- self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
- self.windowOffsetLeft =((self.options.zoomWindowWidth/2)-(self.nzWidth/2)+(self.options.borderSize*2))*(-1);
- }
- else{ //negative margin
- }
- break;
- case 15://done
- self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
- self.windowOffsetLeft =(self.nzWidth-self.zoomWindow.width()-(self.options.borderSize*2)); //DONE - 5,15
- break;
- case 16: //done
- self.windowOffsetTop = (self.zoomWindow.height()+(self.options.borderSize*2))*(-1); //DONE 12,13,14,15,16
- self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
- break;
- default: //done
- self.windowOffsetTop = (self.options.zoomWindowOffety);//DONE - 1
- self.windowOffsetLeft =(self.nzWidth); //DONE 1, 2, 3, 4, 16
- }
- } //end isNAN
- else{
- //WE CAN POSITION IN A CLASS - ASSUME THAT ANY STRING PASSED IS
- self.externalContainer = $('#'+self.options.zoomWindowPosition);
- self.externalContainerWidth = self.externalContainer.width();
- self.externalContainerHeight = self.externalContainer.height();
- self.externalContainerOffset = self.externalContainer.offset();
- self.windowOffsetTop = self.externalContainerOffset.top;//DONE - 1
- self.windowOffsetLeft =self.externalContainerOffset.left; //DONE 1, 2, 3, 4, 16
- }
- self.isWindowSet = true;
- self.windowOffsetTop = self.windowOffsetTop + self.options.zoomWindowOffety;
- self.windowOffsetLeft = self.windowOffsetLeft + self.options.zoomWindowOffetx;
- self.zoomWindow.css({ top: self.windowOffsetTop});
- self.zoomWindow.css({ left: self.windowOffsetLeft});
- if(self.options.zoomType == "inner") {
- self.zoomWindow.css({ top: 0});
- self.zoomWindow.css({ left: 0});
- }
- self.windowLeftPos = String(((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1));
- self.windowTopPos = String(((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1));
- if(self.Etoppos){self.windowTopPos = 0;}
- if(self.Eloppos){self.windowLeftPos = 0;}
- if(self.Eboppos){self.windowTopPos = (self.largeHeight/self.currentZoomLevel-self.zoomWindow.height())*(-1); }
- if(self.Eroppos){self.windowLeftPos = ((self.largeWidth/self.currentZoomLevel-self.zoomWindow.width())*(-1));}
- //stops micro movements
- if(self.fullheight){
- self.windowTopPos = 0;
- }
- if(self.fullwidth){
- self.windowLeftPos = 0;
- }
- //set the css background position
- if(self.options.zoomType == "window" || self.options.zoomType == "inner") {
- if(self.zoomLock == 1){
- //overrides for images not zoomable
- if(self.widthRatio <= 1){
- self.windowLeftPos = 0;
- }
- if(self.heightRatio <= 1){
- self.windowTopPos = 0;
- }
- }
- // adjust images less than the window height
- if (self.options.zoomType == "window") {
- if (self.largeHeight < self.options.zoomWindowHeight) {
- self.windowTopPos = 0;
- }
- if (self.largeWidth < self.options.zoomWindowWidth) {
- self.windowLeftPos = 0;
- }
- }
- //set the zoomwindow background position
- if (self.options.easing){
- // if(self.changeZoom){
- // clearInterval(self.loop);
- // self.changeZoom = false;
- // self.loop = false;
- // }
- //set the pos to 0 if not set
- if(!self.xp){self.xp = 0;}
- if(!self.yp){self.yp = 0;}
- //if loop not already started, then run it
- if (!self.loop){
- self.loop = setInterval(function(){
- //using zeno's paradox
- self.xp += (self.windowLeftPos - self.xp) / self.options.easingAmount;
- self.yp += (self.windowTopPos - self.yp) / self.options.easingAmount;
- if(self.scrollingLock){
- clearInterval(self.loop);
- self.xp = self.windowLeftPos;
- self.yp = self.windowTopPos
- self.xp = ((e.pageX - self.nzOffset.left) * self.widthRatio - self.zoomWindow.width() / 2) * (-1);
- self.yp = (((e.pageY - self.nzOffset.top) * self.heightRatio - self.zoomWindow.height() / 2) * (-1));
- if(self.changeBgSize){
- if(self.nzHeight>self.nzWidth){
- if(self.options.zoomType == "lens"){
- self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
- }
- self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
- }
- else{
- if(self.options.zoomType != "lens"){
- self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
- }
- self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
- }
- /*
- if(!self.bgxp){self.bgxp = self.largeWidth/self.newvalue;}
- if(!self.bgyp){self.bgyp = self.largeHeight/self.newvalue ;}
- if (!self.bgloop){
- self.bgloop = setInterval(function(){
- self.bgxp += (self.largeWidth/self.newvalue - self.bgxp) / self.options.easingAmount;
- self.bgyp += (self.largeHeight/self.newvalue - self.bgyp) / self.options.easingAmount;
- self.zoomWindow.css({ "background-size": self.bgxp + 'px ' + self.bgyp + 'px' });
- }, 16);
- }
- */
- self.changeBgSize = false;
- }
- self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
- self.scrollingLock = false;
- self.loop = false;
- }
- else if (Math.round(Math.abs(self.xp - self.windowLeftPos) + Math.abs(self.yp - self.windowTopPos)) < 1) {
- //stops micro movements
- clearInterval(self.loop);
- self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
- self.loop = false;
- }
- else{
- if(self.changeBgSize){
- if(self.nzHeight>self.nzWidth){
- if(self.options.zoomType == "lens"){
- self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
- }
- self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
- }
- else{
- if(self.options.zoomType != "lens"){
- self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
- }
- self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
- }
- self.changeBgSize = false;
- }
- self.zoomWindow.css({ backgroundPosition: self.xp + 'px ' + self.yp + 'px' });
- }
- }, 16);
- }
- }
- else{
- if(self.changeBgSize){
- if(self.nzHeight>self.nzWidth){
- if(self.options.zoomType == "lens"){
- self.zoomLens.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
- }
- self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
- }
- else{
- if(self.options.zoomType == "lens"){
- self.zoomLens.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
- }
- if((self.largeHeight/self.newvaluewidth) < self.options.zoomWindowHeight){
- self.zoomWindow.css({ "background-size": self.largeWidth/self.newvaluewidth + 'px ' + self.largeHeight/self.newvaluewidth + 'px' });
- }
- else{
- self.zoomWindow.css({ "background-size": self.largeWidth/self.newvalueheight + 'px ' + self.largeHeight/self.newvalueheight + 'px' });
- }
- }
- self.changeBgSize = false;
- }
- self.zoomWindow.css({ backgroundPosition: self.windowLeftPos + 'px ' + self.windowTopPos + 'px' });
- }
- }
- },
- setTintPosition: function(e){
- var self = this;
- self.nzOffset = self.$elem.offset();
- self.tintpos = String(((e.pageX - self.nzOffset.left)-(self.zoomLens.width() / 2)) * (-1));
- self.tintposy = String(((e.pageY - self.nzOffset.top) - self.zoomLens.height() / 2) * (-1));
- if(self.Etoppos){
- self.tintposy = 0;
- }
- if(self.Eloppos){
- self.tintpos=0;
- }
- if(self.Eboppos){
- self.tintposy = (self.nzHeight-self.zoomLens.height()-(self.options.lensBorderSize*2))*(-1);
- }
- if(self.Eroppos){
- self.tintpos = ((self.nzWidth-self.zoomLens.width()-(self.options.lensBorderSize*2))*(-1));
- }
- if(self.options.tint) {
- //stops micro movements
- if(self.fullheight){
- self.tintposy = 0;
- }
- if(self.fullwidth){
- self.tintpos = 0;
- }
- self.zoomTintImage.css({'left': self.tintpos+'px'});
- self.zoomTintImage.css({'top': self.tintposy+'px'});
- }
- },
- swaptheimage: function(smallimage, largeimage){
- var self = this;
- var newImg = new Image();
- if(self.options.loadingIcon){
- self.spinner = $('<div style="background: url(\''+self.options.loadingIcon+'\') no-repeat center #eaeaea; opacity: 0.5;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;z-index: 2000;position: absolute; background-position: center center;"></div>');
- self.$elem.after(self.spinner);
- }
- self.options.onImageSwap(self.$elem);
- newImg.onload = function() {
- self.largeWidth = newImg.width;
- self.largeHeight = newImg.height;
- self.zoomImage = largeimage;
- self.zoomWindow.css({ "background-size": self.largeWidth + 'px ' + self.largeHeight + 'px' });
- self.swapAction(smallimage, largeimage);
- return;
- }
- newImg.src = largeimage; // this must be done AFTER setting onload
- },
- swapAction: function(smallimage, largeimage){
- var self = this;
- var newImg2 = new Image();
- newImg2.onload = function() {
- //re-calculate values
- self.nzHeight = newImg2.height;
- self.nzWidth = newImg2.width;
- self.options.onImageSwapComplete(self.$elem);
- self.doneCallback();
- return;
- }
- newImg2.src = smallimage;
- //reset the zoomlevel to that initially set in options
- self.currentZoomLevel = self.options.zoomLevel;
- self.options.maxZoomLevel = false;
- //swaps the main image
- //self.$elem.attr("src",smallimage);
- //swaps the zoom image
- if(self.options.zoomType == "lens") {
- self.zoomLens.css({ backgroundImage: "url('" + largeimage + "')" });
- }
- if(self.options.zoomType == "window") {
- self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" });
- }
- if(self.options.zoomType == "inner") {
- self.zoomWindow.css({ backgroundImage: "url('" + largeimage + "')" });
- }
- self.currentImage = largeimage;
- if(self.options.imageCrossfade){
- var oldImg = self.$elem;
- var newImg = oldImg.clone();
- self.$elem.attr("src",smallimage)
- self.$elem.after(newImg);
- newImg.stop(true).fadeOut(self.options.imageCrossfade, function() {
- $(this).remove();
- });
- // if(self.options.zoomType == "inner"){
- //remove any attributes on the cloned image so we can resize later
- self.$elem.width("auto").removeAttr("width");
- self.$elem.height("auto").removeAttr("height");
- // }
- oldImg.fadeIn(self.options.imageCrossfade);
- if(self.options.tint && self.options.zoomType != "inner") {
- var oldImgTint = self.zoomTintImage;
- var newImgTint = oldImgTint.clone();
- self.zoomTintImage.attr("src",largeimage)
- self.zoomTintImage.after(newImgTint);
- newImgTint.stop(true).fadeOut(self.options.imageCrossfade, function() {
- $(this).remove();
- });
- oldImgTint.fadeIn(self.options.imageCrossfade);
- //self.zoomTintImage.attr("width",elem.data("image"));
- //resize the tint window
- self.zoomTint.css({ height: self.$elem.height()});
- self.zoomTint.css({ width: self.$elem.width()});
- }
- self.zoomContainer.css("height", self.$elem.height());
- self.zoomContainer.css("width", self.$elem.width());
- if(self.options.zoomType == "inner"){
- if(!self.options.constrainType){
- self.zoomWrap.parent().css("height", self.$elem.height());
- self.zoomWrap.parent().css("width", self.$elem.width());
- self.zoomWindow.css("height", self.$elem.height());
- self.zoomWindow.css("width", self.$elem.width());
- }
- }
- if(self.options.imageCrossfade){
- self.zoomWrap.css("height", self.$elem.height());
- self.zoomWrap.css("width", self.$elem.width());
- }
- }
- else{
- self.$elem.attr("src",smallimage);
- if(self.options.tint) {
- self.zoomTintImage.attr("src",largeimage);
- //self.zoomTintImage.attr("width",elem.data("image"));
- self.zoomTintImage.attr("height",self.$elem.height());
- //self.zoomTintImage.attr('src') = elem.data("image");
- self.zoomTintImage.css({ height: self.$elem.height()});
- self.zoomTint.css({ height: self.$elem.height()});
- }
- self.zoomContainer.css("height", self.$elem.height());
- self.zoomContainer.css("width", self.$elem.width());
- if(self.options.imageCrossfade){
- self.zoomWrap.css("height", self.$elem.height());
- self.zoomWrap.css("width", self.$elem.width());
- }
- }
- if(self.options.constrainType){
- //This will contrain the image proportions
- if(self.options.constrainType == "height"){
- self.zoomContainer.css("height", self.options.constrainSize);
- self.zoomContainer.css("width", "auto");
- if(self.options.imageCrossfade){
- self.zoomWrap.css("height", self.options.constrainSize);
- self.zoomWrap.css("width", "auto");
- self.constwidth = self.zoomWrap.width();
- }
- else{
- self.$elem.css("height", self.options.constrainSize);
- self.$elem.css("width", "auto");
- self.constwidth = self.$elem.width();
- }
- if(self.options.zoomType == "inner"){
- self.zoomWrap.parent().css("height", self.options.constrainSize);
- self.zoomWrap.parent().css("width", self.constwidth);
- self.zoomWindow.css("height", self.options.constrainSize);
- self.zoomWindow.css("width", self.constwidth);
- }
- if(self.options.tint){
- self.tintContainer.css("height", self.options.constrainSize);
- self.tintContainer.css("width", self.constwidth);
- self.zoomTint.css("height", self.options.constrainSize);
- self.zoomTint.css("width", self.constwidth);
- self.zoomTintImage.css("height", self.options.constrainSize);
- self.zoomTintImage.css("width", self.constwidth);
- }
- }
- if(self.options.constrainType == "width"){
- self.zoomContainer.css("height", "auto");
- self.zoomContainer.css("width", self.options.constrainSize);
- if(self.options.imageCrossfade){
- self.zoomWrap.css("height", "auto");
- self.zoomWrap.css("width", self.options.constrainSize);
- self.constheight = self.zoomWrap.height();
- }
- else{
- self.$elem.css("height", "auto");
- self.$elem.css("width", self.options.constrainSize);
- self.constheight = self.$elem.height();
- }
- if(self.options.zoomType == "inner"){
- self.zoomWrap.parent().css("height", self.constheight);
- self.zoomWrap.parent().css("width", self.options.constrainSize);
- self.zoomWindow.css("height", self.constheight);
- self.zoomWindow.css("width", self.options.constrainSize);
- }
- if(self.options.tint){
- self.tintContainer.css("height", self.constheight);
- self.tintContainer.css("width", self.options.constrainSize);
- self.zoomTint.css("height", self.constheight);
- self.zoomTint.css("width", self.options.constrainSize);
- self.zoomTintImage.css("height", self.constheight);
- self.zoomTintImage.css("width", self.options.constrainSize);
- }
- }
- }
- },
- doneCallback: function(){
- var self = this;
- if(self.options.loadingIcon){
- self.spinner.hide();
- }
- self.nzOffset = self.$elem.offset();
- self.nzWidth = self.$elem.width();
- self.nzHeight = self.$elem.height();
- // reset the zoomlevel back to default
- self.currentZoomLevel = self.options.zoomLevel;
- //ratio of the large to small image
- self.widthRatio = self.largeWidth / self.nzWidth;
- self.heightRatio = self.largeHeight / self.nzHeight;
- //NEED TO ADD THE LENS SIZE FOR ROUND
- // adjust images less than the window height
- if(self.options.zoomType == "window") {
- if(self.nzHeight < self.options.zoomWindowWidth/self.widthRatio){
- lensHeight = self.nzHeight;
- }
- else{
- lensHeight = String((self.options.zoomWindowHeight/self.heightRatio))
- }
- if(self.options.zoomWindowWidth < self.options.zoomWindowWidth){
- lensWidth = self.nzWidth;
- }
- else{
- lensWidth = (self.options.zoomWindowWidth/self.widthRatio);
- }
- if(self.zoomLens){
- self.zoomLens.css('width', lensWidth);
- self.zoomLens.css('height', lensHeight);
- }
- }
- },
- getCurrentImage: function(){
- var self = this;
- return self.zoomImage;
- },
- getGalleryList: function(){
- var self = this;
- //loop through the gallery options and set them in list for fancybox
- self.gallerylist = [];
- if (self.options.gallery){
- $('#'+self.options.gallery + ' a').each(function() {
- var img_src = '';
- if($(this).data("zoom-image")){
- img_src = $(this).data("zoom-image");
- }
- else if($(this).data("image")){
- img_src = $(this).data("image");
- }
- //put the current image at the start
- if(img_src == self.zoomImage){
- self.gallerylist.unshift({
- href: ''+img_src+'',
- title: $(this).find('img').attr("title")
- });
- }
- else{
- self.gallerylist.push({
- href: ''+img_src+'',
- title: $(this).find('img').attr("title")
- });
- }
- });
- }
- //if no gallery - return current image
- else{
- self.gallerylist.push({
- href: ''+self.zoomImage+'',
- title: $(this).find('img').attr("title")
- });
- }
- return self.gallerylist;
- },
- changeZoomLevel: function(value){
- var self = this;
- //flag a zoom, so can adjust the easing during setPosition
- self.scrollingLock = true;
- //round to two decimal places
- self.newvalue = parseFloat(value).toFixed(2);
- newvalue = parseFloat(value).toFixed(2);
- //maxwidth & Maxheight of the image
- maxheightnewvalue = self.largeHeight/((self.options.zoomWindowHeight / self.nzHeight) * self.nzHeight);
- maxwidthtnewvalue = self.largeWidth/((self.options.zoomWindowWidth / self.nzWidth) * self.nzWidth);
- //calculate new heightratio
- if(self.options.zoomType != "inner")
- {
- if(maxheightnewvalue <= newvalue){
- self.heightRatio = (self.largeHeight/maxheightnewvalue) / self.nzHeight;
- self.newvalueheight = maxheightnewvalue;
- self.fullheight = true;
- }
- else{
- self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight;
- self.newvalueheight = newvalue;
- self.fullheight = false;
- }
- // calculate new width ratio
- if(maxwidthtnewvalue <= newvalue){
- self.widthRatio = (self.largeWidth/maxwidthtnewvalue) / self.nzWidth;
- self.newvaluewidth = maxwidthtnewvalue;
- self.fullwidth = true;
- }
- else{
- self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
- self.newvaluewidth = newvalue;
- self.fullwidth = false;
- }
- if(self.options.zoomType == "lens"){
- if(maxheightnewvalue <= newvalue){
- self.fullwidth = true;
- self.newvaluewidth = maxheightnewvalue;
- } else{
- self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
- self.newvaluewidth = newvalue;
- self.fullwidth = false;
- }}
- }
- if(self.options.zoomType == "inner")
- {
- maxheightnewvalue = parseFloat(self.largeHeight/self.nzHeight).toFixed(2);
- maxwidthtnewvalue = parseFloat(self.largeWidth/self.nzWidth).toFixed(2);
- if(newvalue > maxheightnewvalue){
- newvalue = maxheightnewvalue;
- }
- if(newvalue > maxwidthtnewvalue){
- newvalue = maxwidthtnewvalue;
- }
- if(maxheightnewvalue <= newvalue){
- self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight;
- if(newvalue > maxheightnewvalue){
- self.newvalueheight = maxheightnewvalue;
- }else{
- self.newvalueheight = newvalue;
- }
- self.fullheight = true;
- }
- else{
- self.heightRatio = (self.largeHeight/newvalue) / self.nzHeight;
- if(newvalue > maxheightnewvalue){
- self.newvalueheight = maxheightnewvalue;
- }else{
- self.newvalueheight = newvalue;
- }
- self.fullheight = false;
- }
- if(maxwidthtnewvalue <= newvalue){
- self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
- if(newvalue > maxwidthtnewvalue){
- self.newvaluewidth = maxwidthtnewvalue;
- }else{
- self.newvaluewidth = newvalue;
- }
- self.fullwidth = true;
- }
- else{
- self.widthRatio = (self.largeWidth/newvalue) / self.nzWidth;
- self.newvaluewidth = newvalue;
- self.fullwidth = false;
- }
- } //end inner
- scrcontinue = false;
- if(self.options.zoomType == "inner"){
- if(self.nzWidth >= self.nzHeight){
- if( self.newvaluewidth <= maxwidthtnewvalue){
- scrcontinue = true;
- }
- else{
- scrcontinue = false;
- self.fullheight = true;
- self.fullwidth = true;
- }
- }
- if(self.nzHeight > self.nzWidth){
- if( self.newvaluewidth <= maxwidthtnewvalue){
- scrcontinue = true;
- }
- else{
- scrcontinue = false;
- self.fullheight = true;
- self.fullwidth = true;
- }
- }
- }
- if(self.options.zoomType != "inner"){
- scrcontinue = true;
- }
- if(scrcontinue){
- self.zoomLock = 0;
- self.changeZoom = true;
- //if lens height is less than image height
- if(((self.options.zoomWindowHeight)/self.heightRatio) <= self.nzHeight){
- self.currentZoomLevel = self.newvalueheight;
- if(self.options.zoomType != "lens" && self.options.zoomType != "inner") {
- self.changeBgSize = true;
- self.zoomLens.css({height: String((self.options.zoomWindowHeight)/self.heightRatio) + 'px' })
- }
- if(self.options.zoomType == "lens" || self.options.zoomType == "inner") {
- self.changeBgSize = true;
- }
- }
- if((self.options.zoomWindowWidth/self.widthRatio) <= self.nzWidth){
- if(self.options.zoomType != "inner"){
- if(self.newvaluewidth > self.newvalueheight) {
- self.currentZoomLevel = self.newvaluewidth;
- }
- }
- if(self.options.zoomType != "lens" && self.options.zoomType != "inner") {
- self.changeBgSize = true;
- self.zoomLens.css({width: String((self.options.zoomWindowWidth)/self.widthRatio) + 'px' })
- }
- if(self.options.zoomType == "lens" || self.options.zoomType == "inner") {
- self.changeBgSize = true;
- }
- }
- if(self.options.zoomType == "inner"){
- self.changeBgSize = true;
- if(self.nzWidth > self.nzHeight){
- self.currentZoomLevel = self.newvaluewidth;
- }
- if(self.nzHeight > self.nzWidth){
- self.currentZoomLevel = self.newvaluewidth;
- }
- }
- } //under
- //sets the boundry change, called in setWindowPos
- self.setPosition(self.currentLoc);
- //
- },
- closeAll: function(){
- if(self.zoomWindow){self.zoomWindow.hide();}
- if(self.zoomLens){self.zoomLens.hide();}
- if(self.zoomTint){self.zoomTint.hide();}
- },
- changeState: function(value){
- var self = this;
- if(value == 'enable'){self.options.zoomEnabled = true;}
- if(value == 'disable'){self.options.zoomEnabled = false;}
- }
- };
- $.fn.elevateZoom = function( options ) {
- return this.each(function() {
- var elevate = Object.create( ElevateZoom );
- elevate.init( options, this );
- $.data( this, 'elevateZoom', elevate );
- });
- };
- $.fn.elevateZoom.options = {
- zoomActivation: "hover", // Can also be click (PLACEHOLDER FOR NEXT VERSION)
- zoomEnabled: true, //false disables zoomwindow from showing
- preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)
- zoomLevel: 1, //default zoom level of image
- scrollZoom: false, //allow zoom on mousewheel, true to activate
- scrollZoomIncrement: 0.1, //steps of the scrollzoom
- minZoomLevel: false,
- maxZoomLevel: false,
- easing: false,
- easingAmount: 12,
- lensSize: 200,
- zoomWindowWidth: 400,
- zoomWindowHeight: 400,
- zoomWindowOffetx: 0,
- zoomWindowOffety: 0,
- zoomWindowPosition: 1,
- zoomWindowBgColour: "#fff",
- lensFadeIn: false,
- lensFadeOut: false,
- debug: false,
- zoomWindowFadeIn: false,
- zoomWindowFadeOut: false,
- zoomWindowAlwaysShow: false,
- zoomTintFadeIn: false,
- zoomTintFadeOut: false,
- borderSize: 4,
- showLens: true,
- borderColour: "#888",
- lensBorderSize: 1,
- lensBorderColour: "#000",
- lensShape: "square", //can be "round"
- zoomType: "window", //window is default, also "lens" available -
- containLensZoom: false,
- lensColour: "white", //colour of the lens background
- lensOpacity: 0.4, //opacity of the lens
- lenszoom: false,
- tint: false, //enable the tinting
- tintColour: "#333", //default tint color, can be anything, red, #ccc, rgb(0,0,0)
- tintOpacity: 0.4, //opacity of the tint
- gallery: false,
- galleryActiveClass: "zoomGalleryActive",
- imageCrossfade: false,
- constrainType: false, //width or height
- constrainSize: false, //in pixels the dimensions you want to constrain on
- loadingIcon: false, //http://www.example.com/spinner.gif
- cursor:"default", // user should set to what they want the cursor as, if they have set a click function
- responsive:true,
- onComplete: $.noop,
- onDestroy: function() {},
- onZoomedImageLoaded: function() {},
- onImageSwap: $.noop,
- onImageSwapComplete: $.noop
- };
- })( jQuery, window, document );
|