Question

I’m using bootstrap-lightbox in order to show up certain images in a page.

<a href="#lightbox" class="thumbnail">
  <img src="/img/img1_thumb.png" />
</a>
<a href="#lightbox" class="thumbnail">
  <img src="/img/img2_thumb.png" />
</a>

<div id="lightbox" ...>
  <div class='lightbox-header'>
    <button type="button" class="close" ...>&times;</button>
  </div>
  <div class='lightbox-content'>
    <img src="/img/img1.png" />
  </div>
</div>

I simply need to show the full version of the thumbnail that is clicked.

Is there a lightbox way to update the lightbox-contents img before opening the modal ?

Or should I add something like:

$('.thumbnail').click(function () {
    $('#lightbox .lightbox-content img')
        .attr('src', $(this).attr('data-imagefull'));
});

?

---

Update

I’m not trying to generate the full image path automatically.
I just don’t know where to specify this full image path.

Answer 1

The easiest way would be to look at the source of the plugin. It seems, it has it’s own definition for that: https://github.com/jbutz/bootstrap-lightbox/blob/master/js/bootstrap-lightbox.js#L318

You can use the ‘data-image’ property to make the lightbox update it’s contents. Easiest way for you would be probably to write a small script that gets all images with the lightbox ID and set the data-image property to something without the ‘_thumb’ in the filename(e.g. via regex)