在jquery库中切换缩略图和大图像？

我是一个初学者（对我的英语很抱歉），我正在尝试为我自己的网站建立一个基于jquery的照片库

我非常喜欢的一个功能就是这个（示例）：

您有一个大的缩略图网格，当您单击其中一个拇指时，网格将消失，以在幻灯片中显示“大”图像。从幻灯片本身，您可以通过单击专用图标切换回拇指。我猜这种图库是基于jquery的，但我不明白如何从拇指和幻灯片切换（反之亦然）。。。可能是css3关键帧

我不想复制画廊，我只想复制这片土地。如果你对我如何开始工作有什么想法的话，我会很高兴的

---

提前谢谢你

我刚才写的这个小脚本应该可以让你开始了

我所做的是在父级上使用

列计数

将所有图像分成均匀的行，当前设置为3行，但可以多多少少

（对于幻灯片功能，这取决于您。有成千上万的幻灯片教程、插件等。）

然后我将点击的img标签的src转换成一个变量。然后脚本获取该

var

，并通过

.css（）

将其添加到覆盖类中。这将允许您单击每个图像的覆盖

HTML结构：

<div class="parent">
    <img src="urlGoesHere" alt="img" />
    <!-- Continue with the images -->
</div>

剧本：

$('.parent img').on('click', function() {
   var imgSrc = $(this).attr('src'); // Stores the img's src into a var

    $('.overlay').fadeIn().css('background-image', 'url(' + imgSrc + ')'); // Adds the stored var to the overlay class and fades it in

    $('.close').on('click', function() { // The close button's functionality
        $('.overlay').fadeOut(); // Hides the overlay once clicked
    });
});

---

这里有一个小问题：

老实说，对于jquery的初学者，我强烈建议您在线搜索一些教程。幻灯片放映对于一个不太懂语言的人来说有点复杂。如果你通过一个或两个幻灯片教程，你会有曝光。然后你可以应用你学到的知识来最好地解决你的问题。但我已经基于jquery Cycle2插件构建了我的图库。我只是想完成它，我认为这与css有关，我可以很好地处理它，我学得很快。如果这都是关于javascript的，那么我可能不能。顺便说一句，谢谢你的建议。太好了！这看起来可以很好地工作。我将尝试将此应用于我已经完成的工作（我想我已经找到了方法），然后在完成后将其发布到这里。非常感谢！；-）没问题，一旦你申请了，就告诉我进展如何。耶！我让它工作了，我只需要做一点风格，并修复一些小事情。我会尽快发布结果，只要我对它感到满意。：-）再次感谢，我期待着看到它！如果这回答了您的问题，您可以向上投票，并将其标记为未来用户接受的答案。干得好！这似乎工作得很好，甚至在我的手机上也很流畅。

$('.parent img').on('click', function() {
   var imgSrc = $(this).attr('src'); // Stores the img's src into a var

    $('.overlay').fadeIn().css('background-image', 'url(' + imgSrc + ')'); // Adds the stored var to the overlay class and fades it in

    $('.close').on('click', function() { // The close button's functionality
        $('.overlay').fadeOut(); // Hides the overlay once clicked
    });
});