Exercise - Extending the Image Gallery

1) Setup

If you have not done so already, download the in class files from here Before you extend the image gallery, you need to make sure that you've completed the in class demos. You'll notice that the following demos have only been partly completed:

  • 19.2_scroll_To_Top
  • 19.3_image_Roll_Over
  • 19.5_changing_a_class_using_javascript

2) Completing the Basic Functionality

  • Open up the 19.4_image_gallery folder , using javaScript, add the functionality such that when a link is clicked the src of the #mainImage element is updated to a new image. You can pick any image in the img folder or download your own.

3) Replace the text links with thumbnails

Currently, each image is changed by clicking on a <li> element:

<li id="image1Link"> image one </li>

You'll notice in you image folder there are some thumbnails, update your HTML and CSS so you have image previews. Here's an example of what the first <li> element will be changed to:

<li id="image1Link"> <img src="img/ocean_thumb.jpg"> </li>

This is what your gallery should look like:

4) Finishing Touches

  • Automatically display the main image when the user runs their mouse over the preview image.
  • Create a css class which adds a grey border to an image. Add this border when the mouse rollsOver the preview image and remove it when the mouse rollsOff the preview image.