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...

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