WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Easy FancyBox

Easily enable the FancyBox jQuery extension on just about all media links. Multi-Site compatible. Supports iFrame and Flash movies.

Known Issues

General

  • Outbound links or Downloads tracking in some of the stats plugins can interfere with FancyBox.
  • All plugins and themes that do not use wp-enqueue-script properly to include script libraries or extension files. Continue reading to see if you are using one of the know ones or follow the troubleshooting steps to find out what is conflicting on your site.
  • All themes that are missing one or both of the obligatory <?php wp_head(); ?> in the header.php and <?php wp_footer(); ?> call just before the closing </body> tag in their footer.php template or elsewhere.

Plugin conflicts

  • jQuery Updater moves jQuery to version 2+ wich is incompatible.
  • All in One SEO Pack and Analytics for WordPress with outbound link tracking enabled. Disable that feature.
  • Better WP Security randomly changes version numbers in linked file URLs, breaking the FancyBox stylesheet. Disable the option "Display random version number to all non-administrative users" in the Better WP Security settings.
  • By default Google Analytics for WordPress converts links like href="#anyID" to href="http://yoursite.url/page/#anyID", disabling inline content shown in FancyBox.
  • WordPress Firewall 2 blocks access to image files needed for porper display of the FancyBox overlay in older IE and other non-css3 browsers.
  • WordPress Amazon Associate: A script provided by Amazon and the FancyBox script are incompatible. Disabling Product Preview in the WP - Amazon > Settings page should work around the issue.
  • WP Slimstat plugin interferes with the Easy FancyBox script for YouTube url conversion. When clicking a Youtube link, the movie opens in an overlay as it is supposed to but immediately after that, the complete page gets redirected to the original YouTube page. Adding a class="noslimstat" to the link is reported to work around the issue.
  • When using WP-Minify, the javascript files like fancybox/jquery.fancybox-X.X.X.pack.js and others need to be excluded from minification.
  • When using W3 Total Cache, minification needs to be switched off. You can try to run WP-Minify alongside W3TC to be able to exclude fancybox files (as suggested above) ans still have page speed benefit from minification.
  • Both the uBillBoard and Camera slideshow have their own easing script hard-coded which conflicts with the one in Easy FancyBox. The only way around the conflict is to set both the Easing In and Easing Out options on your Settings > Media page to Swing.
  • WP Supersized uses the Animate Enhanced jQuery extension which causes a conflict with the Easing extension used by FancyBox resulting in a 0px sized lightbox frame. Plus some kind of positioning issue with auto-centering. Sridhar Katakam wrote about a work-around on http://websitesetuppro.com/getting-easy-fancybox-to-work-properly-when-wp-supersized-is-active/.

Theme conflicts

  • Twenty Eleven uses a very high stacking order (z-index: 9999) for the top image and menu div, resulting in FancyBox content being partially hidden under the page header. Work-around: Use the plugin Custom CSS or Jetpack and add on the new Appearance > Edit CSS admin page the rule:
#branding {
z-index:999;
}
  • Older versions of Elegant Themes have FancyBox integrated in a hard-coded way, making them incompatible with Easy FancyBox. In the latest versions of these themes, there is an option to disable the included FancyBox. Use this option to make your theme compatible with Easy FancyBox :)
  • The Mystique theme has two option called "Lightbox" and "Optimize website for faster loading" that will break Easy FancyBox. Disable both in Mystique's options > Advanced.
  • Imbalance and other themes that uses the Photo Galleria jQuery extension: turn of the JSGallery option.
  • Themes like Envisioned, Chameleon and many others have FancyBox baked in. There is no solution other than stripping the theme of all FancyBox related code or disable the plugin and use the theme provided version...
  • Themes based on the Thesis framework might see issues in IE 8, for which a hack has been proposed

Other

  • When showing an iframe as inline content in FancyBox -- not advised, use fancybox-iframe instead! -- the iframe will become blank after opening and closing it. The solution is to link directly to the iframe source and use class="fancybox-iframe" instead.
  • Embedded flash content that has no wmode or wmode 'window', is displayed above the overlay and other javascript rendered content like dropdown menus. WordPress does NOT check for missing wmode in oEmbed generated embed code. Since version 1.3.4.5, the missing wmode is added by this plugin for WP (auto-)embeds but not for other user-embedded content. Please make sure you set the wmode parameter to 'opaque' (best performance) or 'transparent' (only when you need transparency) for your embedded content.

Trouble Shooting

If, after activation, your images do not open in a FancyBox overlay, there are several possible reasons. Some are easily solved, others are more difficult. Follow these basic checks to make sure everything is in place:

Basic checks

  1. Make sure that thumbnail images are linked directly to their larger counterpart, not to a dynamic WordPress page that includes the larger image. This means when you insert an image in your posts or pages, you need to select File URL at the Link option instead of Page URL. You'll have to manually edit your old posts if you have always inserted images with Page URL before, FancyBox cannot do this for you.
  2. Make sure you have all the needed media and their Auto-detect options activated on your Settings > Media admin page. If you are using images in other formats that JPG, GIF or PNG, you need to add the extensions to the Auto-detect field for Images. Please note: The image file names must actaully end with that extension! This means that if you have an image file that (for example) has no extension (does not end with .jpg or any other) even if is in JPEG compressed format, the FancyBox will not be able to detect is as an image. You will need to manually give those links the class fancybox to trigger FancyBox.

General trouble shooting steps

  1. Switch off all other plugins and switch your sites appearance to the default Twenty Eleven theme. FancyBox should work now. If so, continue with the next step. If not, re-install the plugin and verify the basic steps above. Then open any page on your site and view the source code by right-clicking on an empty section and selecting 'View source...' (or similar). Find in the <head> section a referenced stylesheet easy-fancybox.css.php?ver=x.x.x and copy the full URL. Paste that URL in the address bar of a new browser tab to open the stylesheet directly. It should open without any errors and show a lot of stylesheet rules on a single line. If not, there is some incompatibility with your servers PHP setup. Please ask on the Easy FancyBox WordPress forum or go to the development site.
  2. Switch back to your original theme and check if FancyBox is still working. If so, continue with the next step. If not, See the Theme Incompatibility checks below.
  3. One by one, switch each plugin that you had running before back ON. Keep checking to see at which point FancyBox starts failing and you will hve found the conflicting plugin.

Theme Incompatibility checks

  1. See known theme conflicts above first, then continue with these following steps.
  2. Make sure your theme is capable of placing the needed javascript and css in the page header. Open any page on your site and view the source code by right-clicking on an empty section and selecting 'View source...' (or similar). There you will need to check of there are any references to javascript files like jquery.fancybox-x.x.x.pack.js?ver=x.x.x in the <head> section. There should also be a easy-fancybox.css.php?ver=x.x.x and some javascript that starts with <!-- Easy FancyBox 1.3.4.9 using FancyBox 1.3.4 - RavanH (http://status301.net/wordpress-plugins/easy-fancybox/) -->... If it's not there, your theme is really out of date. Consider switching to a new theme fast!
  3. Check if your theme wraps post/page content in a div with class hentry. If it doesn't, you might need to edit the option Section(s) on Settings > Media to reflect the class (or ID) name of the div that holds post/page content.
  4. Make sure that your theme does not load the main jQuery library file more than once. Look for references to javascript files like jquery.js?ver=x.x.x or jquery.min.js in the page source code. If you find more than one, try to find out in which theme template file that second reference is hard-coded and remove that line. Usually in header.php or footer.php
  5. Check if your theme loads another or the same lightbox script. Look for references to Thickbox, Prettyphoto, Lightbox2, Colorbox or FancyBox script files or code. These are very likely to cause the incompatibility and you will either have to remove these by hacking your theme or switch to another theme.

If you still do not get to see your images in FancyBox, ask on the Easy FancyBox WordPress forum or go to the development site

Plugin Incompatibility checks

  1. If you followed the general trouble shooting steps above, you should now be aware of which plugin is conflicting whith Easy FancyBox. See known plugin conflicts above first. If the plugin and its solution are not mentioned there, continue with the following steps.
  2. Make sure that the plugins do not make the main jQuery library file load more than once. Look for references to javascript files like jquery.js?ver=x.x.x or jquery.min.js in the page source code. If you find more than one, try to find out where that comes from.
  3. Check if your theme loads another or the same lightbox script or any other of the needed jQuery extensions like jquery.easing or jquery.mousewheel. Look for references to Thickbox, Prettyphoto, Lightbox2, Colorbox or FancyBox script files or code. These are very likely to cause the incompatibility and you will have to either find a setting in the other plugin to switch OFF the use of the conflicting script (possible in NextGEN for example, see under Advanced below) or choose between the two conflicting plugins.

Translation

  1. Install PoEdit on your computer.
  2. Go to this plugins /languages/ directory.
  3. If there is no .po file that corresponds with your language yet, rename the template translation database easy-fancybox-xx_XX.po by replacing the xx with your language code and XX with your country code.
  4. Open the .po file of your language with PoEdit.
  5. Go to Edit > Preferences and on the tab Editor check the option to compile a .mo database on save automatically. Close with OK.
  6. Go to Catalog > Settings and set your name, e-mail address, language and country. Close with OK.
  7. Go to Catalog > Update from POT-file and select the main easy-fancybox.pot file. Then accept all new and removed translation strings with OK.
  8. Now go ahead and start translating all the texts listed in PoEdit.
  9. When done, go to File > Save to Save.
  10. Upload the automatically created easy-fancybox-xx_XX.mo database file (where xx_XX should now be your language and country code) to the plugins /languages/ directory on your WordPress site.
  11. After verifying the translations work on your site, send the .mo file and, if you're willing to share it, your original .po file to ravanhagen@gmail.com and don't forget to tell me how and with what link you would like to be mentioned in the credits!

Requires: 3.3 or higher
Compatible up to: 4.0
Last Updated: 2014-7-17
Downloads: 550,050

Ratings

4 stars
4.5 out of 5 stars

Support

28 of 43 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

5 people say it works.
3 people say it's broken.

100,1,1
67,6,4 100,3,3 100,1,1 100,1,1 33,3,1 100,2,2 80,5,4 75,4,3
100,2,2
67,3,2 100,1,1
100,3,3 100,1,1
100,1,1 100,1,1 100,1,1
0,1,0 100,2,2 88,8,7
67,3,2
60,5,3
100,10,10
100,1,1
100,2,2 100,1,1
50,2,1 89,27,24
70,10,7
95,41,39
94,17,16 100,1,1
83,6,5
79,24,19
58,19,11
80,15,12 100,1,1 100,1,1
100,18,18 83,6,5
75,4,3 100,2,2 67,6,4 100,1,1 100,1,1
50,10,5 100,1,1 100,5,5
0,1,0 67,6,4
83,6,5
71,7,5
100,7,7
100,1,1
0,1,0
63,8,5