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 Perfect

Aleksandr Vinogradov
Aleksandr Vinogradov
12,113 Points
Posted by Aleksandr Vinogradov
Aleksandr Vinogradov
12,113 Points

Image lightbox.. What if your image is scrolled down?

I am making my own website and using this tutorials to do it. This particular tutorials works properly when the images are located up. What if you are scrolled down. At the moment when you click it, it only shows the image on a fixed spot. In our case margin-top:10%

What if you are at the bottom of the page and you cant see the image?

How can i make the overlay and the image appear in my website at the point where my current views is not statically on the top.

Thanks!! Aleks

2 Answers

Aleksandr Vinogradov
Aleksandr Vinogradov
12,113 Points
Aleksandr Vinogradov
Aleksandr Vinogradov
12,113 Points

Found the solution myself.. I really hope people will get more active in this forums as when i ask questions that are not directly on what the course teaches then i rarely get an answer.

Here is the solution:

User position fixed and the overlay will scroll down with you. 

 #overlay {
background: rgba(21, 21, 21, 0.72); 
width:      100%;
height:     100%; 
top:        0; 
left:       0; 
position:   fixed;
display: none;    
}
David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

Great solution thanks!

Only issue I have is you haven't marked yourself best answer yet?!

WCM Operations
WCM Operations
Courses Plus Student 15,102 Points

Thanks for this! I was having the same problem. I too wish more people would become active in these forums. As it is now, it's one of the last places I look. :-\

Craig Jamieson
Craig Jamieson
19,585 Points
Craig Jamieson
Craig Jamieson
19,585 Points

I have tried your solution and it ends up hiding any part of the image below the fold of the browser. I also read that you can add

```overflow: scroll;

But that causes a double scrollbar in Chrome which is just weird.

I do hope someone finds a working solution to this probem
Craig Jamieson
Craig Jamieson
19,585 Points
Craig Jamieson
Craig Jamieson
19,585 Points

I have tried your solution and it ends up hiding any part of the image below the fold of the browser. I also read that you can add

```overflow: scroll;

But that causes a double scrollbar in Chrome which is just weird.

I do hope someone finds a working solution to this probem
ub46473788
ub46473788
8,782 Points

I'm struggling with this problem as well. 

position: fixed;

Doesn't do the trick. As others have said, it hides things below the bottom of the viewport. So, for instance, my too-large-images take up most of the browser window and the caption is hidden. Would really love it if someone could help out with this.

Is there perhaps a way to use  overflow: scroll; and at the same time tell the browser not to add an additional scrollbar?

Robert Szabo
Robert Szabo
7,999 Points
Robert Szabo
Robert Szabo
7,999 Points

Rich, Have you tried to give max-width and max-height to your overlay img element?