Creating an Image Gallery Application

Starting with the downloadable assignment files, write the Javascript needed for the application. Use the book and lectures as a guide. In this exercise, you’ll develop an Image Gallery application that displays different images when the user clicks on the links at the top of the page. This works like the Image Swap application below.

1.  You’ll find the HTML, CSS, and image files for this application in the week 6 folder

You’ll also find an empty JavaScript file named image_gallery.js. You can add your code to this file. Customize the interface with your first and last names.

2.  In the JavaScript file, add an event handler for the ready() event method.

3.  Use the each() method to run a function for each <a> element in the unordered list of items. Then, add jQuery code that gets the URL and caption for each image and preloads the image. You can get the URL from the href attribute of the <a> element, and you can get the caption from the title attribute.

4.  Add an event handler for the click event of each link. The function for this event handler should accept a parameter named evt. The jQuery code for this event handler should display the image and caption for the link that was clicked. In addition, it should use the evt parameter to cancel the default action of the link. 

5.  Add a jQuery statement that moves the focus to the first link on the page when the page is loaded.