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

…and how can I turn off the slideshow feature when viewing images? The only setting I see in the admin that has to do with this is turned off….yet the functionality persists. Seriously bummed that after having the plugin installed and functioning perfectly, I’m now forced to invest more time to fix things that shouldn’t be broken. I had it so simple….an 80% black overlay that didn’t scroll into an auto-slideshow…now I have no overlay, had to manually remove the gnarly spotlight via CSS and the images rotate through when I don’t want them to. Can you not add new functionality to your plugin without forcing those settings on people? When I upgrade, why not leave my settings alone and turn off all the new ‘features’ (spotlight is awful) by default? I appreciate the plugin and your efforts to develop and maintain it, there just seems to be a disconnect between your own tastes and forcing functionality on users who don’t want it.

Hi Cody,

You are right. That should not have happened. A mistake on my side (a 1 instead of a 0 somewhere) and a lot of trouble on your side. My apologies.

I am working to release a fixed version right now.

Thank you for the quick fixes…frustration was getting the best of me. I did change plugins, but switched back because the other was giving me errors displaying iframes. Thanks again, everything is functioning properly.

Hi Elias, thanks for reporting this. Is it qTranslate you are using there?

EDIT: I have been able to reproduce the issue on WP3.1 and qTranslate 2.5.15 and 16b (development version)… I don’t know if this is a qTranslate thing or a bug in WP3.1 and I have not seen this issue in earlier WP versions! I’ve posted a question on the qTranslate forum about it so I hope to find out more soon…

The image href link auto defaults to the attachment page (rather than image itself), with a thumbnail appearing on the attachment page. This isn’t very intuitivebecause it makes readers click the image twice. Readers click an image – it first opens another page, with a thumbnail that the reader has to click a second time in order to open up the lightbox.

How do I change this default behaviour?

Hi Ed, this is a default WordPress setting (both inserting images and galleries, see my response to Anna’s question below) that I do not know how to override. I did notice that when inserting a single image and you select “Link to image file” to make FancyBox kick in the first time, that setting will become your default for the next image. Sadly, this is not the case for galleries.

I will be investigating the possibilities to override this WP default behaviour but I cannot promise anything.

Can anyone please tell me how to open images in a lightbox. All settings in media are right. I created a gallery page in WP. On that gallery page are about 20 pictures for 20 different albums. Each picture I linked to another page for the albums contents. No matter what I do, the picture I click on, opens in a new frame or tab….instead of opening in lightbox. I would really LOVE to have the albums open the linked contents in overlay. I have already updated to the latest version of Fancybox.

Any thoughts of what I can do or what I am doing wrong?

Thank you so much in advance for your time!!! 🙂

Hi Anna, make sure that when inserting a Gallery, you select ‘Link thumbnails to: Image file’ … Else they will open on a WordPress generated page.

It’s on the TODO list for Easy FancyBox to override this default gallery setting in WordPress but I have no idea yet if that is even possible.

I’m trying to get a NextGen gallery to display and it works, but only if I display the gallery thumbnails. I wanted ONE thumbnail to open the whole gallery. I inserted the [nggtags gallery=YourGalleryName] right before the gallery and I still get multiple thumbnails…

DO NOT WANT !!!

Have I missed something ?? This is WP3.1 too…

Hi Jon, what do you mean by “I inserted the [nggtags gallery=YourGalleryName] right before the gallery…”? Just use the NextGen tag and nothing else. You will have to create a gallery in NextGen and use the name of that gallery to replace YourGalleryName in the tag…

Oh, and don’t forget to change the NetxGen settings to use the custom code class="fancybox" rel="%GALLERY_NAME%" on the Effects tab…

OK… I have [nggtags gallery=issue_2_preview] (which is the right name for the gallery), and the “class” change in the effects tab.

I get nothing displayed. is it possible another plugin may be clobbering it (it’s not obvious, but I have a facefook “like” button after it)

Update: Just installed WP3.1, Nextgen and Easy Fancybox on a virgin Debian VM server and I get exactly the same issue – the only thing in the post is “[nggtags gallery=old_computers]” and I get no images showing.

Incompatability with WP3.1 maybe ??

There should be no problem with WP3.1 … Let me know if the pointers I gave by e-mail are not enough to get FancyBox working!

Update for you: Before I checked the theme for the duplicate jquery loads, I thought I’d trash the WP install completely, all themes and plugins as well.

Virgin WP3.1 install, Easy Fancybox and Nextgen as the only plugins, using the supplied Twenty Ten theme.

Post contains nothing more than [nggtags gallery=flood]

Custom effect has been changed in Nextgen to class=”fancybox” rel=”%GALLERY_NAME%”

