使用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的圖片庫燈箱

回答

相關問題