[Plugin: Easy FancyBox] Can't get Fancybox to work, images just appear @ bottom of page

If it’s not the theme as switching to the default suggests, it might indeed be something on your install or even the server level.

But what? No clue what so ever. Sorry.

Maybe if you have a link, I can tell you a bit more ??

Or you could try to find more clues yourself by installing the letest Opera browser and visiting your site with it. Then right-click anywhere and choose ‘Inspect Element’ to open the Dragonfly debugging extension. There you will have some tools that might tell you about javascript errors (see tab Errors > Javascript, clear end then reload page) occurring on the page or any files that are not loaded (see tab Network, then reload page) during the request…

Ah, hang on… there is a clue: in the title of this thread ??

If the images appear in at the bottom of the page, it suggests a CSS problem. Either the plugins CSS file is not loaded correctly or its rules are affected by other CSS rules.

Thank you so much for your quick reply!

Ah hm, a CSS problem?

Here’s a link: https://blog.joannakwong.com/2011/top-5-radio-podcasts/
I’ve updated the first two images so that they link to the image itself and should therefore take advantage of the Fancybox plugin. You’ll see that when you click to enlarge, they appear at the bottom though.

It looks to me that the plugins CSS file has loaded correctly? I’m wondering if it is affected by another CSS rule… I would certainly appreciate some ideas!

The stylesheet is not loaded even though it is called correctly in the head section. See you can see that https://blog.joannakwong.com/interior/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4 returns a Not found page in spite of the fact that the php file easy-fancybox.css.php is there.

Any rule in you .htaccess to prevent access to php files inside the plugins folder? Or other server restictions to prevent the same?

I’ve been looking, but I don’t see anything. I have another site sitting on the same server that is able to run the plugin with no problems, so I don’t think there are any server restrictions. Tried removing the .htaccess file, still nothing. .htaccess is from WP having its own directory. What else could prevent the CSS file from being read?

If it is not on the server level, it can only be on CMS level. Are there any (security) plugins running on the site that might interfere? What happens if you switch off all other plugins? What happens if you switch to the default Twenty Eleven theme for a minute?

The thing is that it is not only my plugin’s php file that is affected, but all others too. For instance see the difference between https://demo.4visions.nl/wp-content/plugins/contact-form-7/admin/edit.php and https://blog.joannakwong.com/interior/wp-content/plugins/contact-form-7/admin/edit.php

Still that will not cause a problem as long as there are no PHP files called directly like with my plugin.

Another example that stikes me as odd is the fact that your installation seems to allow public directory browsing (a security risk) and php files inside the wp-includes folder are accessible directly.

Is there another .htaccess file in one or more of the subdirectories with another set of rules? Or do the rules from the .htaccess in the root directory and the /interior/ directory conflict?

I tried https://joannakwong.com/interior/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4 which works fine… Are these two sites using the same code base and if so, is this a regular multi-site installation or did you use some kind of other method like WP Hive?

Hm, interesting. Thanks for making that observation! I changed the permissions for the wp-content folder, and that seemed to fix everything — the plugin looks to be working perfectly now. Perhaps that was the issue? I’m not sure why the permissions were off, and I’m not sure what changing them did…but that seems to solve the issue! Thank you for your help! ??

It certainly sounds like that was the problem. Good to hear you were able to solve it ??

I am having the exact same problem! The css file is *there* but when you click on the link in the view source, it goes to the 404. Only 1 htaccess file that I could find which is for the wordpress directory. What permissions did you change on the wp-content folder? I have it set up to read/write/execute for me logged in, and read/execute for others (755).

I have also changed theme to 2011 (didn’t help), checked the ‘pdf’ file in the media page. I also don’t want the first cv link to go fancybox, just the ‘see all’ link. Thinking I need to create a separate page with the css embedded? ugh.

https://www.danamattson.com/cv/

Adding this for more clues: the css.php renders as a css file if I go into the WordPress admin and edit the plugin. I copied what was there and saved it as a .css file, linked to it in a custom header, and it works. Not the ideal solution, still curious as to why the css.php file won’t create what it is supposed to.

yodielay,

The file permissions should be fine like the are now. Are you using one of the many security plugins? If so, it might the security plugins that is blocking direct access to php files inside the /wp-content/plugins/ folders.

It strikes me as VERY odd that opening the file easy-fancybox/easy-fancybox.css.php in the WP plugin editor renders any CSS content. Are you sure you did not open easy-fancybox/fancybox/jquery.fancybox-1.3.4.css ?

This last file is the CSS content that you seem to have copied. A resourcefull solution (you could also include that stylesheet directly) but it will break display of FancyBox in IE6. If you care about rendering in IE6 (still) then you need to adapt some of the URLs in the stylesheet to become absolute instead of relative URLs.

If you do not care about IE6 (as usage of this broken old browser is declining every day, I’m glad to say) then you should be fine like it is now…

EDIT: example of an incompatible security plugin https://www.ads-software.com/support/topic/plugin-easy-fancybox-incompatibility-with-better-wp-security-plugin

Hi RavanH,
Thanks for the reply. No security plugins. I also tried deactivating nextgen and cross slide cross fade, to no avail.
You’re right, I was confused I guess because the rendered joannakwong css.php file link above looks the same as the code in the jquery.fancybox css. I didn’t notice that css file on the server, because it’s in a different directory.
The only link on the page to anything in the fancybox directory is a .js file.
So I guess I could just add the link to the existing css file instead of creating my own, but I’m wondering, why there is no link to this jquery.fancybox css file on the page, but to the css.php file one directory up? Is there a relationship between these files? I’m more of a designer and don’t always understand everything going on in php.

I don’t care about IE 6, Microsoft declared it dead recently.

The file easy-fancybox.css.php actually processes the standard /fancybox/jquery.fancybox-1.3.4.css file to include some changes:

1. the URLs are adapted to absolute paths (instead of relative ones) to prevent problems in IE6 and 7 plus
2. the CSS is deflated (spaces and comments are removed) to save some bandwith

You could do without these two things…

Ah, that is what I thought. Why it’s not working on my server remains a mystery. I will see how it looks in IE. (I’m on a mac, so always a bit of a pain to do.)

Really appreciate your timely response. So many forums I’ve posted questions and they never get answered! ??