Even rebooted the server – same result. Absolutely nothing…

Correct me if I’m wrong, but this points to WP3.1 being the culprit, yes ??

hello, i’m working on a new site using thematic and a child theme. the plugin installed with no problem, but when i activate the plugin, i get a lot of:

Notice: Undefined index: id in /home/daveydz3/daveydz/wp-content/plugins/easy-fancybox/easy-fancybox.php on line 315

Notice: Undefined index: id in /home/daveydz3/daveydz/wp-content/plugins/easy-fancybox/easy-fancybox.php on line 317

in the admin as well as on the front end. just installed thematic yesterday and haven’t changed much besides styles.

also, a few other plugins are giving similar errors not just yours. I’ll leave your plugin activated so you can see.
any idea?

Hi David, you will need to set your server/hosting account to NOT print errors and notices like that on the front end. All errors/warnings/notices should be caught and written to a log file. Ask your provider or system admin how to achieve that. If it cannot be done on your hosting account, try putting the following code in your wp-config.php file, just after the line with “define(‘ABSPATH…” :

/* error logging */
@ini_set(‘log_errors’,’On’);
@ini_set(‘display_errors’,’Off’);
@ini_set(‘error_log’,ABSPATH.’/mycustom_error.log’);

Then create a new empty file with the name mycustom_error.log and upload it to your site root. The messages should be sent to that file instead of the front end of your site. Don’t forget to overwrite that file once in a while with an empty one to prevent a HUGE log file after a while…

i’m such a dumb dumb, after all that, i realized that– duh!– i enabled wp_debug *facepalm*

i removed that and the notices don’t come up.
Thanks for your reply!

I’ve discovered another possible bug. When select “Transparency fade during elastic transition” and customize the speeds to 700, 300, 300 and hit ‘Save Changes’, it resets them all to 300. As well, if I enter 700 in the first field and leave the second and third empty to default to 300, upon hitting ‘Save Changes’ it empties all three boxes, effectively setting the first I’ve tried to dictate manually to the default also. Just a heads up, thanks.

Thanks Cody, for spotting and reporting that bug… will be fixed in the next release 🙂

Thanks for the plugin. It’s easy to set up and the options are perfect.

I am, however, running into a couple issues. From what I can tell, it looks like the plugin is not enqueueing jQuery (the jQuery plugins yes, but not jQuery itself). Correct me if I’m wrong. I was running into an issue w/ have multiple copies of jQ active after enabling the plugin. I was enqueueing jQ in my theme, but that was first on the page, and the plugin was creating issues.

The second thing is more of a suggestion: is there a way to have the plugin only load the additional jQ scripts on pages that would use it? Currently, they are loading on all pages, so there is a good amount of overhead on something that I’m only using on a couple pages. If there was a fix, that would be great.

Thanks again!

Hi Ira, the plugin uses the official WP method of queuing scripts so it should work with any normal theme and should not cause conflict with any other plugins… unless they go outside the WP method. One thing you absolutely need is the wp_head(); code in your header.php but it sounds like you have that.

Are we talking about http://www.roycroftdesign.com/ here? Looking at the source code, it loads jQuery just fine 🙂

About loading the scripts only if it is needed: that’s not possible at this time. The script needs to be loaded before it can check for any images it should ‘attach’ itself to. I could code a way to check for images in post/page content before the page loads but that will have some down-sides of its own. For starters, that will also have an impact on page load and it would leave out any images that are outside post/page content like sidebar widgets…

Thanks for the response. Did have jQuery enqueue’ed (and included wp_head in my header.php), so it must be some other issue. And yes, that’s the site. I’ll tinker with it if I get a chance.

Just an idea: would it be possible to enable a meta box on pages/posts with a check box to enable the script? I wouldn’t be as concerned if it was just one script, but really it’s about 8 scripts that I only need on one page. Or maybe there could be an option to only load them if there was a shortcut used on the page? Couple thoughts.

Hi Ira, I’ll consider your idea about the post meta box with a checkbox for a future release…

Hi there,

What could cause the “spotlight effect” to not work anymore? It worked at first, I don’t think I did much to the plugin for a few hours but then I could be wrong, then checked again, and it didn’t work anymore. Fresh reinstall (deactivate, then delete/reinstall, turn off all settings but the “images” one with “spotlight” checked) of the plugin itself didn’t help.

Thanks for the pointers!

Actually, it’s weirder than that: I’m primarily working on an iMac with safari (all latest versions). There it’s not working (anymore – it did work at first) – clearing the cache didn’t help.
On the same iMac with Firefox 4 latest beta, it does show the spotlight overlay – but the pdf thing is broken.
On my other computer, a MacBook Pro, it does work both on Safari and Firefox (latest stable OSX and Safari versions + latest FF 4 beta) but the pdf doesn’t work on FF.
On my client’s computer (windows 7 + firefox 3 I guess) it all works, both the overlay and the pdf – so I don’t really worry about the overlay so much (although it is weird) , but I’m wondering if there is not an incompatibility between FF4 and the pdf plugin.

As for the link: http://home.francoissechet.com/musicaglotz/musiciens/altinoglu-alain/ for example (I am the guy with the audio plugin question over at wordpress support… since it’s more of a troubleshooting issue than a general question that may apply to other wordpress people, I figured I would ask that one here instead)

Merci François, pour le bug-report avec FF4. Je vais l’ étudier… Concernant spotlight et Safari : plus difficile car je n’ai pas un Mac 🙁

Thanks for the reply Joe

Yes I just revisited the link and find out it is a gallery. May be it’s conflicting with my other plugins, I’ll try to disable them on by one.

Thanks for the reply Jon

Yes I just revisited the link and find out it is a gallery. May be it’s conflicting with my other plugins, I’ll try to disable them on by one.

If you’re using NextGen, ditch it – caused me no end of grief. There are a couple of tricks to get it working – happy to help if I can (if Ravan is busy..:-) )

