提问者:小点点

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


我正在尝试创建以下图库:
-一个大图像
-下面图库图像的缩略图
-大图像应在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


共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/

这是你要找的吗?

匿名用户

我对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来帮助实现这一点。这也是目前未经测试的代码,但请试试看它是否适用于您。