javascript - 带有 JQuery Lightbox 的图片库

Question

我已经在几个网站上使用了 JQuery 灯箱，通过缩略图画廊和缩略图链接到更大的照片。

我的问题是，使用灯箱 - 我可以制作一个缩略图吗？单击它会将您带到一个包含几张图片的文件夹中循环浏览，而不是像下面那样只链接到一张照片？

<a href="Images/Gallery/Box1.jpg" class="lightbox">
            <asp:Image runat="server" ImageUrl="~/Images/Box1.jpg" Width="120" Height="88"/>
</a>

图库文件夹中有两张图片 - Box1.jpg 和 Box2.jpg，但我只希望在页面上有一个指向 Box1.jpg 的链接，并且仍然能够使用灯箱浏览方框图片。

我正在使用这个灯箱:http://leandrovieira.com/projects/jquery/lightbox/

这可能吗？

Answer 1

要仅显示一个打开灯箱的链接并让灯箱显示多张图片，最简单的方法是在页面中包含所有图片的链接，并使用 CSS 隐藏不需要的链接。

像这样:

HTML:

<ul id="gallery">
    <li class="show"><a href="Box1.jpg"><img src="Box1thumb.jpg" alt="" /></a></li>
    <li><a href="Box2.jpg"><img src="Box2thumb.jpg" alt="" /></a></li>
    <li><a href="Box3.jpg"><img src="Box3thumb.jpg" alt="" /></a></li>
</ul>

CSS:

#gallery li {
    display: none;
}
#gallery li.show {
    display: block;
}

JavaScript:

$('#gallery a').lightBox();