Working with jQuery

In this module, we are going to build a slideshow, using Javascript and jQuery to handle the logic. Slideshows are popular -- they're a great way to showcase collections of images. Slideshows can be as simple as an image with some kind of navigation to get to other images, or they can be robust, full-featured, application-like affairs.

A robust slideshow should be easy to use and easy to maintain. It should be well- labeled, with titles that orient the user on the page. The best slideshows let the user know up front how many images are available, and offer multiple ways to navigate between the images. Once an image is chosen, the navigation should give some indication of which image it is in the flow of the presentation. The images should have captions that don't obscure the image they caption or use up a lot of real estate on the page.

Our slideshow will be full-featured. It will include the following:

Slideshow title: The title tells the user what the collection is all about.

Thumbnail navigation: Tiny representations of the enlargements pique the user's interest and encourage exploration.

Visual representation of how many images are available: Again, thumbnails do this nicely.

Two different ways to navigate through the enlargements: A thumbnail navigation, plus back and next buttons to walk through the thumbnails.

A visual cue highlighting which image was chosen of how many: Highlighting the chosen thumbnail helps orient the user.

Image captions: The captions can float on top of the enlargement to save space. They can also be hidden on demand to allow the user to enjoy the enlargements without distraction.