Photo Gallery JS

Purpose: To practice using jQuery selectors and event handlers, write jQuery functions and build logic.

In this lab you will build a photo gallery that has previous and next buttons allowing you to see all the pictures in the gallery.

Your output should look like this - see image.

Download the starter file setup. Youre going to be writing your JavaScript in app.js.

• The images folder has 10 images. You can replace these if you wish. Just name them the same or change the references in the html file.
• Add a document ready statement to the JS file (app.js) to contain all code to be run when the app loads
• Inside the ready() function
  • 1.add click() handlers for the back button and the next button
  • 2.Add code that will call getCurrentPhoto() and call fadeIn() on the object that is returned.
• Create a function called getCurrentPhoto() that will return a jQuery object representing the currently selected photo.
  • Hint - You can use the ":visible" filter as part of your selector.
  • If nothing is visible, return the first image in the list using nth-child(1).
• The logic for each button handler should:
  • 0.Call getCurrentPhoto()
  • 1.Call fadeOut() on that photo to fade it's visibility to 0
  • 2.Add a callback function to the fadeOut() (basically an anonymous function as a parameter in it's parentheses) that will call fadeIn() on either the next() or prev() item, as the case may be.
  • 3.Hint: In the next button handler you can check if the slide is the last one by using is(':last-child'). If that is true, you should fade out the current slide and show the first slide. In the previous button handler you can check if the slide is the first one by using is(':first-child'). If that is true, you can fade out the current child and show the last child.

Reference: https://api.jquery.com/