/* Fading slideshow matthew.westcott@torchbox.com Usage: Include in an HTML document which contains images with a class name containing 'fade', and a z-index between 101 and 199. Generally you'll want to use absolute positioning to overlay these images on top of each other. Then (either in or at the bottom of the page) call: startFade(transitionTimeOn, displayTime, transitionTimeOff, refresh) where transitionTimeOn = length of time in milliseconds for fading on showTime = length of time in milliseconds to display each image transitionTimeOff = length of time in milliseconds for fading off refreshRate = milliseconds between screen updates (1500, 3000, 1500, 20) works well. Images will be cycled through in z-index order. */ var fadeOnTime; /* time taken to fade on, in milliseconds */ var showTime; /* number of milliseconds to hold an image for */ var fadeOffTime; /* time taken to fade off, in milliseconds */ var refreshRate; /* milliseconds between screen updates */ var fadeImages = []; var startTime; var interval; var cycleTime; function startFade(transitionTimeOn, displayTime, transitionTimeOff, refresh) { fadeOnTime = transitionTimeOn; fadeOffTime = transitionTimeOff; showTime = displayTime; refreshRate = refresh; interval = fadeOnTime + showTime + fadeOffTime; var imgs = document.images; for (var i = 0; i < imgs.length; i++) { var img = imgs[i]; if (img.className.indexOf('fade') == -1) {continue;} var zIndex = parseInt(img.style.zIndex); if (zIndex <= 100 || zIndex >= 200) {continue;} var fadeIndex = zIndex - 101; img.setOpacity = function(opacity) { opacity = (opacity == 1)?0.99999:opacity; // IE/Win this.style.filter = "alpha(opacity:"+(opacity*100)+")"; // Safari<1.2, Konqueror this.style.KHTMLOpacity = opacity; // Older Mozilla and Firefox this.style.MozOpacity = opacity; // Safari 1.2, newer Firefox and Mozilla, CSS3 this.style.opacity = opacity; } if (fadeImages[fadeIndex] == null) { fadeImages[fadeIndex] = []; } fadeImages[fadeIndex][fadeImages[fadeIndex].length] = img; } cycleTime = interval * fadeImages.length; startTime = new Date().getTime(); tick(); } function tick() { /* t repeatedly increments from 0 to cycleTime */ var t = ((new Date().getTime()) - startTime + fadeOnTime) % cycleTime; var currentImage = Math.floor(t / interval); var imageStage = t % interval; for (var i = 0; i < fadeImages.length; i++) { for (var j = 0; j < fadeImages[i].length; j++) { if (i == currentImage) { fadeImages[i][j].style.visibility = 'visible'; if (imageStage < fadeOnTime) { fadeImages[i][j].setOpacity(imageStage / fadeOnTime); } else if (imageStage < (fadeOnTime + showTime)) { fadeImages[i][j].setOpacity(1); } else { fadeImages[i][j].setOpacity((interval - imageStage) / fadeOffTime); } } else { fadeImages[i][j].style.visibility = 'hidden'; } } } setTimeout(tick, refreshRate); }