Image Fader ?

[MrMiyagi]

Hi,

I need a script that would produce an image slideshow with a fade effect. I have this script and it almost works. Only some blinking every now and then. What do you think of the script? Any simplier suggestions or links? Thanks.


var gblPhotoShufflerDivId = "rotator";
var gblPhotoShufflerImgId = "rotimage";
var gblImg = new Array(
"h1.jpg",
"2.jpg",
"3.jpg",
"4.jpg"
);

var gblPauseSeconds = 3;
var gblFadeSeconds = 2;
var gblRotations = 999;

//end customization section

var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);

window.onload = photoShufflerLaunch;

function photoShufflerLaunch() {
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; //save away to show as final image

document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}

function photoShufflerFade() {
var theimg = document.getElementById(gblPhotoShufflerImgId);

//determine delta based on number of fade seconds
//the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);

//fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta ) {
gblOpacity = 100;
//stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
//pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else {
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); //1/30th of a second
}
}

function photoShufflerShuffle() {
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);

//copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];

//set img opacity to 100
setOpacity(theimg,100);

//shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;

//decrement rotation counter
if (--gblImageRotations < 1) {
//insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
}

//slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}

function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999pacity;

//ie/win
obj.style.filter = "alpha(opacity:"+opacity+")";

//safari<1.2, konqueror
obj.style.KHTMLOpacity = opacity/100;

//older mozilla and firefox
obj.style.MozOpacity = opacity/100;

//safari 1.2, newer firefox and mozilla, css3
obj.style.opacity = opacity/100;
}