// source --> https://okakenweb.xsrv.jp/wp-content/themes/amore_tcd028/js/jquery.elevatezoom.js /* * 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('
'); 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 = $('
').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth}); self.zoomContainer = $('
'); $('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 = $("
 
") .appendTo(self.zoomContainer) .click(function () { self.$elem.trigger('click'); }); if(self.options.tint) { self.tintContainer = $('
').addClass('tintContainer'); self.zoomTint = $("
"); 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 = $('') .appendTo(self.zoomLens) .click(function () { self.$elem.trigger('click'); }); } } //create zoom window if(isNaN(self.options.zoomWindowPosition)){ self.zoomWindow = $("
 
") .appendTo('body') .click(function () { self.$elem.trigger('click'); }); }else{ self.zoomWindow = $("
 
") .appendTo(self.zoomContainer) .click(function () { self.$elem.trigger('click'); }); } self.zoomWindowContainer = $('
').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 = $('
INSERT ALT TAG
').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 = $('
'); 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 ); // source --> https://okakenweb.xsrv.jp/wp-content/themes/amore_tcd028/parallax.js /*! * parallax.js v1.4.2 (http://pixelcog.github.io/parallax.js/) * @copyright 2016 PixelCog, Inc. * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE) */ ;(function ( $, window, document, undefined ) { // Polyfill for requestAnimationFrame // via: https://gist.github.com/paulirish/1579671 (function() { var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }()); // Parallax Constructor function Parallax(element, options) { var self = this; if (typeof options == 'object') { delete options.refresh; delete options.render; $.extend(this, options); } this.$element = $(element); if (!this.imageSrc && this.$element.is('img')) { this.imageSrc = this.$element.attr('src'); } var positions = (this.position + '').toLowerCase().match(/\S+/g) || []; if (positions.length < 1) { positions.push('center'); } if (positions.length == 1) { positions.push(positions[0]); } if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') { positions = [positions[1], positions[0]]; } if (this.positionX != undefined) positions[0] = this.positionX.toLowerCase(); if (this.positionY != undefined) positions[1] = this.positionY.toLowerCase(); self.positionX = positions[0]; self.positionY = positions[1]; if (this.positionX != 'left' && this.positionX != 'right') { if (isNaN(parseInt(this.positionX))) { this.positionX = 'center'; } else { this.positionX = parseInt(this.positionX); } } if (this.positionY != 'top' && this.positionY != 'bottom') { if (isNaN(parseInt(this.positionY))) { this.positionY = 'center'; } else { this.positionY = parseInt(this.positionY); } } this.position = this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' + this.positionY + (isNaN(this.positionY)? '' : 'px'); if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { if (this.imageSrc && this.iosFix && !this.$element.is('img')) { this.$element.css({ backgroundImage: 'url(' + this.imageSrc + ')', backgroundSize: 'cover', backgroundPosition: this.position }); } return this; } if (navigator.userAgent.match(/(Android)/)) { if (this.imageSrc && this.androidFix && !this.$element.is('img')) { this.$element.css({ backgroundImage: 'url(' + this.imageSrc + ')', backgroundSize: 'cover', backgroundPosition: this.position }); } return this; } this.$mirror = $('
').prependTo('body'); var slider = this.$element.find('>.parallax-slider'); var sliderExisted = false; if (slider.length == 0) this.$slider = $('').prependTo(this.$mirror); else { this.$slider = slider.prependTo(this.$mirror) sliderExisted = true; } this.$mirror.addClass('parallax-mirror').css({ visibility: 'hidden', zIndex: this.zIndex, position: 'fixed', top: 0, left: 0, overflow: 'hidden', }).attr('data-order', this.$element.attr('data-order')); this.$slider.addClass('parallax-slider').one('load', function() { if (!self.naturalHeight || !self.naturalWidth) { self.naturalHeight = this.naturalHeight || this.height || 1; self.naturalWidth = this.naturalWidth || this.width || 1; } self.aspectRatio = self.naturalWidth / self.naturalHeight; Parallax.isSetup || Parallax.setup(); Parallax.sliders.push(self); Parallax.isFresh = false; Parallax.requestRender(); }); if (!sliderExisted) this.$slider[0].src = this.imageSrc; if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) { this.$slider.trigger('load'); } }; // Parallax Instance Methods $.extend(Parallax.prototype, { speed: 0.2, bleed: 0, zIndex: -100, iosFix: true, androidFix: true, position: 'center', overScrollFix: false, refresh: function() { this.boxWidth = this.$element.outerWidth(); this.boxHeight = this.$element.outerHeight() + this.bleed * 2; this.boxOffsetTop = this.$element.offset().top - this.bleed; this.boxOffsetLeft = this.$element.offset().left; this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight; var winHeight = Parallax.winHeight; var docHeight = Parallax.docHeight; var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight); var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0); var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0; var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0; if (imageHeightMin * this.aspectRatio >= this.boxWidth) { this.imageWidth = imageHeightMin * this.aspectRatio | 0; this.imageHeight = imageHeightMin; this.offsetBaseTop = imageOffsetMin; var margin = this.imageWidth - this.boxWidth; if (this.positionX == 'left') { this.offsetLeft = 0; } else if (this.positionX == 'right') { this.offsetLeft = - margin; } else if (!isNaN(this.positionX)) { this.offsetLeft = Math.max(this.positionX, - margin); } else { this.offsetLeft = - margin / 2 | 0; } } else { this.imageWidth = this.boxWidth; this.imageHeight = this.boxWidth / this.aspectRatio | 0; this.offsetLeft = 0; var margin = this.imageHeight - imageHeightMin; if (this.positionY == 'top') { this.offsetBaseTop = imageOffsetMin; } else if (this.positionY == 'bottom') { this.offsetBaseTop = imageOffsetMin - margin; } else if (!isNaN(this.positionY)) { this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin); } else { this.offsetBaseTop = imageOffsetMin - margin / 2 | 0; } } }, render: function() { var scrollTop = Parallax.scrollTop; var scrollLeft = Parallax.scrollLeft; var overScroll = this.overScrollFix ? Parallax.overScroll : 0; var scrollBottom = scrollTop + Parallax.winHeight; if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) { this.visibility = 'visible'; this.mirrorTop = this.boxOffsetTop - scrollTop; this.mirrorLeft = this.boxOffsetLeft - scrollLeft; this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed); } else { this.visibility = 'hidden'; } this.$mirror.css({ transform: 'translate3d(0px, 0px, 0px)', visibility: this.visibility, top: this.mirrorTop - overScroll, left: this.mirrorLeft, height: this.boxHeight, width: this.boxWidth }); this.$slider.css({ transform: 'translate3d(0px, 0px, 0px)', position: 'absolute', top: this.offsetTop, left: this.offsetLeft, height: this.imageHeight, width: this.imageWidth, maxWidth: 'none' }); } }); // Parallax Static Methods $.extend(Parallax, { scrollTop: 0, scrollLeft: 0, winHeight: 0, winWidth: 0, docHeight: 1 << 30, docWidth: 1 << 30, sliders: [], isReady: false, isFresh: false, isBusy: false, setup: function() { if (this.isReady) return; var $doc = jQuery(document), $win = jQuery(window); var loadDimensions = function() { Parallax.winHeight = $win.height(); Parallax.winWidth = $win.width(); Parallax.docHeight = $doc.height(); Parallax.docWidth = $doc.width(); }; var loadScrollPosition = function() { var winScrollTop = $win.scrollTop(); var scrollTopMax = Parallax.docHeight - Parallax.winHeight; var scrollLeftMax = Parallax.docWidth - Parallax.winWidth; Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop)); Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft())); Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0)); }; $win.on('resize.px.parallax load.px.parallax', function() { loadDimensions(); Parallax.isFresh = false; Parallax.requestRender(); }) .on('scroll.px.parallax load.px.parallax', function() { loadScrollPosition(); Parallax.requestRender(); }); loadDimensions(); loadScrollPosition(); jQuery(window).load(function(){ setInterval(function(){ loadDimensions(); Parallax.isFresh = false; Parallax.requestRender(); }, 300) }) this.isReady = true; }, configure: function(options) { if (typeof options == 'object') { delete options.refresh; delete options.render; $.extend(this.prototype, options); } }, refresh: function() { $.each(this.sliders, function(){ this.refresh() }); this.isFresh = true; }, render: function() { this.isFresh || this.refresh(); $.each(this.sliders, function(){ this.render() }); }, requestRender: function() { var self = this; if (!this.isBusy) { this.isBusy = true; window.requestAnimationFrame(function() { self.render(); self.isBusy = false; }); } }, destroy: function(el){ var i, parallaxElement = $(el).data('px.parallax'); parallaxElement.$mirror.remove(); for(i=0; i < this.sliders.length; i+=1){ if(this.sliders[i] == parallaxElement){ this.sliders.splice(i, 1); } } $(el).data('px.parallax', false); if(this.sliders.length === 0){ $(window).off('scroll.px.parallax resize.px.parallax load.px.parallax'); this.isReady = false; Parallax.isSetup = false; } } }); // Parallax Plugin Definition function Plugin(option) { return this.each(function () { var $this = $(this); var options = typeof option == 'object' && option; if (this == window || this == document || $this.is('body')) { Parallax.configure(options); } else if (!$this.data('px.parallax')) { options = $.extend({}, $this.data(), options); $this.data('px.parallax', new Parallax(this, options)); } else if (typeof option == 'object') { $.extend($this.data('px.parallax'), options); } if (typeof option == 'string') { if(option == 'destroy'){ Parallax['destroy'](this); }else{ Parallax[option](); } } }) }; var old = $.fn.parallax; $.fn.parallax = Plugin; $.fn.parallax.Constructor = Parallax; // Parallax No Conflict $.fn.parallax.noConflict = function () { $.fn.parallax = old; return this; }; // Parallax Data-API $(document).on('ready.px.parallax.data-api', function () { $('[data-parallax="scroll"]').parallax(); }); }(jQuery, window, document)); // source --> https://okakenweb.xsrv.jp/wp-content/themes/amore_tcd028/js/jscript.js jQuery(document).ready(function($){ $(".parent_category > a").on('click',function() { if($(this).hasClass("active")) { $(this).removeClass("active"); $(this).next().hide(); return false; } else { $(this).addClass("active"); $(this).next().show(); return false; }; }); $("a").bind("focus",function(){if(this.blur)this.blur();}); $("a.target_blank").attr("target","_blank"); $(".styled_post_list1 > li:last-child").addClass("last"); $('.footer_widget:nth-child(3n)').addClass('right_widget'); $('#global_menu > ul > li:nth-child(9)').addClass('hide_menu'); $('#global_menu > ul > li:nth-child(10)').addClass('hide_menu'); $('#global_menu > ul > li:nth-child(11)').addClass('hide_menu'); $('#global_menu > ul > li:nth-child(12)').addClass('hide_menu'); jQuery.easing.easeOutExpo = function (x, t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }; var topBtn = $('#return_top'); topBtn.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 1000, 'easeOutExpo'); return false; }); $("#comment_area ol > li:even").addClass("even_comment"); $("#comment_area ol > li:odd").addClass("odd_comment"); $(".even_comment > .children > li").addClass("even_comment_children"); $(".odd_comment > .children > li").addClass("odd_comment_children"); $(".even_comment_children > .children > li").addClass("odd_comment_children"); $(".odd_comment_children > .children > li").addClass("even_comment_children"); $(".even_comment_children > .children > li").addClass("odd_comment_children"); $(".odd_comment_children > .children > li").addClass("even_comment_children"); $("#trackback_switch").click(function(){ $("#comment_switch").removeClass("comment_switch_active"); $(this).addClass("comment_switch_active"); $("#comment_area").animate({opacity: 'hide'}, 0); $("#trackback_area").animate({opacity: 'show'}, 1000); return false; }); $("#comment_switch").click(function(){ $("#trackback_switch").removeClass("comment_switch_active"); $(this).addClass("comment_switch_active"); $("#trackback_area").animate({opacity: 'hide'}, 0); $("#comment_area").animate({opacity: 'show'}, 1000); return false; }); $("#index_post_list_tab a").click(function() { $("#index_post_list_tab a").removeClass('active'); $(this).addClass("active"); return false; }); $("#index_post_list_tab > li:first-child a").addClass("active"); var index_post_list1 = $('#index_post_list1'); var index_post_list2 = $('#index_post_list2'); var index_post_list3 = $('#index_post_list3'); var index_post_list_button1 = $('#index_post_list_button1 a'); var index_post_list_button2 = $('#index_post_list_button2 a'); var index_post_list_button3 = $('#index_post_list_button3 a'); $('.index_post_list').hide(); $('#index_post_list_wrap .index_post_list:first-child').show(); index_post_list_button1.click(function () { index_post_list1.show(); index_post_list2.hide(); index_post_list3.hide(); }); index_post_list_button2.click(function () { index_post_list2.show(); index_post_list1.hide(); index_post_list3.hide(); }); index_post_list_button3.click(function () { index_post_list3.show(); index_post_list1.hide(); index_post_list2.hide(); }); function mediaQueryClass(width) { if (width > 991) { //PC $("html").removeClass("mobile"); $("html").addClass("pc"); $(".menu_button").css("display","none"); $("#global_menu").show(); $("#global_menu li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); $(this).addClass("active"); }, function(){ $(">ul",this).slideUp("fast"); $(this).removeClass("active"); }); } else { //�X�}�z $("html").removeClass("pc"); $("html").addClass("mobile"); $("#global_menu li").off('hover'); $("#global_menu ul ul").removeAttr('style'); $(".menu_button").css("display", "block"); $('.menu_button').off('click'); $(".menu_button").on('click',function() { if($(this).hasClass("active")) { $(this).removeClass("active"); $('#global_menu').hide(); return false; } else { $(this).addClass("active"); $('#global_menu').show(); return false; }; }); $(".child_menu_button").remove(); $('#global_menu li > ul').parent().prepend(""); $("#global_menu .child_menu_button").on('click',function() { if($(this).parent().hasClass("open")) { $(this).parent().removeClass("open"); return false; } else { $(this).parent().addClass("open"); return false; }; }); $("#global_menu li.menu-item-has-children a").hover(function(){ $(this).prev().addClass("active"); }, function(){ $(this).prev().removeClass("active"); }); }; }; function viewport() { var e = window, a = 'inner'; if (!('innerWidth' in window )) { a = 'client'; e = document.documentElement || document.body; } return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; } var ww = viewport().width; var timer = false; mediaQueryClass(ww); $(window).bind("resize orientationchange", function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { var ww = viewport().width; mediaQueryClass(ww); }, 200); }) });