fancyapps / ui

A library of JavaScript UI components, includes the best lightbox - Fancybox5
https://fancyapps.com/
Other
722 stars 91 forks source link

Image, that open when loading the page with #hash, immediately after opening closes #645

Closed sunwayru closed 1 month ago

sunwayru commented 2 months ago

Describe the bug

Single image, that open automatically when loading the page with #hash, immediately after opening closes. All works fine wight groups, bug only for single images.

Reproduction

There was no error in 5.0.30, but bug appears in 5.0.31.

I use code example from https://fancyapps.com/fancybox/plugins/hash/ for automatically open single image in fancybox

    const $singles = document.querySelectorAll('.modalview');
    if ($singles.length) {
        $singles.forEach(function ($el, idx) {
            //...
                el.addEventListener('click', function (e) {
                    e.preventDefault();
                    Fancybox.show([{ src: fi[1], caption: fi[2] }], { slug: 'i-' + (idx + 1) });
                });
            //...
        });
        var startSingleFromUrl = function() {
            if (!Fancybox.getInstance()) {
                const { hash, slug, index } = Fancybox.Plugins.Hash.parseURL();
                if (hash && slug === 'i') {
                    if ((index - 1) < $singles.length) {
                        const fi = getForFancybox($singles[index - 1]);
                        if (isFancyboxViewerEnabled(fi[1]))
                            Fancybox.show([{ src: fi[1], caption: fi[2] }], { slug: 'i-' + index });
                    }
                }
            }
        }
        window.addEventListener('hashchange', startSingleFromUrl, false);
        startSingleFromUrl();
    }

Additional context

No response

fancyapps commented 2 months ago

Hi,

Sorry, but I can't reproduce any issue. So, please, share a live page/demo where your issue could be inspected.

sunwayru commented 1 month ago

Live demo

https://stackblitz.com/edit/stackblitz-starters-vkj1tk?file=index.html Used version 5.0.30 Open preview in new tab Click on image (in url appers hash) Refresh page (F5), fancybox opens at page load. All works fine!

Change version to 5.0.32 or last 5.0.36 Open preview in new tab Click on image (in url appers hash) Refresh page (F5), fancybox opens at page load and immediately closes. Bug detected!

fancyapps commented 1 month ago

First, it is actually working fine to me.

Since you've written so much code that duplicates the functionality of the Hash plugin, simply disable the Hash plugin to eliminate any interference.

sunwayru commented 1 month ago

If I disabled Hash plugin, then gallery not starts from url. Bug not fixed, he appears between 5.0.30 and 5.0.32. Please open https://stackblitz.com/edit/stackblitz-starters-vkj1tk?file=index.html Open preview in new tab Click on image (in url appers hash) Refresh page (F5), fancybox opens at page load and immediately closes. I need the pictures with the class "modalview" open in the modal view. In 5.0.30 my code works, in last release - not. Please, change the code on stackblitz to to achieve this goal

fancyapps commented 1 month ago

If you're expecting any changes, then sorry, that's not planned and in the next major release the Hash plugin will be removed, because after months of wasted work I've come to the conclusion that it's simply not possible to make it work reliably in all possible situations.