Question

我在几个网站上使用过JQuery灯箱，有一个缩略图库和缩略图作为更大照片的链接。

我的问题是，使用灯箱 - 我可以制作它，以便我有一个缩略图，点击时会带你到一个带有几张图片的文件夹进行循环，而不是只链接到下面的一张照片吗？

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

在gallery文件夹中有两个图像 - 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();

Answer 2

对于图库，您需要为所有链接指定相同的“rel”属性，例如：

<a href="Images/Gallery/1.jpg" class="lightbox" rel="gallery">
            <img src="Images/Gallery/Thumbnails/1T.jpg" width="136" height="97" />
</a>
<a href="Images/Gallery/2.jpg" class="lightbox" rel="gallery">
            <img src="Images/Gallery/Thumbnails/2T.jpg" width="136" height="97" />
</a>

无论如何，这是针对Fancybox的，我相信大多数其他插件都是一样的。

使用JQuery Lightbox的图库

2 个答案: