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.

  • Slide 1 - Sunset

    Slide 1 - Sunset. You can add a descriptive caption to each slide's presentation.

  • Slide 2 - Man on Burro

    Slide 2 - Man on burro. You could mention the location, & highlight aspects of the culture.

  • Slide 3 - Seagulls in Flight

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

  • Slide 4 - Child carrying vegetables

    Slide 4 - Having the captions in plain HTML makes them search engine friendly.

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 January 27, 2015

Copyright © 2005-2017 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. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!

  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!