Bootstrap LightBox

Question

我在引導燈箱插件時遇到了問題。我得到了代碼

http://jbutz.github.io/bootstrap-lightbox/#home

我想擁有它，用戶可以在點擊一個鏈接，然後顯示在燈箱的所有圖像。現在，我有以下代碼：

<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 
<div class='lightbox-content'> 
    <% for picture in @gallery %> 
    <%= image_tag picture.image_url.to_s %> 
    <div class="lightbox-caption"><p><%= picture.caption %></p></div> 
    <% end %> 
</div> 

我使用CarrierWave圖像和爲每個圖像的標題。現在每個圖像都顯示在頁面上（我不希望這樣），圖像不可點擊，而且整個燈箱只有一個標題。

Answer 1

問題是，您只定義了在運行燈箱代碼時彈出的隱藏div。如果你看一下頁面的源代碼，你會看到，整個燈箱代碼段看起來是這樣的：

<div class="example"> 
    <ul class="thumbnails"> 
    <li class="span2"> 
     <a data-toggle="lightbox" href="#demoLightbox" class="thumbnail"> 
     <img src="assets/img/small.png" alt="Click to view the lightbox"> 
     </a> 
    </li> 
    </ul> 
    <div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class='lightbox-content'> 
     <img src="assets/img/large.png"> 
     <div class="lightbox-caption"><p>Your caption here</p></div> 
    </div> 
    </div> 
</div> 

你注意到的是，有data-toggle="lightbox"屬性，並鏈接到包含在div點擊縮略圖的ul全畫面。

嘗試將具有上述屬性的可點擊縮略圖添加到您的代碼中。