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 Dan Neumann
Dan Neumann
Courses Plus Student 10,318 Points

Not able to create a jquery lightbox

I'm taking jquery basics and am on the lightbox section and have put this code in apps.js:

var $overlay = $('<div id='overlay'></div>');
$('body').append($overlay);

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

and this code in style.css:

#overlay {
  background: black;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

At this point in the lesson i should get a black screen, but nothing happens. The code is exactly the same as the instructor as far as I can tell. I'm stumped.

1 Answer

Colin Marshall
Colin Marshall
32,861 Points

There is an issue with $overlay string on line 1. You have:

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

Notice on the right side of the equal sign how the word overlay is a different color? Because you started the string with a single quote, the string will end at the first occurrence of another single quote. You need to change the quotes around the id from single quotes to double quotes like this:

var $overlay = $('<div id="overlay"></div>');
Dan Neumann
Dan Neumann
Courses Plus Student 10,318 Points

Thanks Colin - Good find - That was it.

Dan