Easy FancyBox plugin for WordPress websites gives you a flexible and aesthetic light box solution for just about all media links on your website. Easy FancyBox uses an updated version of the traditional FancyBox jQuery extension and is WP 3+ Multi-Site compatible. After activation you can find a new section FancyBox on your Settings > Media admin page where you can manage the media light box options.
After activation, all links to JPG, GIF and PNG images are automatically opened in the FancyBox Mac/Gnome-style lightbox that floats over the web page.
Supported media and content types:
- All common image formats including webp
- Hosted video on Youtube, Vimeo and Dailmotion
- PDF files (embed with object tag, in iframe or in external Google Docs Viewer)
- SWF (Flash) files
- SVG media images (thanks to Simon Maillard)
- Inline HTML content (see instructions in the FAQs)
- External web pages (see instructions in the FAQs)
- WordPress Galleries (option “Link to” must be set to “Media File”)
- NextGEN galleries (see instructions in the FAQs)
- Image maps
- WordPress menu items (see instructions in the FAQs)
- Jetpack Infinite Scroll
- Modal window option (see instructions in the FAQs)
- Automatic detection of media file links
- Automatic detection of galleries
- Popup on page load optional (see instructions in the FAQs)
- Fade or Elastic popup effects
- Styling options for light box overlay (color and opacity) and window (border size and color)
For advanced options and priority support, there is a Pro extension available. See Pro features below.
See FAQ’s for instructions to manage YouTube, Dailymotion and Vimeo movies (and similar services) and tips to make inline content display in a FancyBox overlay.
Visit FancyBox for more information and examples.
- Priority support on dedicated forum
- Slideshow effect for galleries (autorotation)
- Spotlight effect for the light box overlay
- FacetWP, Gravity Forms and TablePress compatibility
- More styling options: rounded corners, inline content background and text colors
- More automatic popup options: triggered by URL hash, first link by media type, hide popup after first visit
- Pass dedicated light box setting per media link via link class (see Metadata instructions in the FAQs)
- More elastic (easing) popup effects on open and close
- Show/hide image title on mouse hover
- Fine-tune media link and gallery autodetection to match your theme source markup to allow galleries per post for example
For these additional features, you need to install the Pro extension alongside this free plugin.
- Outbound links or Downloads tracking in some of the stats plugins can interfere with FancyBox. Disable such option or exclude links manually with a class (see instructions for SlimStat below)
- Most plugins and themes that already include a light box script. 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.
- Any theme that is missing the obligatory
<?php wp_footer(); ?>call in the footer.php template.
- jQuery Updater moves jQuery to version 2+ which is incompatible.
- All in One SEO Pack and Analytics for WordPress with outbound link tracking enabled. Disable that feature.
- WP Slimstat with Track Outbound Clicks enabled, will break the light box effect on some browsers. Adding
fancybox(or any of the other classes like
fancybox-youtube,fancybox-iframe,fancybox-inlinedepending on which media should be displayed in FancyBox) to the Do Not Track field is reported to solve the issue. Slimstat also might interfere with the 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.
- Google Analytics for WordPress converts links like
href="http://yoursite.url/page/#anyID", disabling inline content shown in FancyBox.
- 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.
- WordPress Firewall 2 blocks access to image files needed for proper 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 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 and/or some kind of positioning issue with auto-centering.
- 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 options 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 better: 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
- 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
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:
- 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 URLat the Link option instead of
Page URL. You’ll have to manually edit your old posts if you have always inserted images with
Page URLbefore, FancyBox cannot do this for you.
- 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
fancyboxto trigger FancyBox.
General trouble shooting steps
- Switch off all other plugins and switch your sites appearance to the default Twenty Seventeen theme. FancyBox should work now. If so, continue with the next step. If not, re-install the plugin and verify the basic steps above.
- 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.
- 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
- See known theme conflicts above first, then continue with these following steps.
jquery.fancybox.min.js?ver=x.x.xnear the closing
</body>tag. There should also be a
easy-fancybox.min.css?ver=x.x.xin the head section… If it’s not there, your theme is really out of date. Consider switching to a new theme fast!
jquery.min.jsin 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
- 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.
Plugin Incompatibility checks
- 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.
jquery.min.jsin the page source code. If you find more than one, try to find out where that comes from.
- 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.
Example image with Overlay caption. This is the default way Easy FancyBox displays images. Other options are Inside and the old Outside.
Example of a YouTube movie in overlay.
Frequently Asked Questions
- Installation Instructions
- WordPress MU / WordPress 3+ in Multi Site mode
- What’s FancyBox?
- Which version of FancyBox does this plugin use?
- I installed the plugin. What now?
- Where is the settings page?
- Help! It does not work…
- Will a WordPress gallery be displayed in a FancyBox overlay?
- The lightbox does not look good on mobile devices. What can I do about that?
- Can I make a slideshow from my gallery?
- Can I exclude images or other links from auto-attribution?
- Can NextGEN Gallery work with Easy FancyBox ?
- Can I use ONE thumbnail to open a complete gallery ?
- Can I play YouTube, Dailymotion and Vimeo movies in a FancyBox overlay?
- I want that ‘Show in full-screen’ button on my YouTube movies
- Can I show a Youtube playlist in FancyBox?
- Can I link a NextGEN thumbnail to a Youtube movie in FancyBox?
- Can I create a gallery of Youtube thumbnails which open in FancyBox?
- Can I display web pages or HTML files in a FancyBox overlay?
- Can I show PDF files in a FancyBox overlay?
- Can I play SWF files in a FancyBox overlay?
- How do I show content with different sizes?
- The flash movie in the overlay shows BELOW some other flash content that is on the same page!
- How can I display INLINE content in a FancyBox overlay ?
- Can I display a contact form in FancyBox?
- Can I make an image or hidden content to pop up in FancyBox on page load?
- Can I have a modal window ?
- Can I make a menu item open in a FancyBox overlay ?
- How can I make AJAX loaded content be seen by FancyBox ?
- Is Easy FancyBox multi-site compatible?
Latest version: Download Easy FancyBox 1.8.3 [zip]
Downloaded 1995179 times.
Rated 4.6 out of 5 stars with a total of 155 votes on WordPress.org »