Trying to do multiple inline galleries with autoplay - only first one works right

[simplebunsen]

Description

So I have a gallery with autoplay that sits inline. It works great, so I went to create a second one on my page.

Suddenly, while the first one still works great, the second one sort of spazzes out. There are the following problems I noticed with it:

• Out of order / duplicate images despite using the exact same markup when compared to the first one.
• randomly autoplays to the next one before progress bar is up / ust one picture after another autoplaying without delay
• can't use the drag functionality, this works great on the first one
• Can't turn off autoplay via the button
• some other weirdness

I'm not too sure, but I think the problems with the second gallery really start happening only once the first gallery completed one autoplay.

Upon commenting out the html of gallery 1, the second one starts working flawlessly.

I suspect the autoplay plugin being at fault.

Steps to reproduce

JS code that you use to initialize lightGallery.

        for (let i = 0; i < galleries.length; i++) {

            galleries[i].id = 'gallery-' + i; // <-------------------- creating IDs here

            let currentLG = lightGallery(document.getElementById('gallery-' + i), {
                container: galleries[i],
                galleryId: "gallery-" + i,
                closable: false,
                download: false,
                counter: false,
                hideBarsDelay: 1000,
                showMaximizeIcon: true,
                subHtmlSelectorRelative: true,
                appendSubHtmlTo: ".lg-item",
                slideShowAutoplay: true,
                plugins: [lgZoom, lgAutoplay],
            });

            setTimeout(() => {
                currentLG.openGallery();
            }, 200);
        }

Sample HTML markup

<!-- GALLERY 1 (ID generated in js)-->
            <div class="inline-gallery-container gallery">
                <a href="./assets/img/DnD Character.JPG" data-sub-html=".caption">
                    <figure>
                        <img src="./assets/img/DnD Character.JPG" />
                        <figcaption class="caption">Das ist Hauskatze</figcaption>
                    </figure>
                </a>
                <a href="./assets/img/Concept Art.jpg" data-sub-html=".caption">
                    <figure>
                        <img src="./assets/img/Concept Art.jpg" />
                        <figcaption class="caption">cap</figcaption>
                    </figure>
                </a>
                <a href="./assets/img/Color Scheme.jpg" data-sub-html=".caption">
                    <figure>
                        <img src="./assets/img/Color Scheme.jpg" />
                        <figcaption class="caption">cap</figcaption>
                    </figure>
                </a>
                <a href="./assets/img/Nah_Textur_2.jpg" data-sub-html=".caption">
                    <figure>
                        <img src="./assets/img/Nah_Textur_2.jpg" />
                        <figcaption class="caption">cap</figcaption>
                    </figure>
                </a>
                <a href="./assets/img/Textures.jpg" data-sub-html=".caption">
                    <figure>
                        <img src="./assets/img/Textures.jpg" />
                        <figcaption class="caption">cap</figcaption>
                    </figure>
                </a>
            </div>

            <!-- GALLERY 2 -->
            <div class="inline-gallery-container gallery">
                <a href="../../assets/img/3_placeit/luk/1_1.jpg">
                    <figure>
                        <img src="../../assets/img/3_placeit/luk/1_1.jpg" />
                        <figcaption>cap</figcaption>
                    </figure>
                </a>
                <a href="../../assets/img/3_placeit/luk/1_2.jpg">
                    <figure>
                        <img src="../../assets/img/3_placeit/luk/1_2.jpg" />
                        <figcaption>cap</figcaption>
                    </figure>
                </a>
                <a href="../../assets/img/3_placeit/luk/1_3.jpg">
                    <figure>
                        <img src="../../assets/img/3_placeit/luk/1_3.jpg" />
                        <figcaption>cap</figcaption>
                    </figure>
                </a>
                <a href="../../assets/img/3_placeit/luk/1_4.jpg">
                    <figure>
                        <img src="../../assets/img/3_placeit/luk/1_4.jpg" />
                        <figcaption>cap</figcaption>
                    </figure>
                </a>
            </div>

Environment

• Browser and version - Chrome
• OS - Win 10
• lightGallery version - 2.5.0-beta.5

[simplebunsen]

If I remove the autoplay plugin from the gallery init, everything works again with the two galleries. All images in the right order, no premature autoplay (duh) and all features such as dragging work on both.

Should narrow it down to the autoplay plugin.

Am I initializing something wrong? I do think that autoplay should work even for more than 1 gallery per page, but obviously, it doesn't here.

[sachinchoolur]

Thank you for reporting the issue. I'll look into this and get back to you

[simplebunsen]

Thank you for your reply :) looking forward to the solutions!

[simplebunsen]

Sorry to bump this, any news on this? :)

[sachinchoolur]

Hey @simplebunsen,

I've tried multiple times to reproduce the issue. The only way I was able to reproduce the issue is initializing the same gallery multiple times.

Could you please share the website URL if possible?

[simplebunsen]

Hey there @sachinchoolur

This is the website URL with the bugged autoplay reactivated. I've reexamined the gallery init code and unless I'm missing something, every gallery should be initialized seperately and only once.

As before, the pictures in the second gallery are displayed out of order, skipping around erratically and the autoplay cannot be disabled some of the time.

Thanks for looking into it :)

[stale[bot]]

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.