Fancybox is closing immediatelly afer opening in firefox 122 on android

[TomNovy81]

Describe the bug

When I open fancybox automatically on firefox mobile version it si closed immediately on other browsers and devices it is ok, only here is the problem. Sometimes it makes on chrome browser in mobile too, on desktop it is always ok.

Reproduction

link in html code:

code in script and document ready:

$(document).ready(function(){ //iframe4

Fancybox.bind("[data-fancybox='iframe4']", { defaultType:"iframe", groupAttr:"fancy_test4", });

if (document.querySelector('#iframe4') !== null) { document.getElementById('iframe4').click(); }

}); //$(document).ready(function()

Additional context

No response

[fancyapps]

Hi,

Let's take a look at your code first:

1) Do you really need jQuery? Because it is not needed for Fancybox v4+ 2) Don't put Fancybox.bind() inside $(document).ready(), it's completely unnecessary. 3) Do you really need this weird code - document.getElementById('iframe4').click();? Use appropriate API method, like this:

Fancybox.show([
  {
    src: "https://fancyapps.com/iframe.html",
    type: "iframe",
    preload: false,
    width: 600,
    height: 300,
  },
]);

Please, disable the Hash plugin (by setting Hash: false option) to see if that helps.

[TomNovy81]

my solution is flexible for whole system, whenever I need open automatically fancybox in the system for various link, I use that id in the link and it will open content in fancybox, your solution has "sticky" src and I must create for each situation new javascript code with new src, so do You have any flexible solution that opens fancybox with various src (meaning adding external)?

[fancyapps]

I can think of two options:

1) Grab the value of href attribute from your element and use it inside Fancybox.show() method. Example:

const iframeSrc = document.querySelector('[data-fancybox][data-type="iframe"]').getAttribute("href")

if (iframeSrc) {
  Fancybox.show([
    {
      src: iframeSrc,
      type: "iframe",
    },
  ]);
}

https://jsfiddle.net/9kxbh4dp/

2) Start Fancybox using another method (https://fancyapps.com/fancybox/getting-started/#additional-uses). Example:

Fancybox.fromSelector('[data-fancybox][data-type="iframe"]');

https://jsfiddle.net/eh9uzd4c/

TIP: You can use whatever selectors you like for the corresponding Fancybox methods.