More Scripts

Quiet Count©

404 Logger©

Image Shield©

RRAnimate©

PopZoom©

SMTP FormMail

Spider Tracks©

SearchLog©

CSS Positioning

Image Watermark Script

JavaScript Slideshow

Pre-Populate Forms
with JavaScript

No-Frames Navigation System

Automatic Frame Page
Re-loader

Hotlinking in Frames & Pop-ups Fix©

Bookmark this
on Delicious

JavaScript Fade Slideshow Script

The JavaScript code on this page demonstrates how you can use a combination of CSS positioning and opacity in your HTML to create a simple slideshow without requiring Flash or other complex software. It relies entirely on JavaScript and is compatible with all contemporary browsers, except those on some handheld/mobile devices. The script written to be easy to install in your own website design layouts, and uses your own images. It features optional titles, pause and resume controls, and good flexibility. Note that the display of slide titles, script variables, and the control buttons underneath the slideshow are optional. You can download the complete script by pressing the "Download" button on the left.

The code uses two identically-positioned <DIV>s layered over each other using the z-index setting, and relies on the CSS opacity setting to perform fading. Once a slide has faded to 0 opacity, the code changes the source image for that slide and then slowly fades the previous slide to 0 opacity while simultaneously bringing the new one up to full opacity. You can watch the two opacity settings change while the code runs this demonstration. Of course, when you use the code in your own website, you would turn off this function by setting the JavaScript variable "showStats" to 0.

You'll notice that I used one image of a different size in this demonstration. I did it as a negative example. Using different sized images is not recommended for real pages unless you are comfortable with changing the code yourself because it looks terrible when the browser stretches or compresses images to the specified width and height. If you use this code on your own site, be sure to resize all of your images to be the same, or leave either the "width" or "height" attribute of the <img> tags in the JavaScript unset to allow the browser to automatically resize the image to fit the specified dimension. You can download all of the code for my slideshow by pressing the "Download Slideshow Package" button.