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

Chase Frankenfeld
Chase Frankenfeld
6,137 Points
Posted by Chase Frankenfeld
Chase Frankenfeld
6,137 Points

Overlay still covering pictures, and can't select photos.

After getting the source location, and then setting the source to the image location, when I check the code, the overlay still covering pictures, and I can't select photos. I have checked the code, and can't seem to figure out what is wrong.

//Problem: User when clicking on the image, goes to a dead end (creates a poor user experience)
//Solution: Create an overlay with a large image - called a - Lightbox

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

$overlay.append($image);

//Add an 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();

  //Get childs alt attribute and set caption
});


//When overlay is clicked
  //Hide the overlay

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

It's hard to tell what's happening without seeing the CSS and HTML also. You can cover everything at once if you make a snapshot of your workspace and post the link to it here.

In the meantime, the snippet above has a comment regarding hiding the overlay, but no code for it. You'll need both a way to initially hide the overlay, and a way to hide it when dismissed so you can access the gallery again. Perhaps you still need to establish those conditions in the CSS or other JavaScript code.

Chase Frankenfeld
Chase Frankenfeld
6,137 Points
Chase Frankenfeld
Chase Frankenfeld
6,137 Points

The comments are the course plan for what is to be completed.

What I should hopefully be able to do at this stage when I preview the workspace is see pictures, and when I select a picture, then the picture is shown in the overlay. However, all I see is the overlay covering the pictures, and I cannot click on any pictures.

https://w.trhou.se/y5zb6tg17j

Thank you for taking the time to look.

Ok. So I have added the hide overlay part when I click on the overlay, which subsequently allows me to click on a photo and show the photo in the centre with the overlay. But why does it show the overlay first, when I open the preview?

This is the updated snapshot.

https://w.trhou.se/ttfrzyzyr1

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

:four_leaf_clover: I made a lucky guess! It's the initial state of the overlay.

:point_right: It looks like you missed a moment in the previous video where display: none; was added to the #overlay rule in the CSS.

Add that and you'll be able to turn the overlay on by selecting an image. You'll still need to add more code to be able to turn if off again, though.

Chase Frankenfeld
Chase Frankenfeld
6,137 Points
Chase Frankenfeld
Chase Frankenfeld
6,137 Points

Thank you Steven. You are an absolute legend.