JavaScript Slideshow With Captions
This version of my slideshow relies on applying CSS styles to plain HTML, a method that is much more search-engine friendly than the other slideshow scripts because the content is not generated by JavaScript. The JavaScript merely reformats the presentation. So if you want your images available through the search engines, this is a good choice. However, it does require that you constuct the slides manually in the HTML for the page using strict formatting. It can also be made to degrade gracefully for users running with JavaScript disabled, as I have done here. Try it yourself by disabling JavaScript support in your browser and reloading this page. It's not particularly attractive, but all of the content is visible.
As I say, this version uses a <UL> for structure, with each individual slide contained in a <LI> with sequentially-numbered ID attributes on key elements, such as "slide1", "slide2", etc. The CSS settings in the stylesheet called when JavaScript is enabled, change the <LI>s to display:block in order to make them behave like <DIV>s, and positions them outside the visible boundaries of the containing <UL> until the slideshow script scrolls them into view, one by one. Using conventional HTML mark-up to hold the content makes it simple to add new slides to your show, change the order of the presentation, and include specific information about each image, much like a gallery script except that a slideshow needs no user interaction.
This code can be altered in many ways to customize the presentation. I've recently updated the code to make the background of the caption box transluscent in modern browsers. You can also easily change the component sizes and the color scheme in the stylesheet to compliment your website design needs.
This page was last modified on August 27, 2020
