// 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 // Init. Do not add anything below this line, unless it's something awesome. var myWidth = 0, myHeight = 0, myScroll = 0; myScrollWidth = 0; myScrollHeight = 0; var zoomOpen = false, preloadFrame = 1, preloadActive = false, preloadTime = 0, imgPreload = new Image(); var preloadAnimTimer = 0; 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); } // Zoom: Inject Javascript functions into hrefs pointing to images, one by one! // Skip any href that contains a rel="nozoom" tag. // This is done at page load time via an onLoad() handler. 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); }; } } } } } // Zoom: Load an image into an image object. When done loading, function sets preloadActive to false, // so other bits know that they can proceed with the zoom. // Preloaded image is stored in imgPreload and swapped out in the zoom function. function zoomPreload(from) { var theimage = from.getAttribute("href"); // Only preload if we have to, i.e. the image isn't this image already if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1) { preloadActive = true; imgPreload = new Image(); // Set a function to fire when the preload is complete, setting flags along the way. imgPreload.onload = function() { preloadActive = false; } // Load it! imgPreload.src = theimage; } } // Zoom: Start the preloading animation cycle. function preloadAnimStart() { preloadTime = new Date(); document.getElementById("ZoomSpin").style.left = (myWidth / 2) + 'px'; document.getElementById("ZoomSpin").style.top = ((myHeight / 2) + myScroll) + 'px'; document.getElementById("ZoomSpin").style.visibility = "visible"; preloadFrame = 1; document.getElementById("SpinImage").src = zoomImagesURI+'zoom-spin-'+preloadFrame+'.png'; preloadAnimTimer = setInterval("preloadAnim()", 100); } // Zoom: Display and ANIMATE the jibber-jabber widget. Once preloadActive is false, bail and zoom it up! function preloadAnim(from) { if (preloadActive != false) { document.getElementById("SpinImage").src = zoomImagesURI+'zoom-spin-'+preloadFrame+'.png'; preloadFrame++; if (preloadFrame > 12) preloadFrame = 1; } else { document.getElementById("ZoomSpin").style.visibility = "hidden"; clearInterval(preloadAnimTimer); preloadAnimTimer = 0; zoomIn(preloadFrom); } } // ZOOM CLICK: We got a click! Should we do the zoom? Or wait for the preload to complete? // todo?: Double check that imgPreload src = clicked src function zoomClick(from, evt) { var shift = getShift(evt); // Check for Command / Alt key. If pressed, pass them through -- don't zoom! if (! evt && window.event && (window.event.metaKey || window.event.altKey)) { return true; } else if (evt && (evt.metaKey|| evt.altKey)) { return true; } // Get browser dimensions getSize(); // If preloading still, wait, and display the spinner. if (preloadActive == true) { // But only display the spinner if it's not already being displayed! if (preloadAnimTimer == 0) { preloadFrom = from; preloadAnimStart(); } } else { // Otherwise, we're loaded: do the zoom! zoomIn(from, shift); } return false; } // Zoom: Move an element in to endH endW, using zoomHost as a starting point. // "from" is an object reference to the href that spawned the zoom. function zoomIn(from, shift) { zoomimg.src = from.getAttribute("href"); // Determine the zoom settings from where we came from, the element in the . // If there's no element in the , or we can't get the width, make stuff up 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]; // Make up for a scrolled containing div. // TODO: This HAS to move into findElementPos. if (document.getElementById('scroller')) { hostX = hostX - document.getElementById('scroller').scrollLeft; } // Determine the target zoom settings from the preloaded image object endW = imgPreload.width; endH = imgPreload.height; // Start! But only if we're not zooming already! if (zoomActive[theID] != true) { // Clear everything out just in case something is already open if (document.getElementById("ShadowBox")) { document.getElementById("ShadowBox").style.visibility = "hidden"; } else if (! browserIsIE) { // Wipe timer if shadow is fading in still 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"; // Setup the CAPTION, if existing. Hide it first, set the text. if (includeCaption) { document.getElementById(zoomCaptionDiv).style.visibility = "hidden"; if (from.getAttribute('title') && includeCaption) { // Yes, there's a caption, set it up document.getElementById(zoomCaption).innerHTML = from.getAttribute('title'); } else { document.getElementById(zoomCaption).innerHTML = ""; } } // Store original position in an array for future zoomOut. zoomOrigW[theID] = startW; zoomOrigH[theID] = startH; zoomOrigX[theID] = hostX; zoomOrigY[theID] = hostY; // Now set the starting dimensions zoomimg.style.width = startW + 'px'; zoomimg.style.height = startH + 'px'; zoomdiv.style.left = hostX + 'px'; zoomdiv.style.top = hostY + 'px'; // Show the zooming image container, make it invisible if (includeFade == 1) { setOpacity(0, zoomID); } zoomdiv.style.visibility = "visible"; // If it's too big to fit in the window, shrink the width and height to fit (with ratio). 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); // Shift key? if (shift) { tempSteps = zoomSteps * 7; } else { tempSteps = zoomSteps; } // Setup Zoom zoomCurrent = 0; // Setup Fade with Zoom, If Requested if (includeFade == 1) { fadeCurrent = 0; fadeAmount = (0 - 100) / tempSteps; } else { fadeAmount = 0; } // Do It! zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+startW+", "+zoomChangeW+", "+startH+", "+zoomChangeH+", "+hostX+", "+zoomChangeX+", "+hostY+", "+zoomChangeY+", "+tempSteps+", "+includeFade+", "+fadeAmount+", 'zoomDoneIn(zoomID)')", zoomTime); zoomActive[theID] = true; } } // Zoom it back out. function zoomOut(from, evt) { // Get shift key status. // IE events don't seem to get passed through the function, so grab it from the window. if (getShift(evt)) { tempSteps = zoomSteps * 7; } else { tempSteps = zoomSteps; } // Check to see if something is happening/open if (zoomActive[theID] != true) { // First, get rid of the shadow if necessary. if (document.getElementById("ShadowBox")) { document.getElementById("ShadowBox").style.visibility = "hidden"; } else if (! browserIsIE) { // Wipe timer if shadow is fading in still if (fadeActive["ZoomImage"]) { clearInterval(fadeTimer["ZoomImage"]); fadeActive["ZoomImage"] = false; fadeTimer["ZoomImage"] = false; } document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)'; } // ..and the close box... document.getElementById("ZoomClose").style.visibility = "hidden"; // ...and the caption if necessary! if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") { // fadeElementSetup(zoomCaptionDiv, 100, 0, 5, 1); document.getElementById(zoomCaptionDiv).style.visibility = "hidden"; } // Now, figure out where we came from, to get back there 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; // Setup Zoom zoomCurrent = 0; // Setup Fade with Zoom, If Requested if (includeFade == 1) { fadeCurrent = 0; fadeAmount = (100 - 0) / tempSteps; } else { fadeAmount = 0; } // Do It! 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; } } // Finished Zooming In function zoomDoneIn(zoomdiv, theID) { // Note that it's open zoomOpen = true; zoomdiv = document.getElementById(zoomdiv); // Position the table shadow behind the zoomed in image, and display it 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) { // Or, do a fade of the modern shadow fadeElementSetup("ZoomImage", 0, .8, 5, 0, "shadow"); } // Position and display the CAPTION, if existing if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") { // setOpacity(0, zoomCaptionDiv); 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"; // fadeElementSetup(zoomCaptionDiv, 0, 100, 5); } // Display Close Box (fade it if it's not IE) if (!browserIsIE) setOpacity(0, "ZoomClose"); document.getElementById("ZoomClose").style.visibility = "visible"; if (!browserIsIE) fadeElementSetup("ZoomClose", 0, 100, 5); // Get keypresses document.onkeypress = getKey; } // Finished Zooming Out function zoomDone(zoomdiv, theID) { // No longer open zoomOpen = false; // Clear stuff out, clean up zoomOrigH[theID] = ""; zoomOrigW[theID] = ""; document.getElementById(zoomdiv).style.visibility = "hidden"; zoomActive[theID] == false; // Stop getting keypresses document.onkeypress = null; } // Actually zoom the element function zoomElement(zoomdiv, theID, zoomCurrent, zoomStartW, zoomChangeW, zoomStartH, zoomChangeH, zoomStartX, zoomChangeX, zoomStartY, zoomChangeY, zoomSteps, includeFade, fadeAmount, execWhenDone) { // console.log("Zooming Step #"+zoomCurrent+ " of "+zoomSteps+" (zoom " + zoomStartW + "/" + zoomChangeW + ") (zoom " + zoomStartH + "/" + zoomChangeH + ") (zoom " + zoomStartX + "/" + zoomChangeX + ") (zoom " + zoomStartY + "/" + zoomChangeY + ") Fade: "+fadeAmount); // Test if we're done, or if we continue if (zoomCurrent == (zoomSteps + 1)) { zoomActive[theID] = false; clearInterval(zoomTimer[theID]); if (execWhenDone != "") { eval(execWhenDone); } } else { // Do the Fade! if (includeFade == 1) { if (fadeAmount < 0) { setOpacity(Math.abs(zoomCurrent * fadeAmount), zoomdiv); } else { setOpacity(100 - (zoomCurrent * fadeAmount), zoomdiv); } } // Calculate this step's difference, and move it! 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); } } // Zoom Utility: Get Key Press when image is open, and act accordingly function getKey(evt) { if (! evt) { theKey = event.keyCode; } else { theKey = evt.keyCode; } if (theKey == 27) { // ESC zoomOut(this, evt); } } //////////////////////////// // // FADE Functions // function fadeOut(elem) { if (elem.id) { fadeElementSetup(elem.id, 100, 0, 10); } } function fadeIn(elem) { if (elem.id) { fadeElementSetup(elem.id, 0, 100, 10); } } // Fade: Initialize the fade function 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) { // alert("Fading: "+theID+" Steps: "+fdSteps+" Mode: "+fdMode); if (fadeActive[theID] == true) { // Already animating, queue up this command 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; } } } // Fade: Do the fade. This function will call itself, modifying the parameters, so // many instances can run concurrently. Can fade using opacity, or fade using a box-shadow. function fadeElement(theID, fadeCurrent, fadeAmount, fadeSteps) { if (fadeCurrent == fadeSteps) { // We're done, so clear. clearInterval(fadeTimer[theID]); fadeActive[theID] = false; fadeTimer[theID] = false; // Should we close it once the fade is complete? if (fadeClose[theID] == true) { document.getElementById(theID).style.visibility = "hidden"; } // Hang on.. did a command queue while we were working? If so, make it happen now if (fadeQueue[theID] && fadeQueue[theID] != false) { fadeElementSetup(fadeQueue[theID][0], fadeQueue[theID][1], fadeQueue[theID][2], fadeQueue[theID][3]); fadeQueue[theID] = false; } } else { fadeCurrent++; // Now actually do the fade adjustment. if (fadeMode[theID] == "shadow") { // Do a special fade on the webkit-box-shadow of the object if (fadeAmount < 0) { document.getElementById(theID).style.webkitBoxShadow = shadowSettings + (Math.abs(fadeCurrent * fadeAmount)) + ')'; } else { document.getElementById(theID).style.webkitBoxShadow = shadowSettings + (100 - (fadeCurrent * fadeAmount)) + ')'; } } else { // Set the opacity depending on if we're adding or subtracting (pos or neg) if (fadeAmount < 0) { setOpacity(Math.abs(fadeCurrent * fadeAmount), theID); } else { setOpacity(100 - (fadeCurrent * fadeAmount), theID); } } // Keep going, and send myself the updated variables clearInterval(fadeTimer[theID]); fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15); } } //////////////////////////// // // UTILITY functions // // Utility: Set the opacity, compatible with a number of browsers. Value from 0 to 100. function setOpacity(opacity, theID) { var object = document.getElementById(theID).style; // If it's 100, set it to 99 for Firefox. if (navigator.userAgent.indexOf("Firefox") != -1) { if (opacity == 100) { opacity = 99.9999; } // This is majorly awkward } // Multi-browser opacity setting object.filter = "alpha(opacity=" + opacity + ")"; // IE/Win object.opacity = (opacity / 100); // Safari 1.2, Firefox+Mozilla } // Utility: Math functions for animation calucations - From http://www.robertpenner.com/easing/ // // t = time, b = begin, c = change, d = duration // time = current frame, begin is fixed, change is basically finish - begin, duration is fixed (frames), 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; } } // Utility: Get the size of the window, and set myWidth and myHeight // Credit to quirksmode.org function getSize() { // Window Size 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; } // Page size w/offscreen areas 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; } } // Utility: Get Shift Key Status // IE events don't seem to get passed through the function, so grab it from the window. function getShift(evt) { var shift = false; if (! evt && window.event) { shift = window.event.shiftKey; } else if (evt) { shift = evt.shiftKey; if (shift) evt.stopPropagation(); // Prevents Firefox from doing shifty things } return shift; } // Utility: Find the Y position of an element on a page. Return Y and X as an array function findElementPos(elemFind) { var elemX = 0; var elemY = 0; do { elemX += elemFind.offsetLeft; elemY += elemFind.offsetTop; } while ( elemFind = elemFind.offsetParent ) return Array(elemX, elemY); }