Build a lightbox feature using jQuery
#The Setting: We have a client who wants us to build them a webpage to feature their artwork. They want it to be simple, elegant, and, above all, easy to use.
#The Problems:
- When the user clicks on an image, they are taken to a new, unstyled webpage.
- The website isn't easy to use because of the navigation problems.
- The user should stay on the original page when they click on the image to improve the UX.
- The client wants it to resemble a gallery - they want the rest of the screen to darken and show the image the user clicked on larger and in the center of the page.
#The Tasks:
- Add image to overlay
- Add caption to overlay
- Add overlay to body of the DOM
- Capture the click event when user clicks on image
- When user clicks on an image, update the overlay with the selected image
- Show overlay when image is clicked
- Set the caption of the image being featured
- When the user clicks outside of the featured image, hide the overlay