Same Non-Working Results as on Fancybox's own site!

[jdmba]

Greetings,

I have been using Fancybox 3, but cannot get Fancybox 4 to work. When I do the console.log test, it shows Fancybox is loaded, but it doesn't trigger for images, even though the a href is coded properly.

The oddest thing, is that even the Fancybox 4 site produces the same failure (so it's not my coding). On the page
https://fancyapps.com/docs/ui/fancybox/plugins/image

The first image is an example of single, which is fine for my use. When you click on that image, you get the same results you would get if there was no fancybox. A single image fills the screen with no controls, and ESC doesn't work.

So I am basically getting the same exact results on my site that the fancybox page is getting on that example.

Rather than ask for help on my site, can anyone figure out why that trigger isn't working on Fancybox's own site? I will assume whatever fixes that will fix mine.

Thanks!

[yesminee]

I have no solution in my hands, but need to tell that im facing the same problem right now..

[fancyapps]

Hi,

What devices / browsers do you use? I've tested on any major browser on both PC and Mac, and everything works fine for me, so I'm confused. I would be grateful for any further information.

[jdmba]

Absolutely - and I would appreciate any help.

That image on your page (and all images on my pages), does not trigger fancybox (but rather goes full screen with the image, a magnifying glass to increase one size, and requires a browser-back to get back to page) on:

Google Chrome - Version 92.0.4515.131 (Official Build) (64-bit Windows)

It seems to be working now on
Firefox 91.0 (64-bit Windows)
Edge 92.0.902.73 (Official build) (64-bit)

It is completely possible that an add-on may be interfering with fancybox, although only the "single" item on that page doesn't work. The gallery below it works fine.

As for my (and maybe others problem), even on the working browsers, I can not get Fancybox to work.

I have

<script src="fancybox4/fancybox.umd.js"></script>

and then coded

<a data-fancybox="gallery" href="....

Nothing happens. does show that both "sources" were loaded, and, following the instructions on the site, I put in a console which trigges

test.htm:49 Fancybox Test - Start
test.htm:50 ƒ i(t){var n,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return o(this,i),(n=e.call(this,x(!0,{},tt,a))).state="init",n.setItems(t),n.bindHandlers(),n.attachPlugins(i.Plugins),n.trigger…
test.htm:51 Fancybox Test - End

Same if I use the CDN.

Is there any other debugging thing I can try?

[fancyapps]

So, you are saying that, even if you copy/paste sample code from the docs, it does not work for you? Like this - https://jsfiddle.net/4gtyp9so/ - works fine for me on any device/browser.

Could you, please, 1) open the developer tools (F12), open the settings (F1) and check "Preserve log upon navigation" in the "Console" section, 2) then visit the site again to check for any JavaScript message?

If the image opens in a browser (and not inside Fancybox), it means that a JS error has occurred, but I can't reproduce any issues, so I hope to receive a clue from you. Thanks!

[jdmba]

The JSFIDDLE works perfectly fine, as does copying the code to a separate html and accessing it.

So I went back to https://fancyapps.com/docs/ui/fancybox/plugins/image

That first image STILL does not work. I hit F12 and F1 to preserve the log, and reloaded that page. No Javascript errors show up, but that image (the one labeled single) does not trigger in Chrome.

I will see if I can build my page around the jfiddle to see if I can get the images to work that way.

EDIT:

1. I have isolated my problem - MY problem is that FancyboxUI will NOT work if the script calling the JS is in the HEAD section. Fancybox3 allowed it, but Fancybox4 does not. If I move the JS call to the first line in the BODY section, it works. Perhaps you might consider testing and if you agree, then updating the installation instructions, with that note (since it worked in 3)?!?!?

2. I have isolated the bug on your site. You have a target="_blank" on that entry. Remove that and it will work. I removed it from the developer tools and that solved it.

Anyway, thank you!

[fancyapps]

This is very strange. The only difference between JSFiddle demo and the code used on the homepage is that the homepage uses React. Could this be the cause of the problem? In fact, the homepage is created using Docusaurus v2 (https://docusaurus.io/), and the build process automatically adds target="_blank" and rel="noopener noreferrer" attributes to the links (I think this is the reason - https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/). So I replaced the href attribute with data-src for the links and it should work now for you. But it doesn't explain why the problem is happening to you and not to others. I suspect that your browser opens link before Fancybox is able to prevent default action.

Also, make sure you are using the latest Fancybox.

[jdmba]

Thank you - I solved the problem for me as above. Once I moved the JS out of the HEAD section and into the BODY section it started to work. As far as I am concerned, that's good enough for me. If that helps you debug something, all the better; and if it is a requirement that the JS calling Fancybox MUST be in the BODY and NEVER in the HEAD, then please consider putting that in the instructions, as those of us coming from FB3 may have the call in the HEAD (where it worked) and be perplexed as to why FB4 won't work.

Thanks!