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

Posted by David Dickerson
David Dickerson
13,845 Points

How to make a lightbox that stays when you scroll???

I am designing a small website and I have some photos on it. I used the same javascript and jQuery from the course on jQuery... https://teamtreehouse.com/library/jquery-basics

The only thing wrong with the code I used from that course is that the overlay doesn't follow you when you scroll. Any help would be greatly appreciated.

Here is my code....

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>"); 
var $catpiton = $("<p></p>");

//An image to overlay
$overlay.append($image);

//Add caption to overlay
$overlay.append($catpiton)

//Add overlay
$("body").append($overlay);

//Capture the click event on a link to an image
$('#gallery a').click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  $image.attr("src", imageLocation);

  //Show overlay
  $overlay.show();

  //Get child's alt attribute and set caption
  var captionText = $(this).children("img").attr("alt");
  $catpiton.text(captionText);

});


//When overlay is clicked
$overlay.click(function(){
  //Hide the overlay
  $overlay.hide();
});
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,671 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,671 Points

Updated your formatting. Check out the Markdown Cheatsheet for instructions on how to properly do this.

Edgar Gil
Edgar Gil
13,322 Points
Edgar Gil
Edgar Gil
13,322 Points

I'm sure has to be with the function

event.preventDefault()

You need to place is somewhere in your code, so that it can prevent the browser from doing their default work. I would try to ho help but I don't have all the files to check this.

Good Luck!. But I hope i could help.

2 Answers

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

You could try to set the position of the overlay image to fixed via css:

#overlay img {
    position: fixed;
}
Colin McGraw
Colin McGraw
15,337 Points
Colin McGraw
Colin McGraw
15,337 Points

I wonder why #overlay is absolutely positioned? It works in this lesson because the page is short, but if it were longer you'd need more JS to position the content of the overlay (like how the 'markdown cheatsheet' modal on this page works). You could position #overlay like this:

#overlay {
  position: fixed;
  top: 0;  
  left: 0;
  width: 100%; 
  height: 100%;
}

...then you could also set overflow:hidden; on the html or body element when the overlay is open, to try to disable scroll altogether.

I know the fixed position approach can get a little wonky on touch devices though...It'd be interesting to hear from Andrew Chalkley the advantages of one approach over the other.