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

Elena Paraschiv
Elena Paraschiv
9,938 Points
Posted by Elena Paraschiv
Elena Paraschiv
9,938 Points

Overlay does not show and navigation is not working

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

//Capture the click on the image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  //check if you captured it 
  var href = $(this).attr("href");
    $(overlay).show();
    console.log(href);

});

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

   <h1>Image Gallery</h1>
        <ul id="imageGallery">
          <li><a href="img/gallery/1.jpg"><img src="img/gallery/1.jpg"  width="300" alt="We are in Beirut"></a></li>
         <li><a href="img/gallery/7.jpg"><img src="img/gallery/7.jpg"  width="300" alt="Love me Petra"></a></li>
         <li><a href="img/gallery/3.jpg"><img src="img/gallery/3.jpg"  width="300" alt="Elena, the Greek's princessa"></a></li>
         <li><a href="img/gallery/8.jpeg"><img src="img/gallery/8.jpeg"  width="300" alt="Semester in Cappadocia"></a></li>
        </ul>
Dwayne Munro
seal-mask
.a{fill-rule:evenodd;}techdegree
Dwayne Munro
Front End Web Development Techdegree Student 13,108 Points
Dwayne Munro
.a{fill-rule:evenodd;}techdegree
Dwayne Munro
Front End Web Development Techdegree Student 13,108 Points

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

$overlay.append($image);

$overlay.append($caption);

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

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

$image.attr("src", imageLocation);

var $captionText = $(this).children("img").attr("alt");
$caption.text($captionText);

$overlay.show();

});

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

This should work

4 Answers

Roberto Correale
Roberto Correale
1,539 Points
Roberto Correale
Roberto Correale
1,539 Points

There are different ways to solve the problem. The easiest one is to add, because you show it on click on images 

#overlay {
display: none; 
}

Inside the style of overlay there is an error with the background, you need to add a 4th value for the opacity of the color

#overlay {
background: rgba(0,0,0,.5);
}

After

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Elena,

I think your problem is in the following line:

$(overlay).show();

Andrew enters this around 4:45 in the video. You accidentally added parentheses.

It should be

$overlay.show();

You're using the $overlay variable that was created at the top of the code.

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

still no success. here is my full code 

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>
     Elena Paraschiv - a web designer &amp; developer - Work  
    </title>

<!-- code test favi -->
<link rel="shortcut icon" href="favicon.png" type="image/png" />
<!-- end -->


    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->




    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/style.css" >

  </head>


  <body>

    <!-- Navigation -->
      <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">
            <img  class="brand-image profile-image" alt="brand" src="img/eu.png" >
          </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li ><a href="index.html">Home </a></li>
        <li><a href="goals.html">Goals</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="https://www.facebook.com/briosaZEN" class="social-icons facebook"></a></li>
        <li><a href="https://www.linkedin.com/" class="social-icons linkedin"></a></li>
        <li><a href="https://github.com/elenaparaschiv" class="social-icons github"></a></li>
      </ul>
      </div>
      </div><!-- /.container-fluid -->
    </nav>


      <h1>Image Gallery</h1>
        <ul id="imageGallery">
          <li><a href="img/gallery/1.jpg"><img src="img/gallery/1.jpg"  width="300" alt="We are in Beirut"></a></li>
         <li><a href="img/gallery/7.jpg"><img src="img/gallery/7.jpg"  width="300" alt="Love me Petra"></a></li>
         <li><a href="img/gallery/3.jpg"><img src="img/gallery/3.jpg"  width="300" alt="Elena, the Greek's princessa"></a></li>
         <li><a href="img/gallery/8.jpeg"><img src="img/gallery/8.jpeg"  width="300" alt="Semester in Cappadocia"></a></li>
        </ul>





    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="js/app.js" type="text/javascript" charset ="utf-8"></script>
    <script src="js/bootstrap.min.js"></script>


  </body>
</html>

#overlay{
  background:rgba(0,0,0,.5);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
}

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

//Hide span
$(".spoiler span").hide();
//Add button
$(".spoiler ").append("<button>Find me</button>");
//When click
$(".spoiler button").click(function(){
    //span shows
    $(this).prev().show();
    //button dissappears
    $(this).remove();
});


//=====GALLERY
//=======/
//when user clicks on image goes on a new page
// create a layer over with the large image


//Add overlay 


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






//Capture the click on the image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  //check if you captured it 
  var href = $(this).attr("href");
    $overlay.show();


});
    //Create an overlay
    //Show the overlay
    //Display the image
    //Display subtitles of the image
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

When you posted the full code here I can see you made the changes to the css that Roberto Correale suggested, but these changes don't appear on your github link.

I would confirm that your current version of the files has those css changes. By not hiding the overlay in the css it's blocking your whole viewport which is why you can't click on anything.