1. 您在 标签中将图像路径用作 href 。请改用数据属性。
在 $ overlay.show（） 之后
2. 缺少}）

使用此代码。

    /*************************************************************
            Gallery Lightbox On Stories Page
**************************************************************/

//Problem: User when clicking on image goes to a dead end
//Solution: Create an overlay with the large image - Lightbox

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
$("body").append($overlay);

// Capture the click event on a link to an image
$(".gallery a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("data-href");
// Update overlay with the image linked in the link
$image.attr("src",imageLocation);

// Show the overlay.
$overlay.css("display","flex");

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

/*************************************************************
        Hide Email Using Javascript To Avoid Spam 
**************************************************************/
//var parts = ["lpstories","yahoo","com","&#46;","&#64;"];
//var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
//document.getElementById("email").innerHTML=email;

它还在弹出窗口中居中显示图像。

这是相同的工作fiddle。

如果您不想关闭图像点击时的弹出窗口，请添加此项。

$overlay.find("img").click(function(e){
 e.stopImmediatePropagation();
});