Loop this?

[PartisanEntity]

Hello all,

I have a rudimentary image fader using Javascript and the Scriptaculous framework:

Event.observe(window, 'load', function() {
fadeout.delay(5.0);
fadeout2.delay(10.0);
fadeout3.delay(15.0);
});
function fadeout(){
new Effect.Fade("slideshow_container", {duration:1.5, from:1.0, to:0.0});
}
function fadeout2(){
new Effect.Fade("slideshow_container2", {duration:1.5, from:1.0, to:0.0});
}
function fadeout3(){
new Effect.Fade("slideshow_container3", {duration:1.5, from:1.0, to:0.0});
}

What I would like to do is have this start over again once it's finished. I am not sure how to go about doing that.

Any ideas?

[daveVk]

Event.observe(window, 'load', function() {fadeout.delay(5.0);});
var n = 1;
function fadeout(){
new Effect.Fade("slideshow_container" + (n++), {duration:1.5, from:1.0, to:0.0});
if ( n===4 ) { n=1; }
fadeout.delay(5.0);
}

[PartisanEntity]

I seem to have messed up the logic here, because once the Effect.Fade has been executed on a DIV the DIV is gone and doesn't appear anymore.

So even though it's looping, it only works the first time, after that the DIV area is empty and has no images.

[daveVk]

Not familiar with framework, code needed where shown.

Event.observe(window, 'load', function() {fadeout.delay(5.0);});
var n = 1;
function fadeout(){
if ( n===1 ) { ... code to unfade all ? ... }
new Effect.Fade("slideshow_container" + (n++), {duration:1.5, from:1.0, to:0.0});
if ( n===4 ) { n=1; }
fadeout.delay(5.0);
}

[Fotiman]

Maybe something like this:

Event.observe(window, 'load', function() {
  function hideAndShow() {
    fadeout.delay(5.0, 'slideshow_container');
    fadeout.delay(10.0, 'slideshow_container2');
    fadeout.delay(15.0, 'slideshow_container3');
    fadein.delay(20.0, 'slideshow_container');
    fadein.delay(25.0, 'slideshow_container2');
    fadein.delay(30.0, 'slideshow_container3');
  }
  hideAndShow(); // Execute once on page load
  setInterval(hideAndShow, 30000); // Then repeat every 30 seconds
}); 
function fadeout(id){ 
  Effect.Fade(id, {duration:1.5, from:1.0, to:0.0}); 
} 
function fadein(id) {
  Effect.Appear(id, {duration: 1.5, from: 0.00, to: 1.0});
}

[PartisanEntity]

Thanks very much for the all the feedback and ideas.

I am trying to combine the two ideas. Basically what I would like to do is have the first image fade in, stay for 5 seconds, then fade out, then the same for image2, then the same for image 3 and then loop back to image1 again and so on.

I am embarrassed to admit I have been working on this for 2 days now.

[PartisanEntity]

I think Effect.Opacity is what I am looking for, since Effect.Fade completely removes the element which makes the page "jitter" when the element is at the bottom of the page.

[daveVk]

Give this a try, assumes they are initially faded ?

Event.observe(window, 'load', function() {fadeout.delay(5.0);});
var n = 4;
function fadeout(){
// fade out prior
new Effect.Fade("slideshow_container" + (n++), {duration:1.5, from:1.0, to:0.0});
if ( n===4 ) { n=1; }
// at same time fade in next
new Effect.Fade("slideshow_container" + (n), {duration:1.5, from:0.0, to:1.0});
fadeout.delay(5.0);
}

[PartisanEntity]

Sorry but I think there is an error in your code? Because currently when your code runs, it starts looking for slideshow_container4 which doesn't exist, so I get a "element is null" error.

Should be this, right?:

Event.observe(window, 'load', function() {fadeout.delay(5.0);});
var n = 4;
function fadeout(){
// fade out prior
if ( n===4 ) { n=1; }
new Effect.Fade("slideshow_container" + (n++), {duration:1.5, from:1.0, to:0.0});
// at same time fade in next
new Effect.Fade("slideshow_container" + (n), {duration:1.5, from:0.0, to:1.0});
fadeout.delay(5.0);
}

[daveVk]

sorry, should be

var n = 3;

[PartisanEntity]

Thanks so much for all the help and patience, it's working nicely now. I have images set to be faded on load, and this is now working superbly :)

Thanks to the both of you.