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 Miles H
Miles H
2,934 Points

The overlay function does not appear to work. Can you help me figure out why?

I have copied the code exactly. When I inspect source code I see no evidence that it ( ) is appended at end of "body".

I see no evidence that jquery is working at all. How can I validate that Jquery is even working?

//problem: user goes to dead end when clicking
//solution:  create overlay with large image -  lightbox

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

$overlay.append($image);

//2.  add overlay

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

//   2.1  an image
//   2.2  a caption

//1.  capture the click event on a link to an image

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

  $image.attr("src", imageLocation);

  $overlay.show();


//      show the overlay
//    update overlay with the image linked in the link
//    get child's alt attribute and set caption

});

//3. when overlay is clicked 3.1 hide the overlay

Hugo Paz
Hugo Paz
15,622 Points

Your overlay is empty. So basically you are appending nothing to the body. 

var $overlay = $('');

should be var 

$overlay = $('<div></div>');

Obviously the image variable is wrong as well since its also empty. You should be able to figure out out to fix it now.

3 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Miles M. -

You forgot the semicolon around line 11

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

Once I fixed that it worked fine.

See for yourself: http://jsbin.com/wovepa/2/edit

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Miles,

I'm not sure what you are asking but you can download the finished Project Files and view the page in your browser and/or view the source code.

Jeff

Miles H
Miles H
2,934 Points
Miles H
Miles H
2,934 Points

Thanks for both of above comments. The code I copied in above was not correct representation of my code... treehouse autodeletes the html unless I use markdown, which I didn't.

I was able to get everything working on localhost on my PC. The seemingly identical jquery code does not work in the treehouse development environment, for whatever reason. I will just work locally on this project and hope for better luck on the next project. Thanks for your responses.