jquery - 脚本不起作用：单击 jQuery 时图像更改

Question

我正在制作的测试站点有一点问题。

我喜欢尝试 Javascript，但我被困在这个小代码上......

我想要达到的目标：

当您单击下面的图片时，该图片将在页面的主要部分和背景中可见。当您点击页面的主页面（图片可见的地方）时，它会自动转到下一个页面。

我现在拥有的：

我已经做了一个弹出窗口，现在开始图片。我已经插入了一个代码，但它似乎并没有很好地打开。我尝试了很多，但它仍然无法正常工作。

jQuery

我试图做的是：

$('#photo').fadeIn();
$("#gallery ul li").on("click", function() {
var selector = '#photo[src="' + $(this).attr('href') + '"]';

$(".selected").hide();

$('selector').fadeIn();
return false;
});

$('#gallery ul li').on('click', function() {
$("#photo").hide();
var next = $(this).next();
if (next.length > 0) {
    next.fadeIn();    
} else {
    $('.selected').fadeIn();
}
return false;
});

我还制作了一个jsFiddle，我在其中输入了 HTML 和 CSS。

现场演示

我想创建这个：

这个