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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 3

Gary Logue
Gary Logue
13,779 Points
Posted by Gary Logue
Gary Logue
13,779 Points

Images wont appear in overlay

The code is exactly the same as his in the video but the images wont seem to appear :(

Any help would be greatly appreciated :)

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

$overlay.append($image);


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





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


  $overlay.show();



 });

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

It may not be as "exactly the same" as you think. :smirk:

In the video, the click handler adds the image location to the "src" attribute (which stands for "source"). But in the code above, you add it to the "scr" attribute (not a standard attribute) instead.

Bihil Takele
Bihil Takele
19,936 Points
Bihil Takele
Bihil Takele
19,936 Points

... use "#imagegallery" instead of "#imageGallery"

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

If you're following the video, it does need to be "#imageGallery" (with a capital "G").