Easy FancyBox for WordPress

Easy FancyBox

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.

Easy FancyBox

1164 Comments

Quick followup on my request for support. I just checked again on the product pages, and the product image on every page where I see this exposed link code does not open in a fancybox, but those that were not linked from the blog post I mentioned all do open in Fancybox without any trouble. Thanks so much for any assistance you can provide!

That’s prettyPhoto light box that came with Woocommerce. Best not to use more than one light box script on a site… To make prettyPhoto work with other image links than only on the product pages, try giving a link a data-rel=”prettyPhoto” and class=”zoom” attributes.

I see, I had spaced on the fact that WooCommerce also has this feature. I’ve submitted a ticket with them and hope they can help me work it out. Thanks for the information, Ravan! It really helped me know where to turn for further assistance. Have a lovely day.

Easy FancyBox 1.5.8 – Fatal error after updating the plugin

Can not be activated, both in the individual Web and in the Multisite Web

Warning: require_once(/srv/www/[domain]/wp-content/plugins/easy-fancybox/class-easyfancybox-options.php): failed to open stream: No such file or directory in /srv/www/[domain]/wp-content/plugins/easy-fancybox/inc/class-easyfancybox.php on line 424 Fatal error: require_once(): Failed opening required ‘/srv/www/[domain]/wp-content/plugins/easy-fancybox/class-easyfancybox-options.php’ (include_path=’./:/usr/share/php5/5.2.17/PEAR’) in /srv/www/[domain]/wp-content/plugins/easy-fancybox/inc/class-easyfancybox.php on line 424

Update: the new release 1.5.8.1 should work around the issue no matter what your server OS or PHP version… Could you try to update and let me know?

Is there a way to display something like “image 1 of 3” in the lightbox when using a group of images with the rel attribute? I’m afraid people won’t know there’s multiple images. Or is there a way to display the left and right arrows without hover so it indicates right away that there are more images.

Hi Suzanne, this is not possible without modifying the plugin or light box script. The advanced extension is planned to feature this option but it’s not ready yet. Sorry.

Thanks for the plug in, really love it. Unfortunately after updating to WordPress 4.7, with Easy FancyBox 1.5.8.2 the title no longer shows in Fancybox. Any suggestions?

Hi Dario, there are some serious script (jQuery) errors going on on that second site. You might want to start debugging by turning off autoptimize….

Wow, thanks very much – this is exactly what solved it for anyone else out there.

From Autoptimize plug-in settings I unticked ‘Optimise JavaScript Code?’ and YouTube videos are now playing as expected!

ps. Reason I used Autoptimize was to get rid of the Google Speed Test warning that is now back since making this change, the warning being for Mobile:
Should Fix:
Eliminate render-blocking JavaScript and CSS in above-the-fold content.

I’ll leave it this way though, thanks very much once again!

Hi Dario, the plugin places indeed a little script in the head section but it’s not “render blocking” in the sense that Google Pagespeed test supposes. It is only loaded there and does not do anything until triggered after page load. The code needs to be ready because in rare cases it needs to be triggered earlier but even then, it does not actually add any significant above-the-fold render time. Sadly, Google Pagespeed test does not know this and simply adds the (rather common) “eliminate render-blocking” should-fix warning.

That said, there is new version planned that will add an option to move the code snippet to the footer to get rid of the Pagespeed test warning. While some may need to keep it in the header, for most cases the footer should be fine too.

Hello I can you help me with this one. I’ve successfully implemented the contact form on my website with easy fancy box, but the problem is that the message that will say that the contact form has successfully submitted is not showing. Only a red line. Also when you have a blank input and just pressed submit, nothing happens, even the error message of contact form 7 does not show. Can you help me with this? I want to know if this is a css problem or contact form 7 problem.
This is the test website http://edeskaloans.com/edeskatest/production-knives/

Hi Cedric,

First, test the form without FancyBox. Move the CF7 shortcode outside the hidden div to make it visible on the page and do some test submissions. Does it show any response messages then? If not, then it’s an issue with CF7.

That normally happens when there is another light box running on the site. Either in your theme or another plugin… Best delete Easy FancyBox an d find a way to make the other light box work for you.

