The end of my function was in the wrong place!

Question

//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();

Answer 1 · 2016-02-10T21:21:16Z

February 10, 2016 9:21pm

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.

Welcome to the Treehouse Community

Looking to learn something new?

Jeremy Franklin

Jeremy Franklin

The end of my function was in the wrong place!

Jeremy Franklin

Jeremy Franklin

1 Answer

Jason DeValadares

Jason DeValadares