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.

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

The end of my function was in the wrong place!

//Tried it first this way. Notice where the #imageGallery a closes!
//Capture the click event on a link to an image.

$("#imageGallery a").click(function() {
  event.preventDefault();
  var href = $(this).attr("href");


  //Update the overlay with the image link.
  $image.attr("src", href);


  //Show the overlay.
  $overlay.show();


  //Get child's alt attribute and set caption.

});         //I set the closing braces for the function then forgot about them.......  

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


  //Update the overlay with the image link.
  $image.attr("src", href);
  });   //Then I remembered the forlorn closing braces. And now the overlay works!

  //Show the overlay.
  $overlay.show();

Still don't have image appearing IN overlay though! Any ideas?

1 Answer

Jason DeValadares
Jason DeValadares
7,190 Points

I think you're in the right direction. I think you got the click function right below.

$("#imageGallery a").click(function() {
  event.preventDefault();
  var href = $(this).attr("href");

Here you're not updating the overlay yet, you're simply providing your image code with an attribute and variable.

  //Update the overlay with the image link.
  $image.attr("src", href);

So according to the video he's made the image variable have a value of

$image = $("<img>");

if that's the case with yours, then your image tag will now have the value of the href clicked and associate it with the image tag created above.

In order for that image tag to be a part of the overlay, you need to append it. In the video, you'll notice he's done this first, at the top of the code

$overlay.append($image);

From there you can call your .show.