Hi iamartbc, a form is inline content. You can find how to embed inline content following the example in the FAQs 🙂

In this page (scroll to above the comments) under the heading “Frequently Asked Questions” then “Advanced” there are two questions that have example code that you can paste in your WordPress page editor Text tab. The most important one for you is “Can I display a contact form in FancyBox?” Click the link to open the explanation, copy the example to your site and replace the contact form shortcode with the one you are using.

Hi again RavanH,

Got 1 more simple question for you, I have a shortcode ( [formidable id=5] ) as menu it works fine pointing to that, but me and my creations minds, lol….

it’s there a way that when click on that menu it shows the form on the fancybox?

sorry to bother, still LOVE your work

Hi iamartbc, sorry I do not think I understand your question. Do you wish to open the contact from from a menu item? Then just give that menu item a class “fancybox-inline” (there are advaced menu options on the menu edit page) … If you mean something else, can you share a link to an example page maybe?

Heyyyy RavanH, thanks for so fast answer: Look

I use formidable forms, witch has shortcode for each form you create; Now someone (client) it’s asking me if there’s a way that Form is’t on the top menu.

so I did: http://bestteam.com.do/ (last menu has two forms), but he want’s that form opens with fancybox, thing is I did try to add the class to the menu with just the shortcode and what does is that straight up opens the form and without the fancybox.
ScreenShot: https://snag.gy/p4QjCx.jpg

So I believe that the question should be:

“I have a Shortcode of a form, that I want to add it as a Top Menu Option, that when it’s clicked It opens the form in FancyBox.”

Note: I use “shortcode in Menu” plugin to add the shortcode to menu. should i change this ?

With the advanced version you get the extra options and access to the pro support forum 🙂

Hi, full mobile/touch support should be there in the next release when the FancyBox 3 script will be integrated into the WordPress plugin.

Hi Ketan, the image title or description are not available to FancyBox. Only the image ALT text. You can put all you wish to show in the light box there…

Hello,

After the recent update, the plugin has errored, blocking any back end dashboard access on wordpress. I had to manually disable it within cPanel on my hosting company.

