OK, simple script that currently takes an array of ID values (hard coded) and then iterates through them to fade in and out creating a slideshow.
The obvious problem is I have to hard code the number of DIVs in the slideshow. What I really want is the code to get the child elements of the container I pass it and then iterate through them dynamically.
Here’s what I’ve got so far from http://mikeomatic.net:
var divs_to_fade = new Array("box-1", "box-2", "box-3", "box-4", "box-5");
var fade_i = 0;
var fade_wait = 5000;
function swapFade() {
Effect.Fade(divs_to_fade[fade_i], { duration:1, from:1.0, to:0.0 });
fade_i++;
if (fade_i == 5) fade_i = 0;
Effect.Appear(divs_to_fade[fade_i], { duration:1, from:0.0, to:1.0 });
}
I thought of trying something like this:
var divs_to_fade = $('crossfade-container').childElements();
var fade_i = 0;
var fade_wait = 5000;
function swapFade() {
Effect.Fade(divs_to_fade[fade_i], { duration:1, from:1.0, to:0.0 });
fade_i++;
if (fade_i == divs_to_fade.length) fade_i = 0;
Effect.Appear(divs_to_fade[fade_i], { duration:1, from:0.0, to:1.0 });
}
Problem with that is $(‘crossfade-container’) isn’t defined yet. I’m sure I should set that at the ONLOAD, but I was having issues then passing it to the swapFade() function, as swapFade() is called by a function that has
setInterval('swapFade()',fade_wait);
Can I set it globally in the ONLOAD and reference it in swapFade? Or do I need to keep passing it along to each of the functions?
The second part is how do I then iterate through the objects returned by .childElements() and pass the ID to swapFade()?
Any help is greatly appreciated.