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

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js