Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Learning coding
Front End Web Development Techdegree Student 9,937 PointsWhat is lightbox?
It has been mentioned before and I see (read) that this is an lightbox example. But what exacly is lightbox? Thanks in advance.
3 Answers
Ashley Carpenter
13,393 PointsTo me, a lightbox is an overlay that provides focus to an image. For example, if you had a group of small images and you wanted users to be able to click them to see an enlarged version you may use a lightbox to do this. It's subjective, but I would use a slightly opaque black div to cover my main HTML page, then place an image in the middle. This provides focus to the image and slightly obscures the rest of the page. See the below link for a visual example.
Richard Ward
14,665 PointsA Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page.
Learning coding
Front End Web Development Techdegree Student 9,937 PointsThanks, then I think I understand why a layer is put in the lightbox.
Caleb Kleveter
Treehouse Moderator 37,862 PointsIf I am correct in my understanding, a lightbox as a sort of popup that appears when you click on an element in a website. It usually gives you a more detailed description of what you clicked on, a larger image, an announcement, or some other call to action. You sometime see these on blogs that want you to subscribe.
Learning coding
Front End Web Development Techdegree Student 9,937 PointsThen how does lightbox distinct from a modal window, it sounds the same.
Learning coding
Front End Web Development Techdegree Student 9,937 PointsLearning coding
Front End Web Development Techdegree Student 9,937 PointsDo you mean that you can also work with opacity and the z-index?
Ashley Carpenter
13,393 PointsAshley Carpenter
13,393 PointsYes, you can use CSS z-index to make the light box the top "layer" on the website and the opacity to make your main webpage slightly visible