Fancybox shows up at the bottom of a page

Well, me and friends of me that use the plugin have the same problem.

You click on the gallery picture, and instead of opening that picture, the picture appears at the bottom of the page.

inspection: When you click on the page, then it works in 80% of the cases, but when you press F5 and afterwards click on an thumbnail, then this error happens.

I had this problem.

The solution to this problem, in my case, was to include

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "https://www.w3.org/TR/html4/loose.dtd ">

in header.php.
I had forgotten to include the Doctype.
Hope that helps

I have the same problem in a new site under development. Plugin (v 1.5.2) is working fine on 2 other sites, with the same settings. And it was working fine a couple of weeks ago. I followed all the trouble-shooting tips – 2011 theme, disabling all other plugins – still doesn’t work. I find this in the header “https://guiomargiraldo.com/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.5”, and when I load it in browser I get this – “
<b>Deprecated</b>: Function split() is deprecated in <b>/home/content/55/11335155/html/wp-content/plugins/easy-fancybox/easy-fancybox.css.php</b> on line <b>51</b>

<b>Warning</b>: Cannot modify header information – headers already sent by (output started at /home/content/55/11335155/html/wp-content/plugins/easy-fancybox/easy-fancybox.css.php:51) in <b>/home/content/55/11335155/html/wp-content/plugins/easy-fancybox/easy-fancybox.css.php</b> on line <b>55</b>

I’m not a coder and not surer what to do with this. Your trouble shooting tips say it may be an incompatibility with the servers PHP setup, but don’t know what to do about it.
Please help! I love the plugin.

Embarrassed to say I just discovered that this seems to be a browser problem. Images appear at bottom of the page only in Chrome. Working fine in Safari, Firefox, and Opera. What’s more confusing, it’s working fine in Chrome on another site I built.
It’s also working on IE10.
One other note about this. In media settings, in Chrome, I can’t change Window/Appearance settings. I can’t change background color, or border color, or opacity. Don’t know if it’s related to the problem.
Site is under construction (https://guiomargiraldo.com/products/designs/) but can be seen when you login with guest/guest.

Hi all, usually this effect appears when the stylesheet is missing or broken… However, as Anna F kindly mentioned, a missing DOCTYPE can have similar results in certain browsers (notably IE).

@izinux your server responds to the request for /wp-content/plugins/easy-fancybox/easy-fancybox.css.php (the dynamic stylesheet) with presenting the file as download instead of parsing it as a PHP file. It might be that your server configuration is thrown off course by the ‘.css’ that is part of the file name. Are you on a shared hosting account then you might contact your provider with this issue. If you are on a (virtual) private server then you should configure the web server yourself to treat files that end with .php as PHP files even if there is ‘.css’ in their name…

@simonsov can you share a link?

@tglass118 looking at your site in Chrome, I see no issue. About the ‘Depricated’ message, you should disable the public output of errors and notices. If you cannot, you can alternatively open the file easy-fancybox.css.php (use the WordPress plugin editor) and replace the part
split( ", ", $if_none_match );
with
explode( ", ", $if_none_match );
(notice it is just the word ‘split’ that is replaced, nothing else)

Thanks very much. Meanwhile, I reset Chrome settings to default and the issue disappeared. Not sure why. Enabled the same extensions and still no problem. I appreciate your attention.

Hi,
I am also having the same problem where the photo loads at the bottom of the page. I can’t figure out what’s causing it – but it’s consistently happen with every lightbox plugin I’ve tried :/
Here’s a link to an example:
https://kaitlynrich.com/kimchi-batch-10/

thanks for any help or insight!

Hi Kaitlin, I’ve seen this kind of behaviour before and it is a problem with either your theme markup or stylesheet conflict. What happens is this: the lightbox script tries to determine the height of the viewport, then create the overlay and place the image in the center but the height can for some reason not be found. The result is wrong calculations by the script placing the media far too low and depending on other settings sometimes constantly outside of reach for human eyes. The problem is finding the cause. I would start with fixing the error in the themes doctype declaration as reported by https://validator.w3.org/check?uri=http%3A%2F%2Fkaitlynrich.com%2Fkimchi-batch-10%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 … the lang and prefix attributes should be for the html tag, not the doctype.

Hi RavanH –
Thanks so much for your help! Yup, fixing the doctype did it. Also, thanks for posting the link/error from the validator as I haven’t used that before, but will moving forward.

Kaitlyn