Explore Java and more with Jeff 'JavaJeff' Friesen
articles   |   blog   |   books   |   media   |   qa   |   software

Embedding a Slideshow in a Web Page

Embedding a slideshow of images and their captions in a Web page adds value to that page by making the images accessible in one place, by reducing the page's length, and by adding an interactive quality to the page. Consider this example:

My thanks to Karen J. Hatzigeorgiou for allowing me to use her ocean fish public domain images in this article.

This Ichthyology (the study of fish) example doesn't rely on Java or Flash to create the slideshow. Instead, it takes advantage of some simple JavaScript and HTML. Listing 1 presents the JavaScript source code for describing a Slideshow object. 

// Slideshow.js

function Slideshow (numSlides)
{
   this.numSlides = numSlides;
   this.curSlide = 1;

   this.images = new Array (numSlides);
   this.captions = new Array (numSlides);

   this.buttons = new Array (6);

   this.imgStyle = "";

   this.overNext = false;
   this.overPrev = false;

   this.next =
        function ()
        {
           if (this.curSlide == this.numSlides)
               return;
           this.curSlide++;
           this.updateSlide ();
           this.updateButtons ();
        }

   this.nextOut =
        function ()
        {
           this.overNext = false;
           this.updateButtons ();
        }

   this.nextOver =
        function ()
        {
           this.overNext = true;
           this.updateButtons ();
        }

   this.prev =
        function ()
        {
           if (this.curSlide == 1)
               return;
           this.curSlide--;
           this.updateSlide ();
           this.updateButtons ();
        }

   this.prevOut =
        function ()
        {
           this.overPrev = false;
           this.updateButtons ();
        }

   this.prevOver =
        function ()
        {
           this.overPrev = true;
           this.updateButtons ();
        }

   this.updateButtons =
        function ()
        {
           if (this.curSlide == 1)
               document.getElementById ('prev').src = ss.buttons [2];
           else
           if (this.overPrev)
               document.getElementById ('prev').src = ss.buttons [1];
           else
               document.getElementById ('prev').src = ss.buttons [0];

           if (this.curSlide == this.numSlides)
               document.getElementById ('next').src = ss.buttons [5];
           else
           if (this.overNext)
               document.getElementById ('next').src = ss.buttons [4];
           else
               document.getElementById ('next').src = ss.buttons [3];
        }

   this.updateSlide =
        function ()
        {
           var newHTML = "<img src='"+this.images [this.curSlide-1]+"'"+
                         "style='"+this.imgStyle+"'><p>"+
                         this.captions [this.curSlide-1];
           document.getElementById ('slide').innerHTML = newHTML;

           newHTML = "&nbsp;"+this.curSlide+" of "+this.numSlides+"&nbsp;";
           document.getElementById ('info').innerHTML = newHTML;
        }
}

Listing 1: slideshow.js

The Slideshow function that's described in Listing 1 requires that you pass the number of slides as an argument to this function, and initializes the following object properties:

  • curSlide is the one-based index of the current slide -- it defaults to 1. You don't access this property.
  • images is an array of strings that identify the locations and names of slideshow image files. You must initialize this property such that the number of entries matches the value passed to the function.
  • captions is an array of strings that briefly identify the various slideshow images. You must initialize this property such that the number of entries matches the value passed to the function.
  • buttons is an array of strings that locate/name previous/next button image files. You must initialize this property to six entries: previous normal state, previous mouse-over state, previous disabled state, next normal state, next mouse-over state, and next disabled state.
  • imgStyle is a string that identifies the CSS styling for the slide's <img> tag. You can use this property to provide a suitable border; you might need to force the height of all images to be the same.
  • overNext is a Boolean that is true whenever the mouse moves over the next button. You don't access this property.
  • overPrev is a Boolean that is true whenever the mouse moves over the previous button. You don't access this property.
  • next is a function that switches to the next slide. You invoke this function from the onclick event handler of the next button's anchor tag.
  • nextOut is a function that changes the next button's state when you move the mouse out of this button. You invoke this function from the onmouseout event handler of the next button's anchor tag.
  • nextOver is a function that changes the next button's state when you move the mouse over this button. You invoke this function from the onmouseover event handler of the next button's anchor tag.
  • prev is a function that switches to the previous slide. You invoke this function from the onclick event handler of the previous button's anchor tag.
  • prevOut is a function that changes the previous button's state when you move the mouse out of this button. You invoke this function from the onmouseout event handler of the previous button's anchor tag.
  • prevOver is a function that changes the previous button's state when you move the mouse over this button. You invoke this function from the onmouseover event handler of the previous button's anchor tag.
  • updateButtons is a function that updates the HTML to reveal the previous and next buttons in their current states. You only access this function when presenting the first slide.
  • updateSlide is a function that updates the HTML to reveal the current slide's image and caption. You only access this function when presenting the first slide.

