Easy FancyBox for WordPress

Easily enable the classic FancyBox light box on just about all media links: Images, YouTube, Vimeo, Dailymotion, PDF, inline and iframe content.

Description

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.

GDPR / EU Privacy

This plugin does not collect any data and does not set any browser cookies. However, the PRO version offers an option to disable the automatic popup after the first visit, which needs a browser cookie. This cookie stores the visitors first website visit timestamp and path on the client side. It is not shared nor is any data stored server side or elsewhere.

FEATURES

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)
  • External web pages (see the FAQs)

Also supports:

  • WordPress Galleries (option “Link to” must be set to “Media File”)
  • NextGEN galleries (see instructions)
  • Image maps
  • WordPress menu items (see instructions)
  • Jetpack Infinite Scroll

Additional features:

  • Modal window option (see instructions)
  • Automatic detection of media file links
  • Automatic detection of galleries
  • Popup on page load optional (see instructions)
  • 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 basic questions or the advanced FAQ’s for advanced instructions to manage YouTube, Dailymotion and Vimeo movies (and similar services) and tips to make inline content display in a FancyBox overlay.

Get support on the WordPress forum.

Visit FancyBox for more information and examples.

PRO FEATURES

  • 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)
  • 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.

KNOWN ISSUES

See a list of known plugin and theme conflicts here

Contribute

If you’re happy with this plugin as it is, please consider writing a quick rating or helping other users out on the support forum.

If you wish to help build this plugin, you’re very welcome to translate Easy FancyBox into your language or contribute bug reports, feature suggestions and/or code on Github.

Frequently Asked Questions

Help! It does not work…

Please follow the trouble shooting steps to determine the cause. If that fails, ask for support on the Easy FancyBox WordPress forum.

What’s FancyBox?

Basically, it is a fancy way of presenting images, movies, portable documents and inline content on your website. For example, if you have scaled-down images in your posts which are linked to the original large version, instead of opening them on a blank page, FancyBox opens those in a smooth overlay. Visit FancyBox for more information and examples.

Which version of FancyBox does this plugin use?

This plugin uses an updated version of the original FancyBox 1.3.4, better adapted to the mobile era.

I installed the plugin. What now?

First, make sure that image thumbnails in your posts and pages are linked to their full size counterpart directly. Open any post with thumbnail images in it for editing and select the first thumbnail. Click the Edit Image button that appears and choose Link To: Media File. From now on, clicking that thumbnail should open the full size version in FancyBox.

The same thing goes for WordPress Galleries. Choose Link To: Media File when inserting a gallery tag.

Where is the settings page?

There is no new settings page but there are many options you can change. You will find a new FancyBox section on Settings > Media. To see the default, check out the example under Screenshots

Will a WordPress gallery be displayed in a FancyBox overlay?

Yes, but only if you used the option Link To: Media File when inserting the gallery! The gallery quicktag/shortcode should look something like

.

The light box does not look good on mobile devices. What can I do about that?

The original FancyBox 1.3.4 script was not developed with mobile devices in mind and although the version used in this plugin has some adaptations for mobile devices, it might still be less optimal for very small screens. The only way around this issue is currently to disable FancyBox for small screen sizes on Settings > Media in the section Miscellaneous > Browser & device compatibility.

Can I make a slideshow from my gallery?

In the Pro extension, there is an Advanced option called “Gallery Auto-rotation” for that.

Can I exclude images or other links from auto-attribution?

Yes. All links with class nolightbox that would normally get auto-enabled, will be excluded from opening in a FancyBox overlay.

<a href="url/to/fullimg.jpg" class="nolightbox"><img src="url/to/thumbnail.jpg" /></a>

Can NextGEN Gallery work with Easy FancyBox?

Yes, follow the instructions here.

Can I use ONE thumbnail to open a complete gallery?

Yes, follow the instructions here.

How can I make AJAX or Infinite Scroll loaded content be seen by FancyBox?

This largely depends on the (theme or plugin) script that is responsable for this new content. Easy FancyBox is compatible with Jetpack Infinite Scroll but other scripts may need to be adapted.

Read more which hook ‘post-load’ that is available to trigger FancyBox to scan new content here.

Is Easy FancyBox multi-site compatible?

Yes. Designed to work with Network Activate and does not require manual activation on each site in your network.

1164 Comments

Hi Subhash, that is not default behavior since WordPress 4.9 (if I remember correctly) because the title tag should not be used anymore at all… are you using a plugin like Restore Image Title or similar?

I don‘t even know what that is. I write code by hand if appropriate. But I use an old them (Twenty Eleven) in a new version from August 2020 and this theme still has the title. I really would prefer to keep it.

Hi Brigitte, most mobile browsers do not natively support PDF rendering. But you can choose the option “Google Docs Viewer” on Settings > Media in the PDF settings, which should work for most platforms…

There are javascript errors occurring on your site that are not coming from Easy FancyBox, but they are blocking errors, breaking script execution. That is why FancyBox is not working on your site anymore. One error is coming from a script snippet in the first line of your source code (it looks like a custom script) $(document).ready(function(){$(".panel-widget-style").css("background-color","#fff");}); which for multiple reasons is not going to work there. The second error is the real blocking error and seems to come from a Flexslider script…

When you open an image from a gallery, the plugin shows its filename (or the alt text) as the title and there is no option to use the image caption or description that are meant to be used in galleries instead. Or there is one?

Hi, indeed the light box script only has access to the image alt text used as the alt attribute. There is currently no option to make it search for the caption text. This is however considered for a future release. At this point, your only option is to create a custom script that replaces all alt text attributes with the image caption on page load. This is not easy to do and depends on how your images are embedded on the page (native wordpress gallery or plugin?)

Hi JayDub, it does not look like something that would be possible with the iFrame mode in Easy FancyBox. However, what you could try to use the Inline Content option… You’ll need to (1) get the Facebook iframe working on your site independent of the light box and then (2) treat that iframe as inline content. You can find general instructions on how to use the Inline Content mode here.

Using Divi 5.8 Theme with WooComerce. Ive downloaded your app, with no change. Ive gone through the troubleshoot steps to no avail. Please any help to assist would be awesome!

Hi Brian, to open a thumbnail image in the light box, the image needs to be linked to it’s original size version. But it also depends on how the theme implements the image. If you can share a link, I can take a look and tell you what is going wrong.

Hard to say what is causing it without knowing the error. Do you have access to error logs with your hosting provider? The plugin has been tested on WP 5.9 so it must be a conflict with another plugin or theme. Or maybe a combination of other factors, like the PHP version. Do you know what the PHP version of your server is?

Hi, this is a known issue and caused by the browser PDF renderer. You can choose a different embedding method on Settings > Media in the PDF section to see which one works better…

Leave a Reply to RichardCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: