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

Clicking a thumbnail to change the large image in a gallery

本文关键字：图像 略图 单击      更新时间：2023-09-26

我正在尝试创建以下库：
-一个大图像
-下方图库图像的缩略图
-大图像应打开所有图像点击灯箱画廊

我有使用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

Try，

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/

这就是你要找的吗？

我对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之外的其他事件来帮助实现这一点。这也是目前未经测试的代码，但请尝试一下，看看它是否适合您。

相关文章：