A simple but effective javascript fading slideshow.

a.k.a. Ultimate Fade-in Slideshow

(<-- Example)

This is another useful tool I found on Dynamic Drive. It's really simple to get working, and it can add that little bit of fancy you sometimes need to impress your client. You can acheive the same thing using flash, but I think it's always better to use javascript over flash, assuming you can get the effect you want, simply because it's more widely supported.

You can find the files you need here. I can't offer the files to download from my website because Dynamic Drive don't like that.

You can find everything you need to know to get the slideshow up and running by following the link above, but on this page I've included a few extra tips that I've figured out since I've been using this script.

Positioning the slideshow

I've noticed some browsers don't respect the slideshow's boundaries. Sometimes text or other images will slide in under the slideshow so you can't read them. The easiest workaround I've found for this is to always put the slideshow inside a div that has the same width and height as the slideshow itself. This makes it easier to position it too, as you can treat it like any other div.

Take one image (the best one) from the slideshow and also use it as the background image for the div you're using to contain the slideshow.

This ensures that the few people with javascript disabled will still see an image.

Make all your slideshow images the same size

It just looks better that way. Even if it means filling in the background of an image to make it fit the dimensions.

Don't go crazy with your images

It's possible to have too much of a good thing. Although the script can handle as many images as you want, I like to keep it down to about 10 or less - and often only 3 or 4. Stuff too many in there and you just end up with a page that takes forever to fully load.

More...