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!

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

Cheryl Oliver
Cheryl Oliver
21,676 Points
Posted by Cheryl Oliver
Cheryl Oliver
21,676 Points

Lightbox overlay in wrong position

Hi guys, so I've done a lightbox in javascript but when i click one of the images in the bottom row the light box overlay only comes to about halfway of the viewport and its stuck there. Any ideas how to get the screen to jump to the top when the image is clicked? https://github.com/Xena123/Photo-Gallery

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

I'm working on it

1 Answer

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

So here is the solution: http://codepen.io/anon/pen/jqXoyr?editors=0110

I the main solution was that I set the #overlay to fixed. This means that wherever the user is on the page, he will see it at their viewport. I also made an improvement whereby the user can click the escape key to exit the light box. If you liked my answer, feel free to follow me on codepen http://codepen.io/1db8k

Cheryl Oliver
Cheryl Oliver
21,676 Points
Cheryl Oliver
Cheryl Oliver
21,676 Points

Hi Tom, That unfortunately doesn't seem to work. I did use the escape key function though so thanks for that :)

jsdevtom
jsdevtom
16,963 Points
jsdevtom
jsdevtom
16,963 Points

I know you want it to scroll to the top, but position: fixed; is what is used on the major websites. Just as a random example, see here: https://www.zalando.de/lacoste-taloire-sneaker-la212b08l-o11.html

The reason this is better (that is pops up where the user is as opposed to scrolling to the top is because the user will lose their place. This is especially bad for apps with many pictures. It annoys the user and can decrease customer retention rates: "User Flow - A user can take an action and return to their previous state on the parent page quickly." Source: https://www.quora.com/Are-lightboxes-good-UX

If I'm missing something let me know :-)

EDIT: Oh, I think I was editing it in chrome developer tools and not codepen. See here for the working solution: http://codepen.io/anon/pen/jqXoyr?editors=0110

Cheryl Oliver
Cheryl Oliver
21,676 Points
Cheryl Oliver
Cheryl Oliver
21,676 Points

It's not that I dont agree with the method you are using. It just doesn't work unfortunately. Tried the new link as well.