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 Jeriah Bowers
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points

LightBox

Ok, so I'm in the process of doing the lightbox project. And I can't get the overlay to show can you help me out?? Thank-you in advance.

HTML

<!DOCTYPE html>
<html>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="js/app.js"></script>
 </head>
<body>
 <form>
    <input type="search" name="search" id="search" placeholder="Search">
 </form>   
<ul id="photos">
  <li><a href="photos/01.jpg"><img src="photos/01.jpg" width="250" height="250" alt="Hay Bales"></a></li> 
  <li><a href="photos/02.jpg"><img src="photos/02.jpg" width="250" height="250" alt="Lake"></a></li>
  <li><a href="photos/03.jpg"><img src="photos/03.jpg" width="250" height="250" alt="Canyon"></a></li>
  <li><a href="photos/04.jpg"><img src="photos/04.jpg" width="250" height="250" alt="Iceburg"></a></li>
  <li><a href="photos/05.jpg"><img src="photos/05.jpg" width="250" height="250" alt="Desert"></a></li>
  <li><a href="photos/06.jpg"><img src="photos/06.jpg" width="250" height="250" alt="Fall"></a></li>
  <li><a href="photos/07.jpg"><img src="photos/07.jpg" width="250" height="250" alt="Plantation"></a></li>
  <li><a href="photos/08.jpg"><img src="photos/08.jpg" width="250" height="250" alt="Dunes"></a></li>
  <li><a href="photos/09.jpg"><img src="photos/09.jpg" width="250" height="250" alt="Countryside Lane"></a></li>
  <li><a href="photos/10.jpg"><img src="photos/10.jpg" width="250" height="250" alt="Sunset"></a></li>
  <li><a href="photos/11.jpg"><img src="photos/11.jpg" width="250" height="250" alt="Cave"></a></li>
  <li><a href="photos/12.jpg"><img src="photos/12.jpg" width="250" height="250" alt="Bluebells"></a></li>
</ul>






    </body>
</html>

CSS 

/*Main Styles*/

body {
    margin: 0;
}

/*Input Styles*/

form input {
    margin: auto;
    display: block;
    width: 35%;
    height: 35px;
    margin-top: 25px;
    border-radius: 5px;
    border: 1px lightgrey solid;
    font-size: 16px;
}

input:focus {
    border: 2px solid black;
}

/*Photo Gallery*/

#photos {
    list-style: none;
    text-align: center;
}

#photos li {
    display: inline-block;
    margin: 20px;
}

/*LightBox Styles*/

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

And the jQuery

$(document).ready(function() {
    var $overlay = $('<div id="overlay"></div>');
    $("body").append($overlay);

    $("#photos a").click(function(evt) {
        evt.preventDefault();
        $overlay.show();
    }); //Click Function

}); //End Ready

1 Answer

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

Hi Jeriah Bowers ,

That's 99.9% perfect! :)

You're only lacking the colon between the height property and its 100% value in the CSS. That should do the trick.