Hi Harry, in your source I see the theme loads the jQuery library TWICE. This is never a good sign. Please edit out the hardcoded jQuery call ( a line with ) from your header.php first.

Studied some more and it appears that jQuery 1.4.4 (included with WP) produces some kind of error (which I cannot explain) with your theme. You will need to edit the themes functions.php to make WP use the jQuery library version 1.4.1 that is included with the theme instead of it’s own… Do you know how to do that?

I found a tips from Bazil749: (original link –> http://wordpress.org/support/topic/i-want-to-disable-jquery-included-in-wordpress )

// Drop this in functions.php or your theme
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
wp_enqueue_script('jquery');
}

Is it going to work if I just replace the link to Google’s jQuery library with the one included with the theme?

I don’t think the WP version is the issue here. Try this code:


function my_replaced_jquery() {
if(!is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js', array(), '1.4.1');
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts','my_replaced_jquery');

(take care there are no false line-breaks when you copy/paste this code)

I just left him a reply… I think I figured it out, IE was picking up a bad style from somewhere (visibility:invisible;)…so I posted the correction for him to add to his stylesheet. I fight IE like this all the time…it just decides to apply styles arbitrarily, so frustrating. Anyway, hope that helps…now, if you can only help me solve my IE problem with PDFs. 🙂

Is there a way to dictate that PDFs are displayed in single page format when the overlay opens? Right now it’s set to ‘width’ by default, but the top 1/2 of my first page is blank….so it looks like it opens to nothing when you just have to scroll down a bit. Defaulting to single (or full) page would be huge in my case. Thanks in advance.

PS – I did some searching online to see if there was a value I can change within the jquery file, but came up empty handed…

Hi Cody, I’m not seeing what you describe on http://www.bangtailpress.com/site/services/#readers … I suppose it depends on the browser and how the plugin that’s used interacts with it. I’m not sure there is an option to control what you want but you CAN change some options and play around to see if you can get what you want:
Open easy-fancybox-settings.php and find (in the latest version on line 476) the part #toolbar=1&navpanes=0&nameddest=self&page=1&view=FitH,0&zoom=80,0,0 and edit that to your liking. Maybe changing the parameter view=FitH (for fit-to-height?) is your ticket…

Interesting…just after posting my previous comment I noticed that others were having issues with PDFs displaying in an overlay using Internet Explorer. So I tested my PDF links in IE7 and IE8 and discovered that they do not work (work properly in FF). Instead of opening to the PDF, it opens the image used as the link. If you click that image a second time (within the popup) your are prompted to download the file directly…rather than have it display in-browser. I tried both the auto detect and class=”fancybox-pdf” methods, no dice either way. Here’s the link for you to reference, would love to get your feedback at your earliest convenience. (the two blocks on the right should open to excerpt PDFs).

I thought I fixed those issues in the latest version.

Will take a look at your site in IE (not easy for my as I’m not using windows a lot) ASAP but if anyone can verify the issue, please do so!

Need help getting an image to automatically popup on the load of the homepage. I’ve tried following the instructions outlined above, but I must have made an error. Can you help me get this going? thanks.

Hi Chad, you have misunderstood the instructions. You need to create a working INLINE link first.

After you got that working, you can give that link the parameter id="fancybox-auto" and remove the link text (to hide the link) and use class="fancybox-hidden" on the div that contains your inline content to hide that too.

Are you still seeing that problem? Which versions of qTranslate and Easy FancyBox are you using?

Hello. Great plugin! I have a problem with the class “fancybox-iframe” in
Chrome. When I use it in order to open a html page with
.swf, the page loaded in the frame it’s completly in blank until you click above. But in mozilla and IE works good!

Hi – Thanks 4 all. Finally it seems to work except one thing: EFB opens always one of the NextGenGallery’s pictures and doesn’t show the arrows to get to the following/previous pictures – unfortunately web site is under construction so I can’t give you a link, but do you have any idea?

You need two things:
1. Make sure you have class="fancybox" rel="%GALLERY_NAME%" under “Custom” on the Effects options in NextGen;
2. Then, on Settings > Media either set “Auto-gallery” to “One gallery for all” (easiest) or adjust “Section(s)” to match your theme’s posts div class/id usage.

Hello. Can someone please help me with this error message that only 1 person is getting when they try to view/download a pdf document with the fancy box plugin????
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; AskTbFXTV5/5.9.1.14019)
Timestamp: Sat, 9 Apr 2011 02:40:56 UTC

Message: Invalid property value.
Line: 116
Char: 165
Code: 0
URI: http://www.balirock.com/wp-includes/js/jquery/jquery.js?ver=1.4.2

The document is a food menu located here: http://www.balirock.com/menus

THANK YOU SO SO SO MUCH IN ADVANCE!!

Hi Anna, try this: set in Overlay > Color either a valid color value starting with # or clear the field to use the default #777… It seems you have entered the value 777 (without #) so the plugin regards it as a numeric value instead of a string. That might be causing the error in IE.

Hi Ravan,

I am a beginner, and have a rather simple (embarrassing) question:

Can you tell me the exact code, I have to write when i want to use the iframe-option from your plugin. If i want for example to use an iframe for google.com, what do i have to write within the TinyMCE Editor in HTML and Visual. Unfortunately i couldnt find any example…

Thanks a lot!

Hi Dresad, first start with inserting a working link in your post/page content to the page you will later want to be opening in FancyBox. After that, the best thing to do is to NOT use the TinyMCE rich text editor but to switch to the ‘HTML’ tab. This will show you basic representation of the post content plus source code that comes along with it. This might look scary to you but it will give you the exact control over your content that you actually need here… Find the link you have just created in the HTML view. It will look something like <a href="http://link.url/to/externalpage.html">Link text</a> and you will need to give that link a class="fancybox-iframe" so it will look like <a href="http://link.url/to/externalpage.html" class="fancybox-iframe">Link text</a>. Then save and (if you enabled the iFrame option under the FancyBox settings) your link should open in a lightbox overlay…

Hi,

I’ve got a small problem with Easy FancyBox.
I use it to open Vimeo movie on my website.
I use the default configuration for Vimeo with “auto-detect” mode.

It’s work perfectly on Mac and PC with different browser : IE, Firefox, Safari …

The problem is that is not working on iphone and ipad.
I’ve got a blank frame instead of the video.

Can someone help me ?

Best regards,

Sylvain.

PS : sorry for my english, i’m french.

Hi,

I notice others have had a problem with displaying PDFs in Firefox and is was fixed in release .7. I am still having the problem and I have release .8 installed. The PDF will display in IE8 and Google Chrome but a blank box displays in Firefox.

Any ideas?

Thanks
John

Regarding my earlier post about PDFs not working with Firefox. The problem is not your plugin but rather Firefox in Linux. Firefox works fine on a Windows machine. The Firefox issue with PDF has been around for sometime now, not sure if or when it might be resolved. Sorry for the false problem.

John

That’s strange. I’ve got FF 4.o running on Ubuntu 11.04 (64bit) with the acroread package installed and I can open PDFs (in- and outside FancyBox) just fine… Same as before with FF 3.6 on Ubuntu 10.10 (64bit) and on Linux Mint 9 (32bit). In fact, even if the official (Adobe’s) PDF reader is a bit bloated, it has always worked fine for me…

I’m having the same issue with PDFs in Firefox. I’m running version 3.6.17 for Mac. The box will open with a link to the pdf, but the document is never rendered. When I view your .pdf example, it prompts me to install a missing plugin, then a dialogue box appears from Firefox telling me “no suitable plugins were found.”

You can get the official package (inlcudes Reader and Mozilla browser plugin) from http://get.adobe.com/reader/otherversions/

Select your operating system and language, then download and install… There are versions for MacOS, Linux and even Android 🙂

If you pick English as language you are sure to get the latest version. Other languages might still only be available in older versions but they should work just the same.

Leave a Reply to CodyCancel reply

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

%d bloggers like this: