What is Slideshow JS?

Slideshow JS is a free JavaScript library that seeks to make it easy for you to showcase your images on your website. All of its features can be configured via HTML class attributes, and though it ships with a stylesheet for the title captions and pause message, they can be completely configured with your own styles. For more information, check out How do I use it?

It's 100% unobtrusive, requires absolutey no scripting, and takes care of all of the cross-browser CSS quirks to provide cross-browser compatibility for IE7, Firefox, Safari, and Opera. There is currently no fading support for IE6 but this will be incorporated into the next release.

You can download the script, required libraries, and instructions for how to configure Slideshow JS on this page. Every step has been taken to ensure that the script performs the same across all browsers and does not override any of your existing styles. If you discover a bug, or other issue please email me.

What's new in 1.5?

This is just a brief overview of the features that have been introduced. Please check out the configuration details to learn how to use the new features.

Pausing
Image Captions
Adjust the speed of the transitions
Set the maximum number of images to display
Manually cycle the slideshow
CSS Fixes
- All images, regardless of width, are centered in the slideshow.
- Better cross browser compatibility.
CSS Customization
- The new pause message can be configured via CSS.
- The image captions can be configured via CSS.

Where do I get it?

Slideshow JS Lite This archive contains only the Slideshow JS script and the bundled stylesheet for the title caption and pause message. If you're already using Prototype 1.6 and Scriptaculous 1.7 beta 3, then this archive is for you.

Slideshow JS Full This archive contains Slideshow JS, the bundled stylesheet for the title caption and pause message, as well as the Prototype 1.6 and Scriptaculous 1.7 beta 3 dependencies. You'll need this archive if your page doesn't currently include these libraries.

Note on IE6 Please note that fading is not currently supported in IE6. Several users have contacted me about this and this will be incorporated into the next release.

How do I use it?

I've tried to make it as easy as possible to setup the script. Aside from the required libraries, there are a few HTML elements with optional attributes required to get the script going. As of version 1.5, Slideshow JS supports multiple configuration options. Please make sure you read this section in order to be aware of all of the available configurations.

Installing Slideshow JS In the header of your page, include the scripts and the stylesheet. You may have to modify the paths to the scripts based on your directory structure. If you're already using Prototype and/or Scriptaculous, you can omit their inclusions. Note that the scripts must be included in this order.

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous/effects.js"></script>
<script type="text/javascript" src="javascripts/slideshow.js"></script>
<link rel="stylesheet" src="stylesheets/slideshow.css" />

Setting up the image container

In order for Slideshow JS to work, you must place all of the img elements in a div container. This div must have the id attribute of slideshow-container.

Slideshow JS can display a title with captions for each image. To give an image a caption, specify the caption in the alt attribute of each img element. In order for Slideshow JS to display the titlebar, you must add another div to the slideshow-container with the id attribute of slideshow-title. For example...

<div id="slideshow-container">
    <img src="ExampleImage.jpg" alt="This would be the title" />
    <div id="slideshow-title">
    </div>
</div>

Configuring Slideshow JS

As of Slideshow JS 1.5, the script supports automatic transitions, manual transitions, pausing, fading, captions, limits, and transition speeds. All of these can be configured using HTML attribute elements. A description of each parameter is below as well as a few examples.

fade: Include this attribute if you wish your images to cycle with fading transitions. Without it, the images will cycle with no effects.
speed:[a number]: Use this attribute to control how long each of your images are displayed (in seconds). As of version 1.5, Slideshow JS requires that either a speed be specified or manual be declared; otherwise, the slideshow will not start.
pause: Include this attribute if you wish the slideshow to pause whenever you move your mouse over the currently displayed image.
manual: Include this attribute if you wish to manually cycle your images. As of version 1.5, Slideshow JS requires that either a speed be specified or manual be declared; otherwise, the slideshow will not start. This attribute can be used while also specifying a speed, though it is not recommended as it can result in erratic behavior.
transition:[a number]: Use this attribute to control how fast the fading transition lasts (in seconds).
limit:[a number]: Use this attribute to control how many images to display. Once the slideshow has displayed the specified limit number, the slideshow will stop.
<div id="slideshow-title"></div>: Include a div with this id if you wish each img's alt attribute to be used as a title.

Example 1: Automatic slideshow with normal transitions at five seconds that can be paused.

<div id="slideshow-container" class="speed:5 pause">
    ...
</div>

Example 2: Manual transitions with fading

<div id="slideshow-container" class="manual fade">
    ...
</div>

Example 3: Automatic slideshow with transitions that cannot be paused (like Slideshow JS 1.0)

<div id="slideshow-container" class="fade speed:8">
    ...
</div>

Example 4: Showing four images with half-second fading transitions and pausing

<div id="slideshow-container" class="limit:4 transition:.5 pause">
    ...
</div>

Example 5: Shows four images that cycle automatically with 1/2 second fading transitions that can be paused

<div id="slideshow-container" class="limit:4 transition:.5 pause">
    ...
</div>

Bugs & Feature Requests

If you find a bug or wish to see a feature incorporated into the next release of Slideshow, or if you wish to be added to a mailing list to receive updates whenever the script is updated, please use the form below.