Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perfect

matthew steiner
matthew steiner
6,264 Points

Image/Overlay order

I'm confused, this the code we have going so far in this section, we have it programmed for the overlay to come AFTER the image when a specific image is clicked. Wouldn't that cover up the image?

Also, if the image is appended to the overlay, why do we have to use a jQuery function to specifically show the overlay at all. Wouldn't the image, the caption and the overlay just all show up at the same time?

1 Answer

jag
jag
18,266 Points

The overlay is appended to the body but it's display is set to none (as if it doesn't exist). This allows the other images to be clicked and once an image is clicked the overlay's display is changed with show() & then hide() once overlay is clicked.

Note: You can always inspect an element with your browser and check the element's style.

jQuery is used so the proper image clicked is shown. The <IMG> tag is blank until you select an image and that img src is copied over the overlay img tag.

Overlays are used as a design to make the image pop up more and let the user know the focus is on the image they selected and as well as clicking on the overlay will hide it away.

As for all of the content showing up at the same time, yes it does since the overlay holds the image and caption. Setting the overlay to show makes all elements show up together.

Hopefully that clears up things.