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.

HTML jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 4

Robert James
Robert James
20,491 Points

jQuery basics - lightbox help

I am using the lightbox in my own project.

It work to a point but i have 2 issues.

Firstly i have a much longer list of images so if i click an image towards the bottom that i have had to scroll down to the image is positioned up the page so i have to scroll back up to view the clicked image! Also the overlay ends if you scroll down, it is only 100% of the monitor not of the page.

Can anyone help please?

Thanks,

Rob

1 Answer

Sean T. Unwin
Sean T. Unwin
28,660 Points

Robert James, change the overlay's position: absolute; to position: fixed;.

Robert James
Robert James
20,491 Points

this is what i thought and works perfect, thanks.

I do have another issue u could maybe help with. My site has a few different gallery pages. For some reason when i click these the overlay appears straight away when it should only appear when i click a specific image!

Cheers again

Sean T. Unwin
Sean T. Unwin
28,660 Points

You're likely going to have to check your JavaScript file to be sure the click handler is set to the proper id or class. I'd probably double check the HTML file(s) as well to be sure the elements have the appropriate attributes applied (i.e. id and/or class).

Robert James
Robert James
20,491 Points

i worked out the issue but not too sure how to solve.

Basically i have a gallery of images but there is a navigation to view different types of images, from landscapes, portraits or abstract etc...

So if im on my landscape gallery and i click the nav to view the abstract gallery when the page opens it has the overlay over it as the jQuery is telling the overlay to show when a link is clicked, and obviously the nav button is a link.

I am thinking maybe adding a class to better define which links to show the overlay on???

Thanks for all ur response, been a big help,

Rob