Overlay Help (Treehouse)

by Aleem Mohamed

HTML

<body>
	<h1>Image Gallery</h1>
    <div id="gallery">
        <ul id="imageGallery">
            <li><a href="http://quillor.com/treehouse/lightbox/images/refferal_machine.png"><img src="http://quillor.com/treehouse/lightbox/images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
            <li><a href="http://quillor.com/treehouse/lightbox/images/space-juice.png"><img src="http://quillor.com/treehouse/lightbox/images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
            <li><a href="http://quillor.com/treehouse/lightbox/images/education.png"><img src="http://quillor.com/treehouse/lightbox/images/education.png" width="100" alt="Education by Chris Michel"></a></li>
            <li><a href="http://quillor.com/treehouse/lightbox/images/copy_mcrepeatsalot.png"><img src="http://quillor.com/treehouse/lightbox/images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
            <li><a href="http://quillor.com/treehouse/lightbox/images/sebastian.png"><img src="http://quillor.com/treehouse/lightbox/images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
            <li><a href="http://quillor.com/treehouse/lightbox/images/skill-polish.png"><img src="http://quillor.com/treehouse/lightbox/images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
            <li><a href="http://quillor.com/treehouse/lightbox/images/chuck.png"><img src="http://quillor.com/treehouse/lightbox/images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
            <li><a href="http://quillor.com/treehouse/lightbox/images/library.png"><img src="http://quillor.com/treehouse/lightbox/images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
            <li><a href="http://quillor.com/treehouse/lightbox/images/boat.png"><img src="http://quillor.com/treehouse/lightbox/images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
...

CSS

body {
	font-family: sans-serif;
	background: #384047;
}
h1 {
	color: #fff;
	text-align: center
}

ul {
	list-style:none;
	margin: 0 auto;
	padding: 0;
	display: block;
	max-width: 780px;
	text-align: center;
}
ul li {
	display: inline-block;
	padding: 8px;
	background:white;
	margin:10px;
}
ul li img {
	display: block;
}
a {
	text-decoration: none;
}
/** Start Coding Here **/
#overlay{
  background:rgba(0,0,0,0.6);
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  display:none;
  left:0;
  text-align:center;}

#overlay img {
  margin-top:10%;
}

#overlay p {color:#fff;}

JavaScript

//Problem: When user clicks on image. Link goes to a dead end. 
var $overlay = $('<div id="overlay"></div>');
var $image = $('<img>');
var $caption = $("<p></p>");
//Solution: Create an overlay with the large image. 
$overlay.append($image);

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

$overlay.append($caption);

$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imagelocation = $(this).attr("href");
  //Update overlay with image link
  $image.attr( "src", imagelocation )
  $overlay.show();
//1.Capture a Click event on Image
  //1.1 Show Overlay
  //1.3 Get Alt atribute as Caption
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);



});

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

//2.Create Overlay
  //2.1 Add image
  //2.2 Add Caption 

//3.When overlay is clicked, 
  //3.1 Hid overlay