Download button doesn't work for inline gallery

[ConfusedVorlon]

Description

If I create an inline gallery, then the download button doesn't work. (if the gallery is not inline, then the download button works fine)

Steps to reproduce

create a simple gallery, enable downloads and initialise inline

the download button seems to get the 'open gallery' selector attached to it's click handler, and indeed I can put a breakpoint in that function and confirm that it is called. I have no idea why this handler is attached!

JS code that you use to initialize lightGallery.

lightGallery(document.getElementById('animated-thumbnails-gallery'), {
      container: document.getElementById('animated-thumbnails-gallery'),
        download: true,
    });

Sample HTML markup

<div class="container" id="gallery">
  <div class="row justify-content-center">
    <div class="col col-md-10">
      <div class="gallery-container" id="animated-thumbnails-gallery">
        <a data-lg-size="1600-1067" class="gallery-item" data-src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80" data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@tobbes_rd' >Tobias Rademacher </a></h4><p> Location - <a href='https://unsplash.com/s/photos/puezgruppe%2C-wolkenstein-in-gr%C3%B6den%2C-s%C3%BCdtirol%2C-italien'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
          <img alt="layers of blue." class="img-responsive" src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80" />
        </a>
        <a data-lg-size="1600-2400" data-pinterest-text="Pin it2" data-tweet-text="lightGallery slide  2" class="gallery-item" data-src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80" data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@therawhunter' >Massimiliano Morosinotto </a></h4><p> Location - <a href='https://unsplash.com/s/photos/tre-cime-di-lavaredo%2C-italia'>Tre Cime di Lavaredo, Italia</a>This is the Way</p>">
          <img class="img-responsive" src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80" />
        </a>
      </div>
    </div>
  </div>
</div>

<script>

  document.addEventListener('DOMContentLoaded', function() {
    window.lightGallery(document.getElementById('animated-thumbnails-gallery'), {
      container: document.getElementById('animated-thumbnails-gallery'),
        download: true,
    });
  });

</script>

Environment

• Browser and version - Chrome 115.0.5790.170 (Official Build) (arm64)
• OS - MacOS 13.5.1
• lightGallery version - 2.7.1

Additional context

[ConfusedVorlon]

additional: Same issue with the share plugin. Clicking on the share button correctly shows the share options. Clicking on any of those options does nothing.

They seem to be assigned a click handler within openGalleryOnItemClick

[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.

[ConfusedVorlon]

I believe the issue still exists...

[ajuzp5]

In inline mode, there is no need to explicitly add items as children. You can use the dynamicEl array with dynamic=true. If you need both an inline gallery and image markup, you can change the container prop element to another.

<div class="container" id="gallery">
  <div class="row justify-content-center">
    <div class="col col-md-10">
      <div class="inline-gallery" id="inline-gallery"></div>
      <div class="gallery-container" id="animated-thumbnails-gallery">
        <a data-lg-size="1600-1067" class="gallery-item" data-src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80" data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@tobbes_rd'>Tobias Rademacher</a></h4><p> Location - <a href='https://unsplash.com/s/photos/puezgruppe%2C-wolkenstein-in-gr%C3%B6den%2C-s%C3%BCdtirol%2C-italien'>Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>layers of blue.</p>">
          <img alt="layers of blue." class="img-responsive" src="https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80" />
        </a>
        <a data-lg-size="1600-2400" data-pinterest-text="Pin it2" data-tweet-text="lightGallery slide 2" class="gallery-item" data-src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1600&q=80" data-sub-html="<h4>Photo by - <a href='https://unsplash.com/@therawhunter'>Massimiliano Morosinotto</a></h4><p> Location - <a href='https://unsplash.com/s/photos/tre-cime-di-lavaredo%2C-italia'>Tre Cime di Lavaredo, Italia</a>This is the Way</p>">
          <img class="img-responsive" src="https://images.unsplash.com/photo-1608481337062-4093bf3ed404?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80" />
        </a>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    window.lightGallery(document.getElementById('animated-thumbnails-gallery'), {
      container: document.getElementById('inline-gallery'),
      download: true,
    });
  });
</script>

[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.