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/

Academic Honesty!
It is not our intention to break the school's academic policy. Posted solutions are meant to be used as a reference and should not be submitted as is. We are not held liable for any misuse of the solutions. Please see the frequently asked questions page for further questions and inquiries.
Kindly complete the form. Please provide a valid email address and we will get back to you within 24 hours. Payment is through PayPal, Buy me a Coffee or Cryptocurrency. We are a nonprofit organization however we need funds to keep this organization operating and to be able to complete our research and development projects.