.preventDefault在lightbox

Question

我正在尝试为6张图片（有序列表）的简单图库创建lightbox。

    <ol id=image_gallery>

      <li><a href="images/depression.jpg"><img src="images/depression.jpg"></a></li>
      <li><a href="images/solitude.jpg"><img src="images/solitude.jpg" ></a></li>
      <li><a href="images/photo1.png"><img src="images/photo1.png" ></a></li>
      <li><a href="images/photo2.png"><img src="images/photo2.png" ></a></li>
      <li><a href="images/green.png"><img src="images/green.png" ></a></li>
      <li><a href="images/yellow.png"><img src="images/yellow.png" ></a></li>

    </ol>

似乎我遇到了一些问题，但我无法弄清楚它是哪一个

      var $overlay = $('<div id= "overlay"></div>');// the overlay which will be added
      var $image = $("<img>"); // the image which will be added to the overlay

      $overlay.append($image);// we append the image to the overlay
      $("body").append($overlay);// we append the overlay to the body

      $("#image_gallery a").click(function(event){
           event.preventDefault();
      var imageLocation = $(this).attr("href");
      $image.attr("src", imageLocation); 

 $overlay.show();
 });

 $overlay.click(function(){
 $(this).hide();
});

显然问题出现在这些代码行中，因为在我添加它们之后，preventDefault停止工作，图像在新窗口中打开，就像没有代码一样。我希望当我点击任何图像（常规lightbox效果）时，我的图像会出现在叠加层中，并且当再次点击时图像会消失。

 var imageLocation = $(this).attr("href");
 $image.attr("src", imageLocation); 

叠加层的 CSS 是

  #overlay {

         background: rgba(0, 0, 0, .7);
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         display: none;
     }