Miniature slideshow for DIVs using Scriptaculous (See related posts)

Very nice! I've concocted my own slideshow based own this: http://blog.remvee.net/post/17

How would I use a text link to jump to the next/previous slide?

Please help!
My site is - www.gamezrule.org - and I use this code.
But, this code makes my middle column 'flicker' or 'stutter'.

Please help me.
The code I use is:

<div id="slideshow1" class="slide"><div><a href='showarticle.php?aid=84'><img border='0' src='images/1.png' /></a></div></div>
<div id="slideshow2" class="slide" style="display: none;width: 495px;height: 150px;"><div><a href='showarticle.php?aid=55'><img border='0' src='images/2.png' /></a></div></div>
<div id="slideshow3" class="slide" style="display: none;width: 495px;height: 150px;"><div><a href='gallery.php'><img border='0' src='images/3.png' /></a></div></div>
<div id="slideshow4" class="slide" style="display: none;width: 495px;height: 150px;"><div><a href='cms'><img border='0' src='images/4.png' /></a></div></div>
<div id="slideshow5" class="slide" style="display: none;width: 495px;height: 150px;"><div><a href='http://www.gamezrule.org/showarticle.php?aid=53'><img border='0' src='images/5.png' /></a></div></div>
<script type="text/javascript">
    
    start_slideshow(1, 5, 2000);
    
    function start_slideshow(start_frame, end_frame, delay) {
        setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
    }
                            
    function switch_slides(frame, start_frame, end_frame, delay) {
        return (function() {
            Effect.Fade('slideshow' + frame);
            if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
            setTimeout("Effect.Appear('slideshow" + frame + "');", 950);
            setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 950);
        })
    }

</script>

Thanks again. :)

Hi Marc.gzr,

If you wrap all of you slideshowX divs inside of a wrapper div that has the same width and height as the images (or even a little bigger) then you won't get the flicker.

The flicker you see is the div that will be replaced disappearing and the new div getting put in it's place appearing. There is time in between those two events where there is no div being displayed so the browser thinks there's nothing there and adjusts accordingly. The wrapper div will maintain that space throughout the replacement process and keep the flicker from happening.

Thanks for the snippet peter!

Thanks bro...you read my mind!