Ruby on rails Lightbox动态内容不工作

我有一个Rails 3.2应用程序，使用Twitter引导和引导lightbox

<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 -->

数据库中的每个记录（人员）都有一个名为“map”的字段。此字段包含我需要为该记录显示的PNG文件

<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 -->

lightbox被生成，并且当我查看源代码时HTML显示正在加载正确的PNG文件。但是，当您查看图像（或右键单击以保存图像）时，很明显只有第一个图像被lightbox渲染。每条记录都显示lightbox中的第一个图像。这是我的密码：

<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 -->

&时代；

以下是该页面生成的内容： ×

<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显示每个正在呈现的文件，为什么lightbox只显示第一个png并对每个记录使用它

<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 -->

图像g2.png显示在每个记录的lightbox中。即使代码显示正在渲染i2.png等

<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 -->

---

提前谢谢。

好吧，这证明了有时你只需要睡个好觉

<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 -->

问题是HREF和DIV ID没有唯一的值

<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 -->

一旦我修改了代码，根据记录ID创建了唯一的值，一切正常。这是我的最终代码

<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 -->

<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 -->

&时代；

如果可能，请检查我的问题？我正在尝试做类似的事情。