Slideshow - an example of a maintainable, unobtrusive JavaScript solution

Step 2: Planning the Script

Once you have assessed the problem and picked the solution you want to use, you can start planning the script. In essence, what our script should do is:

Check if the slideshow list exists, and that it has several pictures (no point in creating a slide show for one photo, is there?).
Hide all the photos but the first one.
Create the next and previous links and the indicator showing where we are inside the show.
Add event handlers to make the links increase or decrease the image number that is currently shown.
Make sure that the slide show does not get out of bounds - when the image number is less than 0 it should become the last image and the other way around.

Different functionality approaches

We have several ways to approach this problem. One of them is to use the DOM to walk through each LI item and hide it. In the event listener function we then hide the previously shown LI (if there is one), and show the current one.

Note: It makes much more sense to show and hide the LI instead of the image, as it allows maintainers to put other elements like a caption in each slide.

The problem with this is that we do the necessary style changes in JavaScript which means that if there should be more sophisticated style changes than just changing the display from block to none our script can get messy (not separating presentation from behaviour).

Leaving styling to the CSS parser

A much cleaner way is to leave all the look and feel changes (and this is what hiding something is after all) to the CSS parser of the browser. In our example we can easily hide all the list items in the slideshow with one CSS rule and override it with a specific class for the current one:

HTML:

<ul id="slideshow">
  <li class="current"><img src="img/flat1.jpg" 
  alt="Hallway" /></li>
  <li><img src="img/flat2.jpg" alt="Hob" /></li>
  <li><img src="img/flat3.jpg" alt="Bathroom" /></li>
  <li><img src="img/flat4.jpg" alt="Living Room" /></li>
  <li><img src="img/flat5.jpg" alt="Bedroom" /></li>
</ul>

CSS:

#slideshow li{
  display:none;
} 
#slideshow li.current{
  display:block;
}

The only problem is that if we put this in the CSS and JavaScript is disabled, the visitors will never be able to reach the other pictures. Therfore we need to only apply these styles when and if JavaScript is available. The trick is to apply a CSS class to the slideshow UL when JavaScript is enabled, for example with the name js. This allows us to only show the effect when JavaScript is enabled with a simple change in the CSS:

CSS:

#slideshow.js li{
  display:none;
} 
#slideshow.js li.current{
  display:block;
}

This class hook can also be used to offer a completely different look for the static and the dynamic version of the slide show.

All our script needs to do to show and hide the current and previous photo is to remove or add the class called current.

In order to make sure that our script will not interfere with other scripts on the same page, we will create one main object and nest all the methods and properties in there. This makes sure that our function called init() will not be overwritten by or overwrite any of the other functions with the same name.

JavaScript:

slideshow = {
  current:0, // current slide number
  init:function(){
    // initializing and setting the event
    // handlers	
  },
  show:function(e){
    // event listener, the e will be the 
    // event object sent by the browser.
  }  
}