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 2

Christopher Johnson
Christopher Johnson
12,829 Points
Posted by Christopher Johnson
Christopher Johnson
12,829 Points

Identical code before adding 'Display: none;' yet, image displays in black background

I've got this code here:

//Prblem: user clicks on img, takes user to dead end
//sollution: user clicks on img, img appears inside lightbox as a larger image

/*
Overlay will require changes in not only the JQuery, but also the CSS for position the lightbox..
*/

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


//Capture the click event on a link to an image
$("#imageGallery a").click(function(event) {
  event.preventDefault();
  var href = $(this).attr('href');
  /* Method of testing whether the click, preventDefault, and href is being selected:
  console.log(href);
  */
  $overlay.show();
  //show the overlay
  //update overlay with image linked in the href
  //get child's alt attribute and set caption


});

//When overlay is clicked
  //hide the overlay

and this as my CSS:

/** Start Coding Here **/
#overlay {
  background: black;
  width = 100%;
  height = 100%;
  position: absolute;
  top = 0;
  left = 0;
}

and I have nothing changed within the index.html file, but my image shows up in the black background while it does not in the video. I don't understand this and I like to research these little quirks for future troubleshooting.

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

:point_right: In the video, display: none; was added to the CSS.

If you add that to your CSS, the overlay will not be visible until the additional code is added (in the next video) to reveal it.