Slideshow relies on external HTML to provide <img> tags with next and prev IDs. The updateButtons function accesses these tags via document.getElementById ('next').src and document.getElementById ('prev').src to replace their button image content.

Slideshow also relies on external HTML to provide tags with slide and info IDs. The updateSlide function accesses these tags via document.getElementById ('slide').innerHTML and document.getElementById ('info').innerHTML to replace their content.

Listing 2 presents HTML that shows you how to load slideshow.js into a page. It also presents the JavaScript code for creating/initializing the Slideshow object that's used to describe the earlier slideshow. 

<script type="text/javascript" src="slideshow.js">
</script>

<script type="text/javascript">
  var ss = new Slideshow (7);

  ss.images [0] = "blowfish.jpg";
  ss.images [1] = "goldfish.jpg";
  ss.images [2] = "moonfish.jpg";
  ss.images [3] = "salmon.jpg";
  ss.images [4] = "sardine.jpg";
  ss.images [5] = "sawfish.jpg";
  ss.images [6] = "sunfish.jpg";

  ss.captions [0] = "Blowfish";
  ss.captions [1] = "Goldfish";
  ss.captions [2] = "Moonfish";
  ss.captions [3] = "Salmon";
  ss.captions [4] = "Sardine";
  ss.captions [5] = "Sawfish";
  ss.captions [6] = "Sunfish";

  ss.buttons [0] = "prev.gif";
  ss.buttons [1] = "prev_over.gif";
  ss.buttons [2] = "prev_disabled.gif";
  ss.buttons [3] = "next.gif";
  ss.buttons [4] = "next_over.gif";
  ss.buttons [5] = "next_disabled.gif";

  ss.imgStyle = "border: solid #000000 1em; height: 200px";

  window.onload = function ()
  {
     ss.updateSlide ();
     ss.updateButtons ();
  }
</script>

Listing 2: Slideshow creation JavaScript

Listing 2 reveals a couple of interesting items:

  • I include height: 200px in the CSS string assigned to imgStyle to force all of the images (which have different heights) to a uniform height of 200 pixels.
  • I invoke updateSlide and updateButtons from the function attached to the window object's onload event handler to ensure that the first slide is visible, and that the buttons reflect their initial states when the page is loaded/reloaded.

For the second item, I rely on window.onload instead of body.onload because I don't have direct access to the <body> tag -- it's accessed from inside makepage.cgi.

Finally, we need some HTML to display the current slide and the buttons. You can choose whatever layout you want, as long as you meet slideshow.js's coupling requirements. Check out Listing 3 for one possibility. 

<div id="slide" style="text-align: center; color: #000080;
                       font-family: Arial; font-size: 18px">
</div>

<p>
<div style="text-align: center">
  <a onclick="ss.prev()" onmouseout="ss.prevOut ()"
     onmouseover="ss.prevOver ()">
    <img id="prev" src="" alt="previous">
  </a>

  <span id="info" style="color: #808080; font-family: Arial;
                         font-size: 12px; vertical-align: 10px">
  </span>
     
  <a onclick="ss.next()" onmouseout="ss.nextOut ()"
     onmouseover="ss.nextOver ()">
    <img id="next" src="" alt="next">
  </a>
</div>

Listing 3: Slideshow HTML

Conclusion

This article revealed a simple JavaScript-/HTML-based tool for embedding a slideshow in a Web page. Now that you know how it works, you'll be able to customize this tool to handle any unique requirements that you might encounter.

Download code.zip

Note: All code tested with Firefox 3.5.5 and Internet Explorer 8.0.6001.18702 on the Windows XP SP3 platform.


LEARN JAVA FROM APRESS