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 Anitha Nagendra
Anitha Nagendra
14,076 Points

Jquery Perform:2 Overlay

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

//an image
  //a caption

//1. capture the click event on a link to an image
 $("#imageGallery a ").click(function(event){
      event.preventDefault();
       alert("hello");
     var href = $(this).attr("href");
    $overlay.show();

 });

CSS code for overlay:

#overlay {

  background:rgba(0,0,0,0.7);
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;

}

I tried the code exactly as shown in the video, it work in Firefox not in Chrome...does anybody have a suggestion ???

Ron McCranie
Ron McCranie
7,837 Points

I edited your post with some markdown so it could be read more easily.

Anitha Nagendra
Anitha Nagendra
14,076 Points

Thanks!! Ron

Paul McCann
Paul McCann
8,357 Points

I think you're just missing: width: 100%; in your CSS.

Before you append the image into the overlay, it won't have any dimension, so you won't see it.

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Anitha Nagendra,

The problem you're running into is that even though the overlay is being appended to the body, there's no content to show. You will have to add the other code as seen in this course to append the image to the overlay, etc. like so:

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

//USER EXPERIENCE
//Add overlay
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");



//Can be appended because it is object so
//An image to overlay is appended to overlay
$overlay.append($image);

//Add a caption
$overlay.append($caption);

//Append to body of document
$("body").append($overlay);


// 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 child's alt attribute and set caption
  var captionText = $(this).children("img").attr("alt");

  $caption.text(captionText);


});


// When overlay is clicked
$overlay.click(function() {
  //Hide the overlay
  $overlay.hide();
});