DCCCD Java Programming Lab 9 Photo Gallary With Navigation Bar

Lab 9

Attached Files:


  • Create a photo gallery
  • Create an animated navigation bar


In lab 9, we will be creating a page with a photo gallery and an animated navigation bar. The html and images have been provided in the attached file. For the photo gallery, you will write the script to allow a user to click on a thumbnail image and have it display as the large photo on the page. You will also add code to highlight the thumbnail images with styles when they hover over each one. For the navigation bar, you will be using a plugin to create dropdown menus for sub-items in the main menu.


  • For this lab, you will be working with the mums.html page attached to this assignment.
  • At the bottom of the page is a div called gallery. It includes a large image and 5 smaller thumbnail images. You will covert this section into a working photo gallery:
    • Add a hover effect to each of the smaller images to add a thin dark green border and box shadow when hovering over the image and remove it when you move off the image.
    • Add a click event to each of the smaller images to replace the src attribute of the larger image with the src attribute from the clicked image. Then take the alternate text from the small image and use it to replace the text under the large image.
  • Create an animated navigation bar for the links in the nav section of the page.
    • Download the smartmenus jQuery plugin
    • Modify the HTML and JavaScript to create the navigation bar.
  • Upload your files to the server. Test and submit the assignment.
Lab Requirement Point Value

Create rollovers for all the thumbnail images

20 points

Create a click event to display the thumbnail images in the larger image along with their title 25 points
Convert the nav section into an animated menu using the jQuery SmartMenus plugin 25 points
Page displays and script executes according to specification on the server

5 points


75 points