The error message is:
Parse error: syntax error, unexpected ‘[‘ in /html-directory-location/wp-content/plugins/easy-fancybox/inc/class-easyfancybox-admin.php on line 21

Kind regards,
Clint

You need PHP version 5.4 or above. Can you upgrade your server PHP? Preferably to PHP 7.0 or higher as recommended by WordPress…

You need PHP version 5.4 or above. Can you upgrade your server PHP? Preferably to PHP 7.0 or higher as recommended by WordPress…

Please help

The plugin was not activated, because it caused a fatal error.
Parse error: syntax error, unexpected ‘[‘ in /home/sands00/s-and-s.com.ua/www/wp-content/plugins/easy-fancybox/inc/class-easyfancybox-admin.php on line 21

You need PHP version 5.4 or above. Can you upgrade your server PHP? Preferably to PHP 7.0 or higher as recommended by WordPress…

You need PHP version 5.4 or above. Can you upgrade your server PHP? Preferably to PHP 7.0 or higher as recommended by WordPress…

hi,
To see the images in full size, I put images of 1024 pixels wide.
I would like to give the choice to the visitors, that they can click to see the image in size Reelle, thank you

Hello,

I used something like this to open a image in light box. It was working fine until the last update.


Click here

Please let me know how to make it work again.

Hi Craig, you may be suffering from a theme incompatibility that did not occur with the previous version. Can you share a link to your site?

Hi Harold, it looks like your theme is using an incompatible jQuery version loaded with

Any way to replace that with the default one included with WordPress?

Thank you for the reply. The 1.8.6 update fixed the issue. For everyone reading, I am using JQuery 3.3.1.
Thanks again!

Hi Henk, are the instructions not clear? Simply create a link to the YouTube page in your post content. With the Youtube option and Autodetect enabled on your Settings > Media admin page, this link will open the video in a light box…

Hi, Thanks for a wonderful plug-in. I use it for images and pdf files, and they all work great.
I have a question regarding how to get the images in a WP gallery to come up in the same size in a responsive way for mobile devices. I set the Link To in the gallery to Media files, and It’s working great with navigation from one image to the next. However, the images have different sizes, and the light box automatically adjusts depending on the image size. I’d like to have the light box to be of a fixed size independent of the image size. Is this possible, and how?

Dragon

Hi dragon, the light box was designed to adapt to the size of its content. You could try to force that content to have a particular size (scale) through CSS but I suspect that even if that works, it will create unexpected results and/or other problems…

Does its job well, almost too well. I have treid a lot of gallery plugins recently and easy fancybox is incompatible with like leterally every each one of them. Few examples being FooGallery, Modula, Jetpack, Everest, Envira and ofc NEXT.
Understand, its not like Easy Fancy Box doesnt work with them, it rather works way too well, forcing the galleries to use fancybox instead of their own build-in ones no matter what. I wouldnt mind even then, but after last update to 1.8.12 background fade stoped working, so the lightbox effect looks realy ugly. Ia still trying to find a workaround.

Hi Jarek, we gererally recommend not using two light box scripts on the same site. So if you have a gallery plugin that has it’s own light box, best to remove Easy FancyBox… Or if you really need FancyBox for something else (like a form or video popup) at least disable the Images option in the FancyBox section on Settings > Media… Or if you need it for stand-alone images then remove all image file extensions from the Autodetection field and give individual links the class “fancybox” manually.

Well, the Settings beginning with:

“FancyBox
Donate to keep the Easy FancyBox plugin development going!The options in this section are provided by the plugin Easy FancyBox and determine the Media Lightbox overlay appearance and behavior controlled by FancyBox.
First enable each sub-section that you need. Then save and come back to adjust its specific settings. Note: Each additional sub-section…”,

has a lot of options. It would be great if you include a sort of Print Options to facilitate the configuration.
Just a suggestion.
Regards
Luis

I’m afraid I do not understand how printing the options would help you… But I do appreciate your thoughts about the number and complexity of the options. You are right, it’s not very “easy” anymore. I’ll be searching for a way to make them easier 🙂

I have been using the plugin for years. Recently, I noticed a bug: users cannot close the lightbox. I have looked through all the settings and looked at browser activity with dev tools and cannot find what is causing the problem. You can see the problem here:

https://www.ldsagents.com/video/

Click a video and then try to close it.

Hi Brad, the plugin is not compatible with your theme which includes an older jQuery librairy and its own Fancybox script already. Sorry.

Test page: https://dev01.demo.site/lightbox-test/

In the plugin’s settings I have unchecked “Scale large content down to fit in the browser viewport.” under FancyBox > Window > Behavior because that is my desired behaviour on desktops.

But with this setting in place, the close button on mobile is really tiny and can barely be seen. Screenshot from iPhone X: https://cl.ly/ec04c440359d

In fact, it can not be seen unless we scroll a little up.

Is it possible to make it behave as if “Scale large content down to fit in the browser viewport.” is ticked on mobiles only?

Hi Sridhar, no that is not possible but an interesting idea… Your only option is to disable the light box effect for small screen sizes by setting the option “Minimum browser/device viewport width” on Settings > Media under the Miscellaneous section.

Thanks for the reply.

Another semi-related question.

With “Scale large content down to fit in the browser viewport.” unchecked when the linked image’s width is wider than viewport, it is getting cut off at the right as can be seen by clicking on the top image at https://dev01.demo.site/lightbox-test/.

Is it possible to have it auto fit to browser’s viewport instead of 100% of the image width? I just want the viewer to see the full image (width-wise) at maximum possible size.

Hi, the plugin works well for me and I find it very useful. I was however wondering if there was a way to display two different iframe popups (one for mobile, the other for desktop), with different width and height characteristics using the plugin? Thank you

Hi joban, I see what you mean. There is a blocking script error occurring on desktops: “Uncaught TypeError: Cannot read property ‘0’ of undefined” which is breaking subsequent script execution (including FancyBox). The error comes from the revslider script…

Leave a Reply to Jarek BaldrianCancel reply

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

%d bloggers like this: