Easy Fancybox not working in Chrome and Firefox

[spamis]

I installed Easy Fancybox in early 2014 and it worked fine until recently. Now the links all work in Safari but most are not working in Chrome and Firefox. The video links do seem to work but the .pdf and url links are not. The lightbox opens but is empty. We are running WP 4.2.5 and have the latest version of Easy Fancybox – 1.5.7. I’m not sure if we have the latest Easy Fancybox Pro because I can’t seem to find the updates. The website is:

Home

The link on the home page to the newsletter (.pdf) does not load nor do most of the links on the Webit! page under the tabs. I haven’t tested every link but a random test of 10 on each browser and they work in Safari but not on Chrome and Firefox. Any suggestions?

[Rolf]

Hi spamis, the first thing I notice is that the link to the PDF files uses http while your whole site is on https. Was this changed recently? It might be a case of non-https content being blocked… Try to change the PDF link to https.

You might also want to switch to iFrame mode when displaying PDF files. This turns out to be compatible with more browsers/devices then the object embed mode that is currently used in Easy FancyBox. The next version will default to iFrame mode but until then, you can do this:

1. Switch off the PDF option on Settings > Media
2. Edit you PDF link in the Text tab and give it a class="fancybox-iframe" attribute.

[spamis]

Thanks for the response. Changing from http to https worked for the pdfs but I still have the problem with the URLs. On the Web It! page there are three toggles. In each one there are 20-30 links, some of which are videos and pdfs but most of them are URLs. The videos and pdfs work but the URLS do not. I am using class=”fancybox-iframe” in the code. The thing that I don’t understand is that the URLs work in Safari (on a Mac) but not in Chrome and Firefox. Like I said in my original post, this just started recently. I recently updated to WordPress 4.3.1 but the problem started before I updated and I did not make any updates or changes before the issue cropped up. Any ideas?

[Rolf]

Hmmm, trying the first link on that page (“Do Men and Women Talk?”) throws an error in the Chrome browser console:

Mixed Content: The page at 'https://thefamilyway.com/webit/' was loaded over HTTPS, but requested an insecure resource 'http://www.cyberparent.com/talk'. This request has been blocked; the content must be served over HTTPS.

It appears to be the same problem as with the PDF links: the content is blocked by the browser. There is nothing that can be done about it, except:
A. If the external site is accessible over https, then change the link to https (like youtube) but if not then
B. Clear the class="fancybox-iframe" from these non-https links and maybe use target="_blank" if you don’t want people leaving your site.

[spamis]

Sorry to be this long getting back. I got sidetracked. I cleared the class and inserted target=”_blank” and they still don’t work. I wonder if something could have changed on the server side but not sure. Regardless of the http vs. https, none of the links open in the lightbox except pdfs and videos. Until a month or two ago they did. Additionally, the problem is not limited to Firefox and Chrome. None of the html links work in any browser.

[Rolf]

Hi again,it looks like you deactivated Easy FancyBox.

[spamis]

I sent you an email but not sure if you will get it. I deactivated Easy Fancybox to at least have the links go the website. It is now reactivated. Interestingly, I tried a few other ways to get iframes to work and none of them did either. It almost seems that no iframes will work with the website. Funny that everything worked fine just 6-8 weeks ago.

[Rolf]

The Fall Newsletter link on https://thefamilyway.com/ opens in FancyBox just fine in my Chrome browser. Firefox too but I have not tested other browsers. Are you still having issues?

[spamis]

After many hours tinkering with this I’m pretty sure I know the source of the problem. As I said in my original post, Easy Fancybox is working with videos and pdfs but not urls from external sites. I made a test page on another site hosted on the same server using the same code from the site I’m having problems with. All of the lightboxes worked. On the site I’m having problems with, I added a url link to a web page from that site and it worked. The only difference between the two sites is that the one with problems has an ssl certificate and all pages are https. The other site has no certificate. My conclusion as well as that of support at the hosting service is that Easy Fancybox is attempting to display non-secure urls (http) from external sites on a site that requires https and they are being blocked. That probably explains why the links (like the Fall Newsletter you clicked on) that link to documents or graphics stored on the site work and others don’t. Any suggestions will be appreciated.

[Rolf]

Hi spamis, like I said in my first reply “It might be a case of non-https content being blocked…” which means this cannot be solved by FancyBox. The non-secure content is blocked by the browser. FancyBox is just an embedder, it can not force any browser to forget its own security restictions. And with good reason because embedding non-secure content from another domain could be used for some of the nasty attacks that are out there.

You must either link with https or if there is no https version of a site you want to embed, then you have no other choice but to link with http but without opening (embedding) them in FancyBox. So remove the cass="fancybox-iframe" for any remaining http links. You and add a target="_blank" if you would like to open them in a new tab.

[Author]

Posts