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

提问于 2024-06-02T18:08:10+08:00

浏览次

10

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

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

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

谢谢 .

5 回答

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

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();
});
```
Note: 正如您所看到的，只需列出要与图库分开的其他图像的锚点链接 . 无需向标记添加图像，然后使用JS隐藏它们 . 您将在上面的标记示例中看到的唯一图像是images / thumbnail-image1.jpg Lightbox将自动隐藏其余图像，然后在适当的时间显示每个图像 .
回复于 2024-06-02T18:08:10+08:00
32
使用jQuery Lightbox Plugin，示例代码说要执行以下操作：
```
$(document).ready(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
    $('#gallery a:gt(0)').hide();
});
```
这使得所有链接都打开了一个灯箱，它应该有下一个/后一个链接来浏览图库 . 这就是你要找的东西吗？

（这个例子可以在这里找到：http://leandrovieira.com/projects/jquery/lightbox/#example）
回复于 2024-06-02T18:08:10+08:00

1

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

所以：

rel="lightbox[renovation]"

回复于 2024-06-02T18:08:10+08:00

3

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

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

回复于 2024-06-02T18:08:10+08:00
0

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

回复于 2024-06-02T18:08:10+08:00

相关问题