使用jQuery的图片库灯箱

我在几个网站上使用了JQuery灯箱，通过缩略图库和缩略图作为较大照片的链接。使用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/

这可能吗？

来源

2010-04-18 Michael

最简单的方式只显示一个打开灯箱并且灯箱显示多个图像的链接将包括页面中所有图像的链接并使用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();

来源

2010-04-20 03:03:33

对于一个画廊，你需要给所有链接相同的“相对”属性，如：

<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，我相信大多数其他插件的工作方式相同。

来源

2010-04-18 11:52:12

感谢 - 只是去尝试，但不遗憾的是工作。如果我有两个像上面那样的链接，那么我将在灯箱中获取两个图像以循环浏览，但是如果我在图库文件夹中有更多图像，我希望能够循环浏览它们，而不必在网络上链接到它们如果这是有道理的页面？ – Michael 2010-04-18 11:56:24

使用jQuery的图片库灯箱

回答

相关问题