Javascript slideshow bug (Scriptaculous based)

Question

Hi,

In the slide show code below, there's a function to press "previous" and "next" links. The "next" one works fine, and if you keep pressing it, it cycles through all the slides.

The "previous" one is a bit messed up, for some reason - it will go back a slide or two but then it will just go blank!

Could you please help? Thank you!

<script type="text/javascript">
    start_slideshow(1, 3, 3000);

    var currentSlide = 1;

    function start_slideshow(start_frame, end_frame, delay) {
        id = setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
    }

    function switch_slides(frame, start_frame, end_frame, delay) {

        return (function() {

            Effect.Fade('slide' + frame, { duration: 1.0 });

            if (frame == end_frame) {
                frame = start_frame; 
                currentSlide = frame;
            } else {
                frame = frame + 1; 
                currentSlide = frame;
            }

            Effect.Appear('slide' + frame, { duration: 1.0 });

            if (delay == 1000) {
                delay = 3000; 
            }

            id = setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay);
        })
    }

    function stop_slideshow() {
        clearTimeout(id);
    }

    function next_slide() {

        clearTimeout(id);

        Effect.Fade('slide' + currentSlide, { duration: 1.0 });

        if (currentSlide == 4) {
            currentSlide = 0;
        }

        currentSlide = currentSlide + 1;
        Effect.Appear('slide' + currentSlide, { duration: 1.0 });
        id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay);
    }

    function previous_slide() {

        clearTimeout(id);

        if (currentSlide == 0) {
            currentSlide = 1;
        } else {
          Effect.Fade('slide' + currentSlide, { duration: 1.0 });

          currentSlide = currentSlide - 1;
          Effect.Appear('slide' + currentSlide, { duration: 1.0 });
          id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay);
        }
    }

</script>

Answer 1

I have run into a problem like this, or similar to this. I am assuming that you are "rapidly" clicking the previous or next button before the effect that is currently queued is finished. This will cause an error with the effects resulting in a given element having more than one affect being applied to it at the same time.

To fix this, scriptaculous gives us the ability to queue effects in order. Reference the docs here: http://wiki.github.com/madrobby/scriptaculous/effect-queues

Essentially, you need to add a scope to your effects. So after you add your duration, you need to add a queue scope.

Example:

Effect.Fade('slide' + currentSlide, { duration: 1.0, queue: { scope: 'slide_show' } });

This allows us to cancel anything in the queue when a button is pressed.

var queue = Effect.Queues.get( 'slide_show' );
queue.each( function( effect ) { effect.cancel(); } );

This will possibly fix your blanking...but possibly not. Regardless, these methods need to be employed in your slide show ;)

Report back if it doesn't fix it, and I'll do some more troubleshooting.