Overlay won't let me click the images.

Question

The problem is that i can't click the images because the overlay kinda blocks the way of me clicking the image.

here is my javascript:

// Making the image lightbox.

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

$overlay.append($image);

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

//1. Capture the click event on a link to an image
  $("#second-content-wrapper figure a").click(function(event) {
    event.preventDefault();
    var imageLocation = $(this).attr("href");
    $image.attr("src", imageLocation);

    $overlay.show();
    //1.2 Update overlay with the image linked in the link
    //1.3 Get child's alt attribute and set caption
  });

//2. Add overlay
  //2.1 An image
  //2.2 A caption
//3. When overlay is clicked
  //3.1 Hide the overlay

here is the css of the overlay:

#overlay {
     width: 100%;
     height: 100%;
     position: absolute;
     background-color: rgba(0,0,0,0.7);
     top: 0;
     left: 0;
 }

please help.

Answer 1 · 2017-07-30T23:42:47Z

July 30, 2017 11:42pm

You need to hide your overlay, using display: none; in CSS, so that it doesn't appear until you've clicked on an image:

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
}

You also will want to add this code to the bottom of app.js (after your image click event handler) to hide the overlay once more when you click anywhere on it:

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

Answer 2 · 2017-07-10T21:05:28Z

July 10, 2017 9:05pm

Not sure where this comes into play even after referencing the video: "#second-content-wrapper figure a"

Welcome to the Treehouse Community

Looking to learn something new?

ibrahim Warsame

ibrahim Warsame

Overlay won't let me click the images.

2 Answers

Gabbie Metheny

Gabbie Metheny

davidkomando

davidkomando