DevLightbox

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:

1. When the user clicks on an image, they are taken to a new, unstyled webpage.
   
2. The website isn't easy to use because of the navigation problems.
   
3. The user should stay on the original page when they click on the image to improve the UX.
   
4. 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:

1. Add image to overlay
   
2. Add caption to overlay
   
3. Add overlay to body of the DOM
   
4. Capture the click event when user clicks on image
   
5. When user clicks on an image, update the overlay with the selected image
   
6. Show overlay when image is clicked
   
7. Set the caption of the image being featured
   
8. When the user clicks outside of the featured image, hide the overlay