Default Fancybox instantiated prior to custom Fancybox setup?

[ts-mz]

Hi, I have a setup in which I use two differerent fb setups for different screen sizes, and generally, this works just fine with -
Fancybox.bind( '[data-fancybox="gallery"]', {...}, and on: { initLayout: ( fancybox ) => {...} . The fancybox setups are defined in a jQuery( document ).ready() function.

When a fancybox is opened, the the current slide will be reflected in the URL, say -

https://site.com/page#gallery-3

for the third image in the gallery.

I realized that it is possible to load the page using that url (with the hashtag) without having to click on a gallery link before. If the gallery is opened first by click on the thumbnail image, everything works as intended, and loading the page by url will always load the correct version of the fancybox depending on screen size.

However, if the URL is used in the address bar of a new tab or window, the fancybox will load, show the correct image full screen, and be functional, but use a completely different - probably default? - set of options regardless of the screen size. Eg, toolbars and thumbnails will show despite being deactivated in the custom setup. The options defined in the jQuery function are disregarded.

Apparently, an instance of fancybox is active before the options are altered in my code according to screen size in "jQuery( document ).ready()"), and that fancybox is used to show the content when the URL is loaded in a new tab/window, and the custom options are then not properly intantiated until the default box is closed and a/the fancybox is reopened by click on a trigger image. After that, everything will work as intended again.

I would like for the Fancyboxes opened in a new tab/windows by URL to also use the correct setup options according to the screen size. Is there any way to do this? Is this a problem caused by using jQuery?

Thanks for a brief reply!

[fancyapps]

Hi,

Do not use jQuery( document ).ready(), it is totally redundant. Fancybox attaches default click handler to any element having data-fancybox attribute. Simply set your custom options right after including fancybox JS file.

[ts-mz]

Thanks for the info =)