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

使用lightbox ColorBox或jQuery Lightbox Plugin如何使一个链接打开一个图库/图像数组？如何使一个jQuery的灯箱从一个链接打开多个图像？

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

我的想法是，我只是把它作为正常的1链接到1张图片，然后使用jquery隐藏除第一个链接外的所有内容。一定会有更好的办法？

谢谢。

2009-09-15 ritch0s

下面是适当的（和更有效的）溶液：

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-30 21:50:21

我喜欢你解释的方式。 – feihtthief 2010-04-27 18:59:29

英雄！很好的方法来做到这一点 – Voles 2012-04-03 14:18:23

新的lightbox2甚至不需要jQuery元素单独的初始化。 $> bower安装lightbox2 --save，然后包含js和css。将系列中的所有图像标记为data-lightbox =“image_gallery_unique_id” – 2015-10-18 20:42:07

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

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

来源

2009-09-15 17:09:14

使用jQuery灯箱插件，示例代码，说要做到以下几点：

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

，使所有的链接打开收藏夹，它应该有一个/后退链接通过画廊浏览。那是你在找什么？

（该示例可以在这里：http://leandrovieira.com/projects/jquery/lightbox/#example）

来源

2009-09-15 17:09:36

然后，您可以添加$（ '＃画廊：GT（0）'）隐藏（）;如果你想隐藏除第一个之外的所有其他链接。 – richsage 2009-09-15 17:13:33

我知道如何使用灯箱，我想我不会让这个问题足够清楚，但富裕有重要的代码隐藏除了第一个这是我正在寻找的，但我不能给他答案，因为它是一条评论。 – ritch0s 2009-09-15 20:40:59

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

来源

2009-09-30 21:57:29 GSto

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

所以：

rel="lightbox[renovation]"

来源

2011-07-31 03:08:46

@Cindy对不起，在我完成之前点击输入。你在你的href之后，但在>之前放置rel =“aaaa”。希望这是有道理的。我试图输入整行，但我猜测链接是不允许的或者什么的。对不起，这是我第一次参加董事会。 – 2011-07-31 03:12:15

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

回答

相关问题