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

Kyle Sullivan
Kyle Sullivan
15,150 Points
Posted by Kyle Sullivan
Kyle Sullivan
15,150 Points

Have troubles with lightbox overlay in my own project.

Hello everyone!

I have been working through the Front End Development track for about a month now and I figured it was time I put some of the knowledge I've learned to the test. Every thing seemed to going smooth until I tried to add a lightbox gallery to the bottom of my page. Using what I learned in the Lightbox section, I attempted to replicate the lightbox shown to us by Andrew. However, when I click on the images in my lightbox they appear in a div at the bottom of my page. Here is the link to my workspace: http://port-80-gxf1x90v08.treehouse-app.com/

HTML (~~~ <!DOCTYPE html> <html> <head>

<title>--- --- Photography</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

</head>

<body> <header class="main-header"> <h1 class="title">--- --- Photography</h1> <ul class="main-nav"> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#imageGallery">Photography</a></li> </ul> </header> <div class="primary-content"> <h3>Welcome!</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</div>

<div id="imageGallery"> <h3>Gallery</h3>

  <ul>
    <li><a href="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg"><img src="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg" alt="outdoors" width="200"></a></li>
    <li><a href="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg"><img src="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg" alt="outdoors" width="200"></a></li>    
    <li><a href="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg"><img src="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg" alt="outdoors" width="200"></a></li>    
    <li><a href="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg"><img src="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg" alt="outdoors" width="200"></a></li>
    <li><a href="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg"><img src="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg" alt="outdoors" width="200"></a></li>    
    <li><a href="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg"><img src="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg" alt="outdoors" width="200"></a></li>    
    <li><a href="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg"><img src="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg" alt="outdoors" width="200"></a></li>
    <li><a href="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg"><img src="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg" alt="outdoors" width="200"></a></li>    
    <li><a href="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg"><img src="http://visualwilderness.com/wp-content/uploads/2012/11/Colorado_3897.jpg" alt="outdoors" width="200"></a></li>  
</ul>
</div>
      <div class="footer">
  <ul>
    <li></li>
  </ul>
  <span>&reg;Kyle Sullivan</span>

</div>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>

CSS:
(~~~
* {
  box-sizing: border-box;
}

body {
 background-color: #384047; 
 margin: 0;    
}

.main-header {
  background:linear-gradient(slategray, transparent 40%),
             linear-gradient(#fff, transparent),
    slategray url('http://blog.iamnikon.com/en_GB/wp-content/uploads/Bedruthan_Steps-5091.jpg');
  height: 850px;
  background-size:cover;
  padding-top: 170px;
  text-align: center;
  border-bottom: 2px solid rgba(0, 0, 0, .3);
}

.title {
  color: white;
  font-size: 2.3em;
  padding-bottom: 10px;
  margin: auto;
  width: 35%;
  border-bottom: 1px solid rgba(255, 255, 255, .4);

}

.main-nav {
 list-style: none;


}

.main-nav a {
   font-size: 1.2em;
  text-decoration: none;
  color: white;
  text-align: center;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 1);


}

.main-nav li {
  display: inline;
  margin-left: 5px;
  margin-right: 10px;
  padding: 5px;

}

h1 {
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 1);
}

h3 {
  text-align: center;
  color: white;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, .8);
  border-bottom: 1px dotted rgba(255, 255, 255, .3);
  padding-bottom: 15px;
  padding-top: 5px;
}

ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: block;

  text-align: center;
}

ul li {
  display: inline-block;
  padding: 8px;
  margin: 10px;
}

ul li img {
  display:block;
}

.primary-content {
  max-width: 65%;
  margin: auto;

  margin-bottom: 10px;
  padding-bottom: 10px;
  color: rgba(255, 255, 255, .8);
  text-shadow: 1px 2px 2px rgba(0, 0, 0, .8);

}

#imageGallery {
  margin-bottom: 30px;
  max-width: 65%;
  margin: auto;
}

#imageGallery img {
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .3);
}
.footer {
  border-top: 1px solid rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .3);
  background: rgba(0, 0, 0, .3);
}
/** Pseudo classes **/
.main-nav a:hover {
  font-size: 1.3em;
  border-bottom: 1px dotted rgba(255, 255, 255, .8);
}

.main-nav a:selected {
  font-size: 1.3em;
  border-bottom: 1px dotted rgba(255, 255, 255, .8);  
}

#imageGallery img:hover {
 border-radius: 5px;
 border: 1px dotted rgba(255, 255, 255, .7); 
}


/** Javascript Gallery **/
#overlay {
  background: rgba(0, 0, 0, .3);
  width: 100%;
  height: 100%;
  position: absolute;
  top 0;
  left 0;
  display: none;
  text-align: center;
}

#overlay img {
  margin-top: 5%;
  height: 85%;
  width: 90%;
}

#overlay p {
  color: white;
}
~~~)

Javascript:
(~~~
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();

});
~~~)
Nick Novak
Nick Novak
2,517 Points
Nick Novak
Nick Novak
2,517 Points

Hey Kyle, do you happen to have your javascript file linked in your HTML?

<script src="link_to_javascript_file.js"></script>
Kyle Sullivan
Kyle Sullivan
15,150 Points
Kyle Sullivan
Kyle Sullivan
15,150 Points

I'm not sure why it isn't showing up on here but I do have it linked at the bottom of my html file after the footer. 

   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>

3 Answers

Eric Ash
Eric Ash
8,122 Points
Eric Ash
Eric Ash
8,122 Points

i got to work....so here my solution

Your missing : for top and left and than i adding 50% on margin-top for img

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

#overlay img {
  margin-top: 50%;
  height: 85%;
  width: 90%;
}
Kyle Sullivan
Kyle Sullivan
15,150 Points
Kyle Sullivan
Kyle Sullivan
15,150 Points

I got it to work by adding the colons to the top and left and setting the position to fixed instead of absolute. Thank you for your time.

Eric Ash
Eric Ash
8,122 Points
Eric Ash
Eric Ash
8,122 Points

you never add the div inside the $overlay variable, same thing for $image and $caption

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
Kyle Sullivan
Kyle Sullivan
15,150 Points
Kyle Sullivan
Kyle Sullivan
15,150 Points

That too is in my current code but didn't show up on the forum post. I'm not sure what's going on here with the post.

Eric Ash
Eric Ash
8,122 Points
Eric Ash
Eric Ash
8,122 Points

dont know if this going to work but try add id="imageGallery to the ul instead the of the div

Kyle Sullivan
Kyle Sullivan
15,150 Points
Kyle Sullivan
Kyle Sullivan
15,150 Points

I originally had the id="imageGallery" on the ul containing the list of images, without having a div around the ul. I have tried both and neither seem to be working. The div shows up on top of the footer rather than overlaying the entire web page.