燈箱動態內容不工作

Question

我有一個Rails 3.2應用程序使用Twitter Bootstrap和引導燈箱。

數據庫中的每條記錄（人）都有一個名爲「map」的字段。該字段包含我需要爲該記錄顯示的PNG文件。

生成燈箱，當我查看源代碼時，HTML顯示正在加載正確的PNG文件。但是，當您查看圖像（或右鍵點擊圖像以保存圖像）時，很明顯只有第一張圖像由燈箱渲染。每條記錄都顯示燈箱中的第一個圖像。這裏是我的代碼：

<td><!-- lightbox code --> 
      <a data-toggle="lightbox" href="#demoLightbox"><%= image_tag "map_icon1.png", :width => '32' %> </a> 
      <div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 
       <div class='lightbox-header'> 
        <button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button> 
       </div> 
       <div class='lightbox-content'> 
        <%=image_tag person.map %> 
       </div> 
      </div> 
      <!-- end lightbox code --> 
     </td> 

這裏是什麼正在由頁面生成： ×

<td><!-- lightbox code --> 
      <a data-toggle="lightbox" href="#demoLightbox"><img alt="Map_icon1" src="/assets/map_icon1.png" width="32" /> </a> 
       <div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 
        <div class='lightbox-header'> 
         <button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button> 
        </div> 
        <div class='lightbox-content'> 
         <img alt="G2" src="/assets/g2.png" /> 
        </div> 
       </div> 
       <!-- end lightbox code --> 

我知道這個代碼是不是乾淨，我幾乎一起黑客。但是，如果HTML顯示每個文件正在渲染，那麼爲什麼燈箱只顯示第一個png並將其用於每個記錄？

圖像g2.png是什麼在燈箱顯示每個記錄。即使代碼顯示i2.png等正在呈現。

在此先感謝。

Answer 1

嗯，這證明有時你需要睡個好覺。

問題是我沒有HREF和DIV ID的唯一值。

一旦我改變我的代碼來創建基於記錄ID的唯一值，它一切正常。這是我的最終代碼。

<td><!-- lightbox code --> 
      <a data-toggle="lightbox" href="#<%= person.id %>Lightbox"><%= image_tag "map_icon1.png", :width => '32' %> </a> 
      <div id="<%= person.id %>Lightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 
       <div class='lightbox-header'> 
        <button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button> 
       </div> 
       <div class='lightbox-content'> 
        <%=image_tag person.map %> 
       </div> 
      </div> 
      <!-- end lightbox code -->