sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.
https://www.lightgalleryjs.com/
Other
6.55k stars 1.29k forks source link

Issue when using carousel gallery without dynamicEl #1601

Closed fab918 closed 6 months ago

fab918 commented 8 months ago

Description

I don't know if it's a bug or a misunderstanding, I'm trying to use the Carousel Gallery code but without the dynamicEL (because I want to use html tags for the slides as I don't use a JS framework).

The result is broken:

Screenshot 2024-03-01 at 16 19 18

(it works fine with dynamicEl but the approach doesn't suit my project)

JS code that you use to initialize lightGallery.

const lgContainer = document.getElementById('inline-gallery-container');
const inlineGallery = lightGallery(lgContainer, {
    container: lgContainer,
    dynamic: false,
    hash: false,
    closable: false,
    showMaximizeIcon: true,
    appendSubHtmlTo: '.lg-item',
    slideDelay: 400,
   plugins: [lgZoom, lgThumbnail],
});

Sample HTML markup

     <div id="inline-gallery-container" class="inline-gallery-container">
        <a href="https://picsum.photos/1400/700"  data-src="https://picsum.photos/1400/700" data-thumb="https://picsum.photos/700/350" data-subHtml="<p>test</p>" >
           <img src="https://picsum.photos/1400/700" />
        </a>
        <a href="https://picsum.photos/1400/700"  data-src="https://picsum.photos/1400/700" data-thumb="https://picsum.photos/700/350" data-subHtml="<p>test</p>">
           <img src="https://picsum.photos/1400/700"  />
        </a>
     </div>

Version

I use the version 2.7.2 for my tests:

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/css/lightgallery-bundle.min.css">
 <script src="https://cdn.jsdelivr.net/combine/npm/lightgallery@2.7.2/lightgallery.min.js,npm/lightgallery@2.7.2/plugins/zoom/lg-zoom.min.js,npm/lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.min.js"></script>
bytesandbots3 commented 8 months ago

Current implementation of the inline carousel using LightGallery works with dynamic: true and the dynamicEl array specified. Within the Lightbox, it requires only the attributes; the rest of the tags are automatically generated by Lightbox itself.

stale[bot] commented 6 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.