You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
761 lines
22 KiB
JavaScript
761 lines
22 KiB
JavaScript
// 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 <a href> links to images will be updated to zoom inline.
|
|
// Add rel="nozoom" to your <a href> 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 0px 0px rgba(0, 0, 0, '; // Blur, radius, color of shadow for compatible browsers
|
|
|
|
var zoomImagesURI = 'resources/imgs/zoom/'; // Location of the zoom and shadow images
|
|
|
|
// 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 <body>'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 <a>.
|
|
// If there's no element in the <a>, 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);
|
|
} |