First click loads image on a new page, second click loads FancyBox correctly (version 2.1.5)

[Brian Liddell]

I'm using the old version of FancyBox (2.1.5), which I really like, on this 'demo' site: https://www.brill.blog/2017/08/yellow-drawer-unit

After first page load, clicking on the 'Enlarge' button loads a new page with the full sized image, instead of FancyBox.

Re-loading the page seems to fix this, and the second click loads FancyBox correctly. The other images on the page need the same treatment, but browser caching seems to help sometimes.

I don't know any JS, but I suspect I'm causing this problem by loading all JS in the page footer, combined into a single file using CodeKit. This works well for everything else on the site, and minimises page load speed.

Q1: Is loading the JS in the page footer causing this problem?

Q2: If it is causing the problem, is there any other way of getting FancyBox to work for the first click, without moving all the JS to the header?

Q3: If this can't be fixed using Fancybox version 2.1.5, would using version 3 be better?

Q4: If I use version 3, can I achieve the same layout and functionality as my present design?

Thanks in advance for all help and suggestions!