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

michael randell
michael randell
4,119 Points
Posted by michael randell
michael randell
4,119 Points

Stuck. Not sure why this code isn't working. 

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('src', imageLocation);


  $overlay.show();

});

$overlay.click(function(){
  $(overlay).hide;
}

I have no idea why my code isn't working here. I have gone through it over and over. Can anyone help me? On clicking an image, the opaque background should pop up and the image should pop up in the center of the page zoomed in but for some reason I can't even get that part to work using preventDefault()

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi michael randell, just letting you know that I wrapped your code in a code block. Otherwise you can't see the HTML tags, as they get turned into actual HTML elements in the forums.

Please refer to the Markdown Cheatsheet (linked below the box used to enter your question/answer/comment) for instructions on how to format code blocks.

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

In your first line, you have used single quotes within another set of single quotes, without escaping them, so they are closing and then reopening two strings. Try changing to the following:

var $overlay = $('<div id="overlay"></div>');
Kevin Phillips
Kevin Phillips
15,693 Points
Kevin Phillips
Kevin Phillips
15,693 Points

Looks like your overlay isn't apart of the DOM or is not referencing something in your html. In your HTML you can write out a div:

<div id="overlay"> </div>

Then in your JavaScript get to it by $overlay = $('#overlay'). Or create the overlay div via JavaScript by 

var overlay = document.createElement("div");
  overlay.setAttribute("id", "overlay");

Hope this helps!