Question

使用像ColorBox或jQuery Lightbox Plugin这样的灯箱，我如何制作一个能够打开图库/图像阵列的链接？

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

我的想法是，我只是将其作为正常1链接到1张图片，然后使用jquery隐藏除第一个链接之外的所有链接。必须有更好的方法吗？

感谢。

Answer 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将自动隐藏其余部分，然后在适当的时间显示每个图像。

Answer 2

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

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

这使得所有链接都打开了一个灯箱，它应该有下一个/后一个链接来浏览图库。这就是你要找的东西吗？

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

Answer 3

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

所以：

rel="lightbox[renovation]"

Answer 4

我可能会误解，但我得到的印象是你想做的比ColorBox提供的“分组照片”风格画廊更多。我不太确定您所描述的下一个/上一个功能，但我的想法是在没有ColorBox的情况下编写此功能。

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

Answer 5

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

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

5 个答案: