trvswgnr / bs5-lightbox

A pure JS lightbox gallery plugin for Bootstrap 5 based on the Modal and Carousel components
https://trvswgnr.github.io/bs5-lightbox/
MIT License
133 stars 28 forks source link

Full size image doesn't display when using the plugin in a Django project #68

Open mapperfr opened 1 year ago

mapperfr commented 1 year ago

Hi,

I'm trying to use bs5-lightbox in a Django project and I'm encoutering some display issues. The plugin seems to be properly implemented and reactive, however when I click on one of the images, it doesn't display the image at the expected size.

Here's what's happening:

Capture vidéo du 2023-09-07 11-46-04.webm

I didn't do it in the video, but if I right click on the small-sized popped up image and "open in new tab", the proper-sized image shows up.

I uploaded the script locally but the issue was exactly the same when loading it from the CDN. The script is loaded at the end of my html file, after the bootstrap script.

Here's an excerpt of my Django template code. There's a bit of Django templating language in it but it shouldn't be hard to read. In substance, if the image has principale == True, it displays as a single image:

  {% for image in object.illustrations.all %}
  {% if image.principale == True %}

  <figure class="figure">
    <a href="{{ image.image.url }}" data-toggle="lightbox" data-gallery="focus-gallery" data-caption={{ image.legende }}>
          <img src="{{ image.image_thumbnail_medium.url }}" class="img-fluid">

    </a>
  </figure>

  {% endif %}
  {% endfor %}

And when principale == False, it loads a gallery with the other images:

  {% for image in object.illustrations.all %}
  {% if image.principale == False %}

  <figure class="figure">
  <a href="{{ image.image.url }}" data-toggle="lightbox" data-gallery="general-gallery">
    <img src="{{ image.image_thumbnail_small.url }}" class="rounded justify-content-between mx-1 my-1">
  </a>
  </figure>

  {% endif %}
  {% endfor %}

The {{ image.image.url }} and other sections between curly brackets dynamically load the images based on their model definition. I don't think that's where the issue comes from as I tested with different values and it seems to be loading all the expected images.

Any suggestion would be very welcome on how to fix this. Thanks!