PicFader: A Simplified Version of Dynamic Drive's Ultimate Fade-In Slideshow
Have you ever wanted to add a little activity to your website? Nothing elaborate... just something that will give your pages a more dynamic feel, so that your visitors don't feel like they are staring at the same thing every time they access your site.
One way to enhance a site's visual appeal is to animate its graphics. We're not talking about adding annoying little stars that float around the page, or putting tacky flames on your logo. We're talking about creating a tasteful, elegant way to change between a series of images.
If you look at the image on the right, you'll see an example of this effect, courtesy of the fine folks at Dynamic Drive. This particular slideshow uses Javascript and DHTML to rotate through a series of pictures, gradually fading from one image to the next.
The original version, found at http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm, has a few features that I've stripped out: for example, it can be used to animate multiple images on the same page, can assign a unique hyperlink to each image, and allows you to define a border width for the images. The version on this site has been modified slightly, mainly to make it a little simpler to implement on several different pages in the same site.
In this version, you include the script file (picfader.js) on each page where you'll use the slideshow. Ideally, it should be in the head section of the document:
You invoke the "fadeshow" function, and pass it the name of an image set as a parameter. On this site, for example, the script includes four sets of images: "animals," "flowers," "tech," and a generic default set.
On this page we use the "tech" set of images, and we place the script in its own div to govern its appearance with CSS:
What is in the Javascript? You can scroll through the textbox below to see the code. You can also select all the text and copy and paste it into a new document:
We can reference the same script from other pages, and pass it a different parameter to select a different set of images. You can click on the links below to see some examples:
- picfader_animals.htm - This uses fadeshow("animals").
- picfader_flowers.htm - This uses fadeshow("flowers").
- picfader_generic.htm - This uses fadeshow().
So what exactly can you do with this script? Aside from selecting different image sets for different pages, there are a few other things you can adjust:
- You can adjust how long the images are displayed.
- You can adjust the background color that displays behind the images before the slideshow starts.
- You can choose to display the images in a predefined order, or display them randomly.
- You can pause the slideshow when the mouse is moved over the image.
- You can change the text that displays when the mouse is over the slideshow.
The script has (hopefully) been laid out in such a way that it's reasonably easy to read, and it should be fairly clear where to modify the settings described above.
The screen capture to the right shows a portion of the script, with values that you'll want to edit highlighted in yellow.
If you'd like a complete package of sample code, you can download picfader.zip. That file includes sample HTML pages, the Picfader javascript, and some sample photos.
If PicFader is too simple and straightforward, and you prefer something that's massively more complicated and harder to implement, have no fear: we've got just the thing for you: PicNav. PicNav was written by drunken rabid monkeys, and if you want to use it, you need to be willing to suffer and learn The PicNav Way. It does, however, give you the ability to manage lots of photos, and to create pages that are exceptionally Google-friendly.