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

Joseph Martin Nograles
Joseph Martin Nograles
4,696 Points
Posted by Joseph Martin Nograles
Joseph Martin Nograles
4,696 Points

Overlay not working

I copied the code exactly and cant get it to work. Do you know whats wrong with it?

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

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

}); 

#overlay {
 background:black;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 display: none;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Image Gallery</title>
</head>
<body>
    <h1>Image Gallery</h1>
    <ul id= "imageGallery">
        <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
        <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
        <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
        <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
        <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
        <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
        <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
        <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
        <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
        <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
        <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
    </ul>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Try removing the spaces around the equals in this line:

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

Try changing that to:

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

Let me know if that works for you! If it doesn't, it might be helpful if we can get a snapshot of your workspace! :sparkles:

Joseph Martin Nograles
Joseph Martin Nograles
4,696 Points
Joseph Martin Nograles
Joseph Martin Nograles
4,696 Points

Nope :( Still doesn't work

Here's a snapshot of the workspace

https://w.trhou.se/34wfpf37pd

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi! Sorry! It seems the problem is in your #overlay CSS. The background is currently set to solid black. But this is meant to incorporate an alpha channel using rgba. So the background rule that's supposed to be here is:

 background:rgba(0,0,0,0.7);

He begins making this rule at 6:46 in the video linked to this question. Hope this helps! :sparkles:

Joseph Martin Nograles
Joseph Martin Nograles
4,696 Points
Joseph Martin Nograles
Joseph Martin Nograles
4,696 Points

Hi!

No black should work also as he does it in the video.

I think it might be a browser issue as when I opened the file using Firefox it worked fine... Would you happen to have any idea why?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Oh you mean it's not loading at all! Sorry. Yes, it's likely loading in cached data. Clear your browser cache :thumbsup:

Joseph Martin Nograles
Joseph Martin Nograles
4,696 Points
Joseph Martin Nograles
Joseph Martin Nograles
4,696 Points

Yeah it was the cache. I feel a bit silly now.

Thanks for your help.

How do professional websites get around that though?