Web Programming Notes

This is another javascript library.  It creates a cross fading slideshow of images from a list of IMG tags and some basic JavaScript.  The code is based on some I found elsewhere some time back.  I will give credit if I can find where!
The script has been tested in Firefox2, IE6 and Opera9.  Have a look at the example page.

The script has the following features:

• Multiple slideshows can co-exist on a single page
• The implementation is accessible meaning it will still render the first image if the slideshow fails
• The code is contained within a single object definition so it won’t interfere will any other JavaScript

How to implement:

1. Include the SlideShow.js file in the head of your document.
2. Create a list of IMG tags (you can put links around them) encased in a DIV tag.  Set the ‘display’ style of all but the 1st image to ‘none’.  Give the DIV tag an id attribute. e.g.
   <div id=”slideshowcontainer_a”>
      <img src=’s1_a.jpg’>
      <img src=’s1_b.jpg’ style=’display:none;’>
      <img src=’s1_c.jpg’ style=’display:none;’>
      <img src=’s1_d.jpg’ style=’display:none;’>
     </div>
3. After the DIV tag place the JavaScript code that will render the slideshow.
   <script>var s1 = new SlideShow(’slideshowcontainer_a’,240,180,{});</script>
   The parameters are ID of DIV tag, width and height (pixels) and options.  For details of options see the example page source.