1

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 などがレンダリングされていることを示していますが。

前もって感謝します。

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 に答える