用于图库的jQuery lightBox插件，带有缩略图和主图像

基本上，我有一个带有缩略图和主图像的图像库，因此单击缩略图图像会用相关的全尺寸图像更新主图像

缩略图像：

<a href="/images/<?php echo $product->image; ?>" onclick="$('#main-image').attr('src', '/images/<?php echo $product->image; ?>'; $('#main-image-link').attr('href', this.href); return false;">
    <img src="/images/<?php echo $product->image; ?>" alt="" />
</a>

如您所见，在单击主图像时，灯箱被激活。我遇到的问题是，单击主图像只会显示该图像的灯箱

---

我想让它显示一个lightbox，以当前所选主图像的lightbox为起点显示所有图像。

lightbox插件会自动执行此操作

<a class="lightbox" href="image1.jpg"><img src="image1thumb.jpg" /></a>
<a class="lightbox" href="image2.jpg"><img src="image2thumb.jpg" /></a>
<a class="lightbox" href="image3.jpg"><img src="image3thumb.jpg" /></a>

---

如果您不想将链接/图像放在页面上，只需使用CSS显示：无。

您需要首先让库正常工作，就像创建无序列表一样，这将确保下一次导航正常工作

$(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
});

---

只有这样，您才能添加刷新主图像的逻辑，因为这是在插件基本功能的基础上进行的自定义操作。

不，“链接”实际上是缩略图。单击缩略图会在页面上显示更大版本的图像-单击更大版本会打开一个包含更大版本图像的lightbox。如果我将缩略图图像类设置为lightbox，则图库会正常工作-但是这意味着单击缩略图时会显示lightbox-这不是所需的操作，正如我在原来的帖子中解释的，你问题的最后一句话是：为所有的图片创建一个灯箱画廊？请考虑改写和澄清当前和期望的用例。

<a class="lightbox" href="image1.jpg"><img src="image1thumb.jpg" /></a>
<a class="lightbox" href="image2.jpg"><img src="image2thumb.jpg" /></a>
<a class="lightbox" href="image3.jpg"><img src="image3thumb.jpg" /></a>

$('A.lightbox').lightBox();

$(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
});