My lighbox example as i was playing with some animations :)

Question

My code example as i was playing with other properties and functions of JQuery. i am posting the code below.

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

body,
html {
    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-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 9999;
}

#overlay img {
    background-color: #fff;
    position: absolute;
    width: 400px;
    height: 300px;
    left: 0;
    right: 0;
    top: 541px;
    margin: auto;
    display: none;
}

#overlay p {
    color: #fff;
    font-size: 1.3em;
    position: absolute;
    width: 100%;
    top: 500px;
    text-align: center;
}

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image.

var $overlay = $("<div id='overlay'></div>");
var $image = $("<img>");
var $caption = $("<p></p>");

//2. Add an overlay
$("body").append($overlay);
  //2.1 An image
  $overlay.append($image);
  //2.2 Caption
  $overlay.append($caption);

//1. Capture the click event on a link to an image
$("#imageGallery a").click(function(event) {
  event.preventDefault();
  var imageLocation = $(this).attr("href");
  var alt = $(this).children().attr("alt");

  //1.1 Show the overlay
  $overlay.fadeIn();
  $image.animate({
    top: "200px",
    height: "fadeIn"
  }, 300).attr("src", imageLocation); //1.2 Update overlay with the image linked in the link
  //1.3 Get child's alt attribute and set caption
  $caption.text(alt);
});

//3. When overlay is clicked
  //3.1 Hide the overlay
  $overlay.click(function() {
    $(this).fadeOut();
    $image.delay(350).animate({
      top: "541px",
      height: "fadeOut"
    })
  });

Welcome to the Treehouse Community

Looking to learn something new?

Konstantinos Pedarakis

Konstantinos Pedarakis

My lighbox example as i was playing with some animations :)

Robert Cooper

Robert Cooper

Konstantinos Pedarakis

Konstantinos Pedarakis