Question

I have a Rails 3.2 app using Twitter Bootstrap and bootstrap-lightbox.

Each record (person) in the database has a field named “map”. This field contains the PNG file I need to show for that record.

The lightbox is generated, and the HTML when I view source shows that the correct PNG file is being loaded. However, when you look at the images (or right click on them to save them) it’s clear that only the first image is being rendered by the lightbox. Every record shows the first image in the lightbox. Here is my code:

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

Here is what’s being generated by the page:

×

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

I know this code isn’t the cleanest, I pretty much hacked it together. But if the HTML is showing each file is being rendered, how come the lightbox is only showing the first png and using that for every record?

The image g2.png is what’s being shown in the lightbox for every record. Even though the code shows that i2.png etc. are being rendered.

Thanks in advance.

Answer 1

Well, this is proof that a good night’s sleep is sometimes all you need.

The problem was I didn’t have unique values for the HREF and the DIV ID.

Once I changed my code to create unique values based on the record ID’s it all worked fine. Here is my final 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 -->