The Lightbox hasn't been added, I can't find a bug in my code. I'm using chrome. I've tried safari and it's the same.

//Solution: Create an overlay with the large image - Lightbox

  // Add overlay


var $overlay = $("<div id = "overlay"></div>"); /*will be using more than once for showing and hiding so we make it a variable, that adds
it to document*/
var $image = $("<img>"); //declares image that will be appended to the overlay
var $caption = $(<p></p>);


 // adds an image to overlay
$overlay.append($image); //adds image before overlay is added, so it will be inside overlay by time overlay is added in the next line

// A caption to overlay
$overlay.append($caption);

$("body").append($overlay); //create overlay, and add to document


//1. Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault(); /* prevents browser from over riding code below in chrome developer tools*/
  var imageLocation = $(this).attr("href");
  //Update overlay with the image linked in the link
  $image.attr("src", imageLocation); // update source for image in overlay



  $overlay.show();// Show the overlay.

  // 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() {
  $(this).hide(); 
});
  // Hide the overlay