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

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Posted by Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

What 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
Ashley Carpenter
13,393 Points

To 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.

http://lokeshdhakar.com/projects/lightbox2/

Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Do you mean that you can also work with opacity and the z-index?

Ashley Carpenter
Ashley Carpenter
13,393 Points

Yes, 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

Richard Ward
Richard Ward
14,665 Points
Richard Ward
Richard Ward
14,665 Points

A 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
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Thanks, then I think I understand why a layer is put in the lightbox.

Caleb Kleveter
MOD
Caleb Kleveter
Treehouse Moderator 37,862 Points
Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

If 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
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Then how does lightbox distinct from a modal window, it sounds the same.