// FancyZoom.js - v1.1 - http://www.fancyzoom.com // // Copyright (c) 2008 Cabel Sasser / Panic Inc // All rights reserved. // // Requires: FancyZoomHTML.js // Instructions: Include JS files in page, call setupZoom() in onLoad. That's it! // Any links to images will be updated to zoom inline. // Add rel="nozoom" to your to disable zooming for an image. // // Redistribution and use of this effect in source form, with or without modification, // are permitted provided that the following conditions are met: // // * USE OF SOURCE ON COMMERCIAL (FOR-PROFIT) WEBSITE REQUIRES ONE-TIME LICENSE FEE PER DOMAIN. // Reasonably priced! Visit www.fancyzoom.com for licensing instructions. Thanks! // // * Non-commercial (personal) website use is permitted without license/payment! // // * Redistribution of source code must retain the above copyright notice, // this list of conditions and the following disclaimer. // // * Redistribution of source code and derived works cannot be sold without specific // written prior permission. // // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR // CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, // EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, // PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR // PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF // LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING // NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS // SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. var includeCaption = true; // Turn on the "caption" feature, and write out the caption HTML var zoomTime = 5; // Milliseconds between frames of zoom animation var zoomSteps = 15; // Number of zoom animation frames var includeFade = 1; // Set to 1 to fade the image in / out as it zooms var minBorder = 90; // Amount of padding between large, scaled down images, and the window edges var shadowSettings = '0px 5px 25px rgba(0, 0, 0, '; // Blur, radius, color of shadow for compatible browsers var zoomImagesURI = '/fancyzoom/images-global/'; // Location of the zoom and shadow images var myWidth = 0, myHeight = 0, myScroll = 0; myScrollWidth = 0; myScrollHeight = 0; var zoomOpen = false, imgPreload = new Image(); var zoomActive = new Array(); var zoomTimer = new Array(); var zoomOrigW = new Array(); var zoomOrigH = new Array(); var zoomOrigX = new Array(); var zoomOrigY = new Array(); var zoomID = "ZoomBox"; var theID = "ZoomImage"; var zoomCaption = "ZoomCaption"; var zoomCaptionDiv = "ZoomCapDiv"; if (navigator.userAgent.indexOf("MSIE") != -1) { var browserIsIE = true; } // Zoom: Setup The Page! Called in your 's onLoad handler. function setupZoom() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } function prepZooms() { if (! document.getElementsByTagName) { return; } var links = document.getElementsByTagName("a"); for (i = 0; i < links.length; i++) { if (links[i].getAttribute("href")) { if (links[i].getAttribute("href").search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)/gi) != -1) { if (links[i].getAttribute("rel") != "nozoom") { links[i].onclick = function (event) { return zoomClick(this, event); }; links[i].onmouseover = function () { zoomPreload(this); }; } } } } } function zoomPreload(from) { var theimage = from.getAttribute("href"); if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1) { imgPreload = new Image(); imgPreload.src = theimage; } } function zoomClick(from, evt) { var shift = getShift(evt); if (! evt && window.event && (window.event.metaKey || window.event.altKey)) { return true; } else if (evt && (evt.metaKey|| evt.altKey)) { return true; } getSize(); zoomIn(from, shift); return false; } function zoomIn(from, shift) { document.getElementById("ZoomShadow").style.visibility = "visible"; zoomimg.src = from.getAttribute("href"); if (from.childNodes[0].width) { startW = from.childNodes[0].width; startH = from.childNodes[0].height; startPos = findElementPos(from.childNodes[0]); } else { startW = 50; startH = 12; startPos = findElementPos(from); } hostX = startPos[0]; hostY = startPos[1]; if (document.getElementById('scroller')) { hostX = hostX - document.getElementById('scroller').scrollLeft; } endW = imgPreload.width; endH = imgPreload.height; if (zoomActive[theID] != true) { if (document.getElementById("ShadowBox")) { document.getElementById("ShadowBox").style.visibility = "hidden"; } else if (! browserIsIE) { if (fadeActive["ZoomImage"]) { clearInterval(fadeTimer["ZoomImage"]); fadeActive["ZoomImage"] = false; fadeTimer["ZoomImage"] = false; } document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)'; } document.getElementById("ZoomClose").style.visibility = "hidden"; if (includeCaption) { document.getElementById(zoomCaptionDiv).style.visibility = "hidden"; if (from.getAttribute('title') && includeCaption) { document.getElementById(zoomCaption).innerHTML = from.getAttribute('title'); } else { document.getElementById(zoomCaption).innerHTML = ""; } } zoomOrigW[theID] = startW; zoomOrigH[theID] = startH; zoomOrigX[theID] = hostX; zoomOrigY[theID] = hostY; zoomimg.style.width = startW + 'px'; zoomimg.style.height = startH + 'px'; zoomdiv.style.left = hostX + 'px'; zoomdiv.style.top = hostY + 'px'; if (includeFade == 1) { setOpacity(0, zoomID); } zoomdiv.style.visibility = "visible"; sizeRatio = endW / endH; if (endW > myWidth - minBorder) { endW = myWidth - minBorder; endH = endW / sizeRatio; } if (endH > myHeight - minBorder) { endH = myHeight - minBorder; endW = endH * sizeRatio; } zoomChangeX = ((myWidth / 2) - (endW / 2) - hostX); zoomChangeY = (((myHeight / 2) - (endH / 2) - hostY) + myScroll); zoomChangeW = (endW - startW); zoomChangeH = (endH - startH); if (shift) { tempSteps = zoomSteps * 7; } else { tempSteps = zoomSteps; } zoomCurrent = 0; if (includeFade == 1) { fadeCurrent = 0; fadeAmount = (0 - 100) / tempSteps; } else { fadeAmount = 0; } zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+startW+", "+zoomChangeW+", "+startH+", "+zoomChangeH+", "+hostX+", "+zoomChangeX+", "+hostY+", "+zoomChangeY+", "+tempSteps+", "+includeFade+", "+fadeAmount+", 'zoomDoneIn(zoomID)')", zoomTime); zoomActive[theID] = true; } } function zoomOut(from, evt) { document.getElementById("ZoomShadow").style.visibility = "hidden"; if (getShift(evt)) { tempSteps = zoomSteps * 7; } else { tempSteps = zoomSteps; } if (zoomActive[theID] != true) { if (document.getElementById("ShadowBox")) { document.getElementById("ShadowBox").style.visibility = "hidden"; } else if (! browserIsIE) { if (fadeActive["ZoomImage"]) { clearInterval(fadeTimer["ZoomImage"]); fadeActive["ZoomImage"] = false; fadeTimer["ZoomImage"] = false; } document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)'; } document.getElementById("ZoomClose").style.visibility = "hidden"; if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") { document.getElementById(zoomCaptionDiv).style.visibility = "hidden"; } startX = parseInt(zoomdiv.style.left); startY = parseInt(zoomdiv.style.top); startW = zoomimg.width; startH = zoomimg.height; zoomChangeX = zoomOrigX[theID] - startX; zoomChangeY = zoomOrigY[theID] - startY; zoomChangeW = zoomOrigW[theID] - startW; zoomChangeH = zoomOrigH[theID] - startH; zoomCurrent = 0; if (includeFade == 1) { fadeCurrent = 0; fadeAmount = (100 - 0) / tempSteps; } else { fadeAmount = 0; } zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+startW+", "+zoomChangeW+", "+startH+", "+zoomChangeH+", "+startX+", "+zoomChangeX+", "+startY+", "+zoomChangeY+", "+tempSteps+", "+includeFade+", "+fadeAmount+", 'zoomDone(zoomID, theID)')", zoomTime); zoomActive[theID] = true; } } function zoomDoneIn(zoomdiv, theID) { zoomOpen = true; zoomdiv = document.getElementById(zoomdiv); if (document.getElementById("ShadowBox")) { setOpacity(0, "ShadowBox"); shadowdiv = document.getElementById("ShadowBox"); shadowLeft = parseInt(zoomdiv.style.left) - 13; shadowTop = parseInt(zoomdiv.style.top) - 8; shadowWidth = zoomdiv.offsetWidth + 26; shadowHeight = zoomdiv.offsetHeight + 26; shadowdiv.style.width = shadowWidth + 'px'; shadowdiv.style.height = shadowHeight + 'px'; shadowdiv.style.left = shadowLeft + 'px'; shadowdiv.style.top = shadowTop + 'px'; document.getElementById("ShadowBox").style.visibility = "visible"; fadeElementSetup("ShadowBox", 0, 100, 5); } else if (! browserIsIE) { fadeElementSetup("ZoomImage", 0, .8, 5, 0, "shadow"); } if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") { zoomcapd = document.getElementById(zoomCaptionDiv); zoomcapd.style.top = parseInt(zoomdiv.style.top) + (zoomdiv.offsetHeight + 15) + 'px'; zoomcapd.style.left = (myWidth / 2) - (zoomcapd.offsetWidth / 2) + 'px'; zoomcapd.style.visibility = "visible"; } if (!browserIsIE) setOpacity(0, "ZoomClose"); document.getElementById("ZoomClose").style.visibility = "visible"; if (!browserIsIE) fadeElementSetup("ZoomClose", 0, 100, 5); document.onkeypress = getKey; } function zoomDone(zoomdiv, theID) { zoomOpen = false; zoomOrigH[theID] = ""; zoomOrigW[theID] = ""; document.getElementById(zoomdiv).style.visibility = "hidden"; zoomActive[theID] == false; document.onkeypress = null; } function zoomElement(zoomdiv, theID, zoomCurrent, zoomStartW, zoomChangeW, zoomStartH, zoomChangeH, zoomStartX, zoomChangeX, zoomStartY, zoomChangeY, zoomSteps, includeFade, fadeAmount, execWhenDone) { if (zoomCurrent == (zoomSteps + 1)) { zoomActive[theID] = false; clearInterval(zoomTimer[theID]); if (execWhenDone != "") { eval(execWhenDone); } } else { if (includeFade == 1) { if (fadeAmount < 0) { setOpacity(Math.abs(zoomCurrent * fadeAmount), zoomdiv); } else { setOpacity(100 - (zoomCurrent * fadeAmount), zoomdiv); } } moveW = cubicInOut(zoomCurrent, zoomStartW, zoomChangeW, zoomSteps); moveH = cubicInOut(zoomCurrent, zoomStartH, zoomChangeH, zoomSteps); moveX = cubicInOut(zoomCurrent, zoomStartX, zoomChangeX, zoomSteps); moveY = cubicInOut(zoomCurrent, zoomStartY, zoomChangeY, zoomSteps); document.getElementById(zoomdiv).style.left = moveX + 'px'; document.getElementById(zoomdiv).style.top = moveY + 'px'; zoomimg.style.width = moveW + 'px'; zoomimg.style.height = moveH + 'px'; zoomCurrent++; clearInterval(zoomTimer[theID]); zoomTimer[theID] = setInterval("zoomElement('"+zoomdiv+"', '"+theID+"', "+zoomCurrent+", "+zoomStartW+", "+zoomChangeW+", "+zoomStartH+", "+zoomChangeH+", "+zoomStartX+", "+zoomChangeX+", "+zoomStartY+", "+zoomChangeY+", "+zoomSteps+", "+includeFade+", "+fadeAmount+", '"+execWhenDone+"')", zoomTime); } } function getKey(evt) { if (! evt) { theKey = event.keyCode; } else { theKey = evt.keyCode; } if (theKey == 27) { zoomOut(this, evt); } } function fadeOut(elem) { if (elem.id) { fadeElementSetup(elem.id, 100, 0, 10); } } function fadeIn(elem) { if (elem.id) { fadeElementSetup(elem.id, 0, 100, 10); } } var fadeActive = new Array(); var fadeQueue = new Array(); var fadeTimer = new Array(); var fadeClose = new Array(); var fadeMode = new Array(); function fadeElementSetup(theID, fdStart, fdEnd, fdSteps, fdClose, fdMode) { if (fadeActive[theID] == true) { fadeQueue[theID] = new Array(theID, fdStart, fdEnd, fdSteps); } else { fadeSteps = fdSteps; fadeCurrent = 0; fadeAmount = (fdStart - fdEnd) / fadeSteps; fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15); fadeActive[theID] = true; fadeMode[theID] = fdMode; if (fdClose == 1) { fadeClose[theID] = true; } else { fadeClose[theID] = false; } } } function fadeElement(theID, fadeCurrent, fadeAmount, fadeSteps) { if (fadeCurrent == fadeSteps) { clearInterval(fadeTimer[theID]); fadeActive[theID] = false; fadeTimer[theID] = false; if (fadeClose[theID] == true) { document.getElementById(theID).style.visibility = "hidden"; } if (fadeQueue[theID] && fadeQueue[theID] != false) { fadeElementSetup(fadeQueue[theID][0], fadeQueue[theID][1], fadeQueue[theID][2], fadeQueue[theID][3]); fadeQueue[theID] = false; } } else { fadeCurrent++; if (fadeMode[theID] == "shadow") { if (fadeAmount < 0) { document.getElementById(theID).style.webkitBoxShadow = shadowSettings + (Math.abs(fadeCurrent * fadeAmount)) + ')'; } else { document.getElementById(theID).style.webkitBoxShadow = shadowSettings + (100 - (fadeCurrent * fadeAmount)) + ')'; } } else { if (fadeAmount < 0) { setOpacity(Math.abs(fadeCurrent * fadeAmount), theID); } else { setOpacity(100 - (fadeCurrent * fadeAmount), theID); } } clearInterval(fadeTimer[theID]); fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15); } } function setOpacity(opacity, theID) { var object = document.getElementById(theID).style; if (navigator.userAgent.indexOf("Firefox") != -1) { if (opacity == 100) { opacity = 99.9999; } } object.filter = "alpha(opacity=" + opacity + ")"; object.opacity = (opacity / 100); } function linear(t, b, c, d) { return c*t/d + b; } function sineInOut(t, b, c, d) { return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; } function cubicIn(t, b, c, d) { return c*(t/=d)*t*t + b; } function cubicOut(t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; } function cubicInOut(t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; } function bounceOut(t, b, c, d) { if ((t/=d) < (1/2.75)){ return c*(7.5625*t*t) + b; } else if (t < (2/2.75)){ return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)){ return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } } function getSize() { if (self.innerHeight) { // Everyone but IE myWidth = window.innerWidth; myHeight = window.innerHeight; myScroll = window.pageYOffset; } else if (document.documentElement && document.documentElement.clientHeight) { // IE6 Strict myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; myScroll = document.documentElement.scrollTop; } else if (document.body) { // Other IE, such as IE7 myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; myScroll = document.body.scrollTop; } if (window.innerHeight && window.scrollMaxY) { myScrollWidth = document.body.scrollWidth; myScrollHeight = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight) { // All but Explorer Mac myScrollWidth = document.body.scrollWidth; myScrollHeight = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari myScrollWidth = document.body.offsetWidth; myScrollHeight = document.body.offsetHeight; } } function getShift(evt) { var shift = false; if (! evt && window.event) { shift = window.event.shiftKey; } else if (evt) { shift = evt.shiftKey; if (shift) evt.stopPropagation(); } return shift; } function findElementPos(elemFind) { var elemX = 0; var elemY = 0; do { elemX += elemFind.offsetLeft; elemY += elemFind.offsetTop; } while ( elemFind = elemFind.offsetParent ) return Array(elemX, elemY); }