Question

我有一个使用Twitter Bootstrap和bootstrap-lightbox的Rails 3.2应用程序。

数据库中的每个记录（人）都有一个名为“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 -->

灯箱动态内容无效

1 个答案: