"Refresh" Gallery, prevent multiple instances?

[jasongrishkoff]

I've got an image gallery that a user can upload images to. When they upload a new image, I want to "refresh" the gallery so that it works and includes this new image. But this seems to result in multiple instances of the same gallery -- so that when I click an image, it often takes two or three clicks before it closes because the image has opened three times.

Is there a good way to "reload" the gallery?

new LuminousGallery(document.querySelectAll('.gallery-image'))

[frederickfogerty]

Hey Jason 👋

I'm from Imgix and I'll be maintaining this repo from today onwards. It currently seems that there is no way to "reload" the gallery or any support for preventing multiple instances. We may look to add these in the future, but for now, I see that there is a .destroy() method. Perhaps, it may work to destroy the instance and then create a new one when you want to refresh the gallery? Does this workaround make sense and work for you? Please let me know.

Fred, Imgix

[sartor]

destroy method is empty in current LuminousGallery implementation

[durasj]

I needed to destroy the gallery, so in my project, I've pretty much called

instances.forEach(instance => instance.destroy())

There are no extra event listeners added as far as I can tell, so it should do the job. I've opened a PR #70 for that. Let me know what you think @frederickfogerty.

Thanks

[dalpras]

Using a custom event, you can activate and destroy a Gallery also inside an ajax call at document level.
In this way every time there's a click on a image, the gallery is created and when it's closed the gallery is destroyed.

        var e = new CustomEvent('luminousClick');
        document.addEventListener('click', function (event) {
            var trigger = event.target.closest('[data-action="luminous"]');
            if (trigger) {
                event.preventDefault();
                event.stopImmediatePropagation();
                var gallery = new LuminousGallery(document.querySelectorAll('[data-action="luminous"]'), {
                    arrowNavigation: true
                }, {
                    openTrigger: 'luminousClick',
                    onClose: function () {
                        gallery.destroy();
                    }
                });
                trigger.dispatchEvent(e);
            }
        });

[sherwinski]

Closing as there hasn't been much activity on here lately and it looks like several answers have been provided.