Image Cross Fader

This code is very old, very wrong and a very poor example. Please see this update.
photos © Kevin C. Smith
I wrote this when a friend of mine asked me if I had anything that did this...I said "no, but I like the idea so hold on". It didnt take long to write as its not all that different from other fading div things I've written that fall into the stupid css tricks category -- but then I tested it in Mozilla.

Note that this uses the proprietary style attribute -moz-opacity for the fades in browsers who's DOM does not support document.all. One would assume by the -moz- in -moz-opacity that this would work in Mozilla. Not so. The first fade is fine, but then it just starts flickering like crazy.

I could have SWORN that the things I had written similiar to this had worked in Mozilla, so I went and checked. Nope. I guess I mistook Mozilla for Nestcape 7 (which this works wonderfully in) which, while sounding silly, isnt that difficult to believe when you factor in that I am generally quite drunk when writing this stuff.

At any rate, it seems to me that if you are going to take the time to write these evil non-standard styles to compete with the evil non-standard styles in your competitors browser, the very least you could do is make it work as well.

If I'm missing something here and someone is able to make this work in Mozilla 1.3 on Windows (doesnt work on my linux box at all...my guess is unsupported for that OS?), I'll be happy to hear it.

UPDATE: Turns out that after Moz 1.2 or so, -moz-opacity would only except floating points as values and not percentages. Nice one.

The Source: 

var currentPhoto = 0;
var secondPhoto = 1;

var currentOpacity = new Array();
var imageArray = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg","img6.jpg","img7.jpg","img8.jpg");

var FADE_STEP = 2;
var FADE_INTERVAL = 10;
var pause = false;

function init() {
	currentOpacity[0]=99;
	for(i=1;i<imageArray.length;i++)currentOpacity[i]=0;
	mHTML="";
	for(i=0;i<imageArray.length;i++)mHTML+="<div id=\"photo\" name=\"photo\" class=\"mPhoto\"><img src=\"" + imageArray[i]  +"\"></div>";
	document.getElementById("mContainer").innerHTML = mHTML;

	if(document.all) {
		document.getElementsByName("photo")[currentPhoto].style.filter="alpha(opacity=100)";
	} else {
		document.getElementsByName("photo")[currentPhoto].style.MozOpacity = .99;
	}

	mInterval = setInterval("crossFade()",FADE_INTERVAL);
}

function crossFade() {
	if(pause)return;

	currentOpacity[currentPhoto]-=FADE_STEP;
	currentOpacity[secondPhoto] += FADE_STEP;

	if(document.all) {
		document.getElementsByName("photo")[currentPhoto].style.filter = "alpha(opacity=" + currentOpacity[currentPhoto] + ")";
		document.getElementsByName("photo")[secondPhoto].style.filter = "alpha(opacity=" + currentOpacity[secondPhoto] + ")";
	} else {
		document.getElementsByName("photo")[currentPhoto].style.MozOpacity = currentOpacity[currentPhoto]/100;
		document.getElementsByName("photo")[secondPhoto].style.MozOpacity =currentOpacity[secondPhoto]/100;
	}

	if(currentOpacity[secondPhoto]/100>=.98) {
		currentPhoto = secondPhoto;
		secondPhoto++;
		if(secondPhoto == imageArray.length)secondPhoto=0;
		pause = true;
		xInterval = setTimeout("pause=false",2000);
	}
}

function doPause()  {
	if(pause) {
		pause = false;
		document.getElementById("pauseBtn").value = "pause";
	} else {
		pause = true;
		document.getElementById("pauseBtn").value = "play";
	}
}
Image Cross Fader v1.01
Last revision: 01.10.2005 (previous: 08.14.2003)
steve@slayeroffice.com
http://www.slayeroffice.com