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 Lawrence Lee
Lawrence Lee
4,240 Points

jQuery project 2...the overlay and the image overlay are not working?

I am not sure why I can't get my background overlay to work as the example that are shown on the video.

I am not exact sure if I can attach my workspace here, but here is the URL: http://teamtreehouse.com/workspaces/1336082

So far here are my code in my js file after watching the part 2 video:

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

$overlay.append($image);

// Add overlay
$("body").append($overlay)
  // An image
  // A caption

// Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  // Update overlay with the image linked in the link
  $image.attr("scr", imageLocation);
  // Show the overlay.
  $overlay.show();

And my code in my stylesheet:

#overlay {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

The image should be showing up as a overlay after being clicked, but it is showing up in a empty page. The overlay did not show up as it are supposed to...Did I do something wrong here?

3 Answers

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

I can see a small error in your first line; you're not passing your new element to the jQuery function.

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

Also, you have src misspelled when you swap out the image attribute:

$("#imageGallery a").click(function(event) {
  // ...
  $image.attr("scr", imageLocation);
  // ...

Lastly, it doesn't appear that you closed the click handler, which would result in a syntax error and your script failing to run (which would just let the image load up in a new page).

Here's your JavaScript all fixed:

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

$overlay.append($image);

// Add overlay
$("body").append($overlay)
  // An image
  // A caption

// Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  // Update overlay with the image linked in the link
  $image.attr("src", imageLocation);
  // Show the overlay.
  $overlay.show();
}); // end click

Hope this helps!

Lawrence Lee
Lawrence Lee
4,240 Points
Lawrence Lee
Lawrence Lee
4,240 Points

Thanks Ryan!

I did aware of that I forgot to add a "$" in front of my elements to my function. I also corrected the src attribute when swapping out the image. So far it would not jump to a new page as I click a image. However, the image is not showing up as it were supposed to. The image attribute should be calling this an image out.

Here is my code again:

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

$overlay.append($image);

// Add overlay
$("body").append($overlay);
  // An image
  // A caption

// Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  // Update overlay with the image linked in the link
  $image.attr("src", imageLocation);
  // Show the overlay.
  $overlay.show();
});

Not sure why is doing this....

Lawrence Lee
Lawrence Lee
4,240 Points
Lawrence Lee
Lawrence Lee
4,240 Points

Never mind, It's not doing it anymore. Thanks!