10

使用像ColorBox或jQuery Lightbox Plugin这样的灯箱，我怎样才能创建一个打开图库/图像数组的链接？

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

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

谢谢。

4

5 回答 5

34

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

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

于 2009-09-30T21:50:21.940 回答
3

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

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

这使得所有链接都打开一个灯箱，它应该有 Next/Back 链接来浏览画廊。那是你要找的吗？

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

于 2009-09-15T17:09:36.743 回答
1 
<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>

所以：

rel="lightbox[renovation]"
于 2011-07-31T03:08:46.963 回答
0

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

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

于 2009-09-15T17:09:14.467 回答
0

听起来您可能想使用其他插件。PrettyPhoto非常适合画廊。

于 2009-09-30T21:57:29.340 回答