Question

While trying to use this jquery lightbox plugin for Bootstrap (click for source code), I stumbled upon a strange problem about how jQuery plugins work.

I have a containing div for the lightbox:

<div class="lightbox fade" id="demoLightbox" style="display: none;">
    <div class='lightbox-content'>
        <img src="image.png">
    </div>
</div>

If I:

1. Open the lightbox with $("#demoLightbox").lightbox()
2. Close it with $("#demoLightbox").lightbox('hide')
3. Change the image through AJAX
4. Ask to reopen a nre lightbox with $("#demoLightbox").lightbox()

then the second lightbox appears, but has the same dimensions than the first one; they have not been recomputed according to the new image!

The size calculations are done in the constructor of the Lightbox class, so I thought that $("#demoLightbox").lightbox() would give me a new instance and do the calculations again. But it seems that I got the same one! What happened ?

Answer 1

If the size calculations are only in the constructor, the simplest thing to do is create a new instance, as you attempted. However, you will first need to remove the old instance:

$('#demoLightbox').removeData('lightbox');

If you want a new instance in one fell swoop then

$('#demoLightbox').removeData('lightbox').lightbox();

---

Update: A Less Destructive Option

This plugin seems to have some undocumented features, one of which might be useful for what you are trying to accomplish. Namely, there is a flag in the options called resizetofit. By default it is set to false. This flag is used to have the lightbox size itself to fit the window size. In the process of resizing it will recalculate the dimensions of the content.

Adding the attribute data-resizetofit="true" to either the markup of the initiating link or to the <div class="lightbox" > should trigger a recalculation of the content on each call to the show() method.

Note: The recalculation of the dimensions of the content will only occur if the <img> is replaced with a completely new <img>. Merely changing the src attribute will fail because the dimension calculations are cached onto the element after the first calculation.