<html>
<head>
<title>Image Gallery</title>
</head>
<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/refferal_machine_zps9703046a.png"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/refferal_machine_zps9703046a.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/space-juice_zps26b4b890.png"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/space-juice_zps26b4b890.png" width="100" alt="Space Juice by Mat Helme"></a></li>
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/education_zpsa110bbda.png"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/education_zpsa110bbda.png" width="100" alt="Education by Chris Michel"></a></li>
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/copy_mcrepeatsalot_zps0a4ee8c8.png"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/copy_mcrepeatsalot_zps0a4ee8c8.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/sebastian_zps18940ed9.png"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/sebastian_zps18940ed9.png" width="100" alt="Sebastian by Mat Helme"></a></li>
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/skill-polish_zps72a3939d.png"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/skill-polish_zps72a3939d.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/chuck_zpsd92ca8a5.png"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/chuck_zpsd92ca8a5.png" width="100" alt="Chuck by Mat Helme"></a></li>
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/library_zps600df8c6.png"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/library_zps600df8c6.png" width="100" alt="Library by Tyson Rosage"></a></li>
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/boat_zps079c670d.png"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/boat_zps079c670d.png" width="100" alt="Boat by Griffin Moore"></a></li>
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/illustrator_foundations_zpsa1afd9cb.png"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/illustrator_foundations_zpsa1afd9cb.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
<li><a href="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/treehouse_shop_zps02cb7d0f.jpg"><img src="http://i1347.photobucket.com/albums/p707/jfrios/Lightbox/treehouse_shop_zps02cb7d0f.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
</ul>
</body>
</html>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-color: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img {
margin-top: 10%;
}
#overlay p {
color: white;
}//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox
//PLAN
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>")
// An image to overlay
$overlay.append($image);
// A caption to overlay
$overlay.append($caption);
// Add overlay to body
$("body").append($overlay);
// Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
// Update overlay with the image linked in the link
$image.attr("src", imageLocation);
// Show the overlay.
$overlay.show();
// Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
// When overlay is clicked
$overlay.click(function(){
$overlay.hide();
});
// Hide the overlay
External CSS
This Pen doesn't use any external CSS resources.