Fading Captioned Slideshow
The Devious Fish captioned slideshow makes use of CSS, the DOM, and JavaScript to provide a cross-browser slideshow mechanism that allows full access to HTML layout capabilities. Slides and captions are defined in HTML, with layout defined with CSS. JavaScript interaction is minimal, and thus knowledge of JavaScript required by the designer is minimal.
Capabilities/Features
- Captions are faded and images cross-faded for a gentle, pleasant user experience.
- Unlimited number of images or captions per image.
- Adjustable slide display time (including alternate time for first image.) and transition speed.
- Initial image is retrieved and rendered along with the rest of the page.
- Displays an image and caption even if JavaScript is disabled.
- Images and/or captions may be hyper-linked. Each slide and caption may have a different destination.
- Easy set-up.
- Random slide order capability.
- Ability to loop indefinitely, play slideshow once and stop at end, or play slideshow once and return to first slide.
Limitations
- Captions will have rounded edges only on supporting browsers. At the time of this writing, this includes Mozilla and Apple’s Safari (and other derivatives of the respective rendering engines). Internet Explorer and Opera do not yet support rounded borders.
- All images in the slideshow must have the same aspect ratio.
- The slideshow is a fixed size and does not respond to window resizes. This aggravates development of liquid layouts.
- Since the slideshow captions appear as document text, they may appear as snippets of disjoint text within the page to search engines when viewed with text-only browsers. This may be avoided using an embedded document, but doing so has other complications. See documentation.
- In the event JavaScript is disabled, the initial image will be displayed but will not change. (Rare)
- If styles are disabled or unsupported, images will be displayed without a slideshow. (Very rare)
Support
| Browser | Regular use | Embedded document use |
|---|---|---|
| Chrome | Fully functional | not tested yet |
| Explorer 6/7 | Will not float but works | Does not work - see workaround in documentation |
| Explorer 8 | No rounded corners in captions | Works - 6 pixel margin |
| Firefox | Fully functional | Works - 2 pixel margin |
| Opera | No rounded corners in captions | Works - 2 pixel margin |
| Safari | Fully functional | Works - 2 pixel margin |
A demonstration of the slideshow is forthcoming.
