单击缩略图更改图库中的大图像

Question

我正在尝试创建以下图库:
-一个大图像
-下面图库图像的缩略图
-大图像应在lightbox图库中单击后打开所有图像

我让lightbox画廊使用PhotoSwipe工作，当我点击大图像时，它就会触发。我也有缩略图在大图像下面的地方。我现在的问题是，当我单击其中一个缩略图时，我如何改变大图像？我见过很多例子（也是相当简单的例子），但在我的案例中似乎没有一个行得通。

下面是我为缩略图准备的代码：

<a href="<?php echo $image['url']?>" data-size="<?php echo $image['width']?>x<?php echo $image['height']?>" data-index="0">
  <img src="<?php echo $image['url']?>">
</a>

我想要的是，当我单击缩略图的href时，它改变了大图像，这是用下面的代码显示的：

<img class="bigimg" src="imageurl.jpg">

缩略图需要有href标记，因为这是lightbox函数工作所必需的。

我看到了一些jQuery示例，它们用缩略图的src替换了bigimg的src，但我不能完全使用href。

作为参考，就是这样的情况。

示例：JSFiddle

Answer 1

我对lightbox并不十分熟悉，但如果我理解得正确，您希望它只做它已经做的事情，但另外，更改img.bigimg的src。如果是这种情况，那么在a标记上添加您自己的侦听器应该会起作用，只要您不阻止默认操作。大致如下：

var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector.
thumbnailLinks.on('click', function() {
    $('img.bigimg').attr('src', $(this).attr('href')); // Set img.bigimg src attribute to the href attribute of the link that was clicked.
});

这可能有一些弱点。例如，我不确定如果用户通过链接进行选项卡并使用Enter键激活它，这是否会起作用，尽管应该可以添加其他事件，而不只是Click来帮助实现这一点。这也是目前未经测试的代码，但请试试看它是否适用于您。

Answer 2

试试看,

var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector.
$('.thumbnailLink').click(function() {
  $('.big a').attr('href', $(this).attr('href'));
  $('.bigimg').attr('src', $(this).attr('href')); 
});

下面是小提琴https://jsfiddle.net/91oq8ja2/2/

这是你要找的吗？