如何让 jquery 灯箱从一个链接打开多个图像？答案

【问题标题】：How to make a jquery lightbox open multiple images from one link?如何让 jquery 灯箱从一个链接打开多个图像？
【发布时间】：2009-09-15 16:59:37
【问题描述】：

使用 ColorBox 或 jQuery Lightbox Plugin 之类的灯箱，我如何创建一个打开图库/图像数组的链接？

例如，我有 1 个缩略图，当用户单击它时，我希望它在灯箱中打开多张图片，以便用户可以单击下一个或上一个以查看该画廊中的所有图片。

我的想法是，我只是像平常一样做 1 个链接到 1 个图片，然后使用 jquery 隐藏除第一个链接之外的所有链接。一定有更好的办法吗？

谢谢。

【问题讨论】：

标签： javascript jquery html lightbox

【解决方案1】：

这是正确的（更有效）解决方案：

HTML：

<div id='gallery'>
    <a href="images/big-image1.jpg">
        <img src="images/thumbnail-image1.jpg"/>
    </a>
    <a href="images/big-image2.jpg" ></a>
    <a href="images/big-image3.jpg" ></a>
    <a href="images/big-image4.jpg" ></a>
</div>

jQuery/JS：

$(document).ready(function() {
    $('#gallery a').lightBox();
});

注意：如您所见，只需列出指向您希望与图库分开的其他图像的锚链接。无需将图像添加到标记中，然后使用 JS 隐藏它们。您将在上面的标记示例中看到的唯一图像是 images/thumbnail-image1.jpg Lightbox 会自动隐藏其余图像，然后在适当的时间显示每个图像。

【讨论】：

我喜欢你解释的方式。
英雄！这样做的好方法
新的lightbox2甚至不需要jquery元素单独初始化。 $>bower install lightbox2 --save，然后包含js和css。将系列中的所有图片标记为 data-lightbox="image_gallery_unique_id"

【解决方案2】：

使用 jQuery Lightbox 插件，示例代码执行以下操作：

$(document).ready(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
    $('#gallery a:gt(0)').hide();
});

这会使所有链接都打开一个灯箱，并且它应该有 Next/Back 链接来浏览图库。这就是你要找的吗？

（示例可在此处获得：http://leandrovieira.com/projects/jquery/lightbox/#example）

【讨论】：

你可以添加 $('#gallery a:gt(0)').hide();如果您想隐藏除第一个链接之外的所有其他链接。
我知道如何使用灯箱，我想我没有把问题说得足够清楚，但是 Richsage 有重要的代码，它隐藏了除第一个之外的所有代码，这是我正在寻找的，但我可以不要给他答案，因为这是评论。

【解决方案3】：

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>

所以：

rel="lightbox[renovation]"

【讨论】：

@Cindy 抱歉，在我完成之前按回车键。您将 rel="aaaa" 放在 href 之后，但在 > 之前。希望这是有道理的。我试图输入整行，但我猜链接是不允许的或什么的。抱歉，这是我第一次加入董事会。

【解决方案4】：

我可能会产生误解，但我得到的印象是您想要做的不仅仅是 ColorBox 提供的“分组照片”样式库。我不太确定您描述的下一个/上一个功能，但我的想法是在最初不使用 ColorBox 的情况下编写此功能。

将您的查看库添加到页面内的普通 div。当您根据自己的喜好设置画廊及其行为后，您可以在 div 上调用 ColorBox inline（在弹出窗口中显示您新创建的控件）。

【讨论】：

【解决方案5】：

听起来您可能想使用不同的插件。 PrettyPhoto 非常适合画廊。

【讨论】：