How to create a lightbox.

Light Box

/*
 *jquery - Lightbox 
 */
 
//Problem: User, when clicking on an image goes to a dead end.
//Solution: Create a large overlay when the user clicks the image. -Lightbox
 
//By placing the div in the app.js file we are using unobtrusive jquery.
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
 
//Add a caption in a disembodied element. 
//We are going to grab the alt attribute from our mark up.
//Can append that later in the p tag by using a jquery method.
var $caption = $('<p></p>');
 
//Now append $image and $caption to the overlay
$overlay.append($image);
//this will make the caption appear after the image in the overlay.
$overlay.append($caption);
 
//Next, append overlay to the body of the mark up. Add overlay; 
//this is where the overlay gets added to the DOM.
$("body").append($overlay)
 
//Capture the click event on a link to an image
$("#image_gallery a").click(function (event){
 
//This prevents the browser's default behavior.
event.preventDefault();
var image_location = $(this).attr("image_location")
 
//Update overlay with the image linked in the link.
$image.attr("src", image_location);
 
//Show the overlay
$overlay.show();
 
//Get child's alt attribute and set caption.
 
  /*
   *Need to look up "traversing" on jquery.com because we are 
   *going to have to figure out how to get to the alt attribute.
   *Okay, the children() method will traverse the DOM to the attribute 
   *and the text() method will grab our alt text for us. 
   */
 
// Using $(this) because we want to make sure the thing we just 
//clicked is what is being effected
var $caption_text = $(this).children("img").attr("alt");
 
// Last, we use the text() method to get the alt text.
$caption.text($caption_text);
});
 
//When overlay is clicked
$overlay.click(function () {
	 /*
	  *Hide the overlay. 
	  *Use the $(this) because it is this particular overlay that we 
	  *are clicking that we want effected.
	  *We use $(this) because if we used $overlay instead it would 
	  *effect all $overlays and not just the one we just clicked.
	  *However, in this instance, you could use $overlay instead because 
	  *that's all there is to click.
	  */
	  $(this).hide();
});
 
//Copy and paste version. 
 
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $('<p></p>');
 
$overlay.append($caption);
$("body").append($overlay)
 
$("#image_gallery a").click(function (event){
	event.preventDefault();
	var image_location = $(this).attr("image_location")
		$image.attr("src", image_location);
		$overlay.show();
	var $caption_text = $(this).children("img").attr("alt");
		$caption.text($caption_text);
});
 
$overlay.click(function () {
	$(this).hide();
});
 
 
/*
 *CSS
 *Some suggested CSS to add to your stlyesheet to get you going. 
 */
 
//This will make the webpage itself dim a bit for when an image is selected.
#overlay {
  background:rgba (0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
}
 
//This will center the image.
#overlay img{
	margin-top: 10%;
	text-align: center;
}
 
//This will make the caption readable.
#overlay p{
	color: white;
}