Custom Web Design by Rainbo Design

  • Slide 1 - Sunset

    Slide 1 Description - Sunset. You can add a descriptive paragraph of text to each slide's presentation to give more information to your users.

  • Slide 2 - Man on Burro

    Slide 2 Description - Man on burro. You could add a mention of the location, and highlight aspects of the culture here.

  • Slide 3 - Seagulls in Flight

    Slide 3 Description - Seagulls in flight. Slideshows with captions are certainly more interesting.

  • Slide 4 - Child carrying vegetables

    Slide 4 Description - Child carrying vegetables. And having the captions in plain text on your pages make them easier for search engines to find.

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.



Return to the main Slideshow Page where you can download the complete slideshow package with all of the variations.

This file was last modified on February 01, 2012



Copyright © 2011 by Richard L. Trethewey, Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission.

  Share This Page!