1

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

数据库中的每条记录（人）都有一个名为“地图”的字段。此字段包含我需要为该记录显示的 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 等。

提前致谢。

4

1 回答 1

2

嗯，这证明有时候你只需要一夜好眠。

问题是我没有 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 -->
于 2013-01-22T15:18:16.767 回答