我正在尝试创建以下图库:
-一个大图像
-下面图库图像的缩略图
-大图像应在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
试试看,
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
来帮助实现这一点。这也是目前未经测试的代码,但请试试看它是否适用于您。