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

Hello

The first thing I did was disable it in settings title show
Now i know liitle bit more.
My problem problem stems from the use of a WP template that has the easy fancy box embedded.
Can I use two instance of Easy Fancybox ?

No, you will either have to edit your theme to remove the included FancyBox or disable the plugin. Using the two together is sure to cause issues…

Hi,Thanks for the wonderful plugin. How can I change the width and height of iframe which I am showing through fancy box plugin. Default size of 560px X 340 px is used even though I changed width and height in Settings>Media page. Please help.

Hi Udhaya, your theme has FancyBox script already included. If there is no option in the ePanel to disable the theme-included version, I’m afraid it is incompatible with any FancyBox plugin.

If you look at the other messages you should see in console, you would read multiple lines like: [blocked] The page at https://www.ffcu.org/ ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js?ver=3.3.2. (which means you are trying to load the jquery library multiple times but all are failing) … This tells you that Google Chrome blocks scripts that are served from non-secure domains when used on a secure (https) domain like yours. Either switch your site to http or reference the jQuery library with https… and only reference it once!

I was able to convert the plugin’s jquery to reference the internal file, but then it only displayed the first slide as a static image (basically) which didn’t move and couldn’t click through the transition in all browsers.

I tried changing the code of:
wp_enqueue_script( ‘jquery’ );

to:

wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ‘https://www.ffcu.org/includes/jquery.min.js’, false, ‘latest’);
wp_enqueue_script( ‘jquery’ );

in the wp-parallax-content-slider.php but that made it stop motion altogether (like stated above). Any suggestions?

I suggest you disable all plugins (including mine) and check your page source again. Then enable them one by one, each time comparing changes in the source, to see when the jQuery library (that normally would be the one included in your WordPress install and thus be called via https) gets changed to the externally hosted one and when that second one appears…

Hi!

I know there is a way to create a cookie with the jquery cookie plugin that works with this and says “Show this to a visitor…say every X number of days” but I cannot do that 🙁

Can you help with that? OR can you please tell me when you will create a Pro/Paid version and add that functionality?

My clients (and me) LOVE this plugin except for the fact that we cannot specify that.

Thanks for any help in advance!

Hi Token, FancyBox does not handle thumbnails. So that would be in your themes stylsheet or (in your case) the NextGEN Galery stylesheet. Look for “.ngg-gallery-thumbnail img”…

The W3TC setting I needed to disable to fix Fancybox is:

Prevent caching of objects after settings change
Whenever settings are changed, a new query string will be generated and appended to objects allowing the new policy to be applied.

(Under Browser Cache)

many Thanks for that great plugin!
i use it, to display .pdf Files and it works great.
the “Auto-detect” Function is so cool… Man…

Good Job!

Greetings from Berlin/Germany

hi, does this plugin use fancybox2? the autoresize on ipad2 doesnt seem to work the same in this plugin as it does in fancybox2. so if we open a popup in portrait mode on ipad2 and then switch to landscape mode in fancybox2 the screen seems to reload quickly and adjusts to the new %. can this be done with this plugin? many thanks

Hi mrlreynolds, this plugin currently only has FancyBox 1.3.4. The new fancyBox2 is planned but not implemented yet.

I want a hidden Inline content to show when clicking on a text link, I used the codes:

<div class="fancybox-hidden"><div id="fancyboxID-1" style="width:460px;height:380px">
...inline content here...
</div></div>
<a href="#fancyboxID-1">Read my inline content</a>

but when i do that all that shows up is the loading wheel image and it just stays on that.
i even tried it just posting the codes without changing anything at all. and it still doesn’t work. I understand the ID has to be set 1 for the 2 codes and if i got another one to set that one as 2, but i can’t get 1 working right now. please help.

Hi Matthew, do normal images display in FancyBox correctly? It sounds like there is some conflict going on your site. If you have a link so I can take a look, send it in a comment or via the contact form.

Adding share buttons is not a feature of this plugin (yet) but you can do it by pasting share button code into the title (alt) field when inserting an image in your WordPress post. This will work as long as the code is simple, it will work… You can see an example on http://demo.status301.net/easy-fancybox-sandbox/like-my-box/ where a basic Facebook iframe button is pasted into the alt text field. Note that I have manually replaced all double quotes in that code with single quotes and then pasted the URL of the linked (full size) image as the ?href= parameter.

Hi David, I see no errors… What exactly is going wrong according to you? Which browser are you using? Have you cleared your browser cache to make sure there are no errors coming from there?

I am trying to kick off a fancybox from a button click but the following code is not working…

Can anyone help please!!!!

Hello, I have not used this plugin yet. I would like to use the popup feature on multiple pages to display a video hosted on AmazonS3 but only on the first visit. In other words, I do not want the video to load every time a visitor lands on the same page or different pages. Is this possible please?

Hi Sniffy, that is not possible yet. It is planned for the future, most likely in the upcoming Pro version.

Great plugin.

Some compatibility problems drives me crazy. Inline content doesn’t show correctly in IE 8. My site is https://playingluv.com, if you set your IE9 to compatible mode(the button on the left of reload in address bar) and click “登陆” the anchor on the right of date on the header bar. The hidden fancybox pops up but with a strange width.

I am a newbie and there’s nothing i can do about it. Would u please help me.

Thanks so much:)

Hi Stanley,

I do not have the means to test with IE9 in compatibility mode (nor IE8) so I can only suggest something to try: the page source code shows a blank line as first line, followed by the DOCTYPE declaration. This doctype declaration needs to be the absolute first line, starting on the absolute first position. And IE absolutely needs a doctype to display FancyBox correctly. So I suggest you try to find out why/how this blank line got there… It might be simply the first line in your themes header.php but it might also come from elsewhere.

Again, it’s just a thought and I cannot test it. So if it does not solve the issue, please tell me 🙂

So, I believe you already addressed this issue, but I am still struggling. The Pop-up looks awesome, but I need to be able to add the print functionality within the pop-up. I know you mentioned something in regards to an “alt” tag, but I can’t seem to make it work.

<a href="http://www.polarisglobalfunds.com/wp-content/uploads/2012/09/globalreturns.jpg">GLOBAL ANNUALIZED RETURNS</a>

Hi Kelly, In your code example, an alt attribute is not going to work (you need an <img … > tag for that) so you’ll have to paste your print code inside the link title field.

Easy Fancy Box Causes Site to Hang in IE8

Easy Fancy Box 1.3.4.9. WordPress 3.4.1.

Found a solution but wanted to run by you for verification.

TwentyEleven theme running on a Windows server. When Easy Fancy Box plugin is active, site works fine in all browsers except IE8 (works fine in IE9, but wasn’t able to test IE6 or IE7). I disabled all plugins and site does not hang. Activated only Easy Fancy Box and site hangs. Site eventually responds after about 1-2 minutes after each click.
I searched your forum and the internet. Found a suggestion outside your forum to fix the issue, and it worked…

Change the paths to images in the IE sections of the CSS. ‘AlphaImageLoader’ filter loads everything relative to the document, but if changed to full path the site no longer hangs.

src=’http:siteurl/wp-content/plugins/easy-fancybox/fancybox/fancy_close.png’ – where siteurl is the site’s url

instead of:

src=’/fancybox/fancy_close.png’

Do I really have to modify the jquery.fancybox-1.3.4.css?

Thanks
Jim

Hi Jim, thanks for your feedback. I cannot reproduce the issue but I’ve had others report similar effect in IE8. So I’d like to ask you for some more help… I’m going to do some patching and would like to send the result to you for testing. Is that OK?

Jim, looking at your website, I see the plugin is already converting the URLs in the stylesheet correcly: http://boldaction.electricstores.com/blog120827/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4 — search for ‘AlphaImageLoader(src=’ — or is that by your manuel editing? If so, could you please install the latest dev version which has a slightly different way of determining the full URL paths than the current stable version. You can find it on http://wordpress.org/extend/plugins/easy-fancybox/developers/ under Other Versions.

Yes, I had modified the file. I removed the plugin and installed the latest Dev version (Development Version (svn)). The plugin is active, but doesn’t seem to be working (is Dev version doing that?). I re-checked and it is active. The site now loads fine in IE8.

Ooops, my bad. I activated Version 1.3.4.10dev9. Site loads fine in IE8 and plugin is working, with one change – the fancy box displays fine, but the background is grayed out (not dimmed like it used to). Maybe I need to change a setting. Try the Events links and click on Tix Info.

Jim, I finally found an older PC with Windows still running on it which luckily (in this case… I’m not a big Windows fan) had IE8. And it displayed the overlay correctly. Not grayed out but semi-transparent like it is supposed to. Maybe if you clear your browser cache?

By Post Author

Ravan, all is good with testing using 1.3.4.10dev9. Thank you. And many thanks for responding so quickly – many others do not.

Last question – how best to proceed. Leave in the 1.3.4.10dev9 version I installed or wait for something else?

Tanks

Jim, you can just leave the dev9 version active and you’ll receive the usual automatic upgrade as soon as there is a new stable version 🙂

error notices after instalation:
Notice: Undefined index: id in /var/www/projects/zdrojak/htdocs/public/soubory/plugins/easy-fancybox/easy-fancybox.php on line 351

Thanks for the plugin.

I am trying to display auto playing video with some text below it in a lightbox with the requirement that the video should stop playing when it is dismissed by either pressing Esc or clicking away.

I placed the video via jwplayer shortcode in a text widget. Here is the full code in the text widget: http://pastebin.com/3ATNrais.

It is working as expected in Chrome, but not in Firefox. In Firefox, video continues to play even when the fancybox is dismissed. I have since removed style=”display:none;”, but it didn’t make any difference.

This problem can be seen at http://www.amazingyogateachertraining.com/blog/. Look for the video thumbnail in the right sidebar.

Any pointers?

Hi Sridhar Katakam, I would advise you to use iframe embedding instead of inline to assure cross browser compatibility. If you can host your videos on any of the supported video platforms like Youtube, Vimeo or DailyMotion, then you can simply use those. That’s the easiest option. If not, you will have to create an external page or pages that show the video(s) via your instance of the jwplayer. Then link to those pages with class="fancybox-iframe".

Alternatively, you can test the following method but it might not work as expected so you’ll have to test it: change in your current code href="#fancyboxID-1" class="fancybox" to href="#fancyboxID-1" class="fancybox iframe" (notice there is no hyphen between fancybox and iframe!)

I’ve created the external page having just the video here: http://www.amazingyogateachertraining.com/teacher-training-programs-page/

Then placed this in a widget:

http://pastebin.com/TcLgRhGz

When the link was clicked, lightbox was not appearing and am being taken directly to the target page (in the same tab/window).

Then changed the code to:

http://pastebin.com/EWHvNStx

now the video appears in the lightbox but has horizontal and vertical scrollbars, also the width and height are smaller than what they should be. Screenshot: http://cl.ly/image/2U2047202q1n

But the actual problem I wrote earlier itself does get fixed, i.e., video does not continue to play when the lightbox is closed.

So the question is: Is it possible to specify the width and height of the lightbox and set scrollbars to not appear when using the following?

http://pastebin.com/TcLgRhGz

Hi Sridhar, I don’t see any difference between the first and the last code. In any case, you need to go to Settings > Media and activate the iFrame option in the FancyBox section. After doing that, you will see a new section where you can define width and height 🙂

I have added “overflow: hidden;” for “#fancybox-frame” in my theme’s style.css and that got rid of the scrollbars in Firefox. In Chrome, when the fancybox appears the horizontal scrollbar flashes for a couple of seconds as if to say “I am here” and then goes away. I am in Mac OS X Mountain Lion.

In IE, scrollbars were visible and so I had to edit edit wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.4.pack.js to manually set the iframe’s scrolling parameter to ‘no’. i.e., changed http://pastebin.com/L84dc5Q5 to http://pastebin.com/WAATd0LN

As this modification will be overwritten when the plugin is updated, is there a proper way of doing the same?

To recap,

Webpage in question: http://www.amazingyogateachertraining.com/blog/

Code that am using to launch the fancybox: http://pastebin.com/sUXFVryQ

Code of the HTML page being linked to: http://pastebin.com/M1tYpwJ2

Easy FancyBox settings: http://www.diigo.com/item/image/bcy/cuxb

Sridhar, I would advise to use class=”fancybox-iframe” (notice the hyphen) instead of class=”fancybox iframe”. This will allow you to define width and height in the iFrame section at the bottom of the Settings > Media admin page.

By Post Author

I have been racking my mind over this one. Probably a case of that I can’t see the forest for the trees. I’m using WordPress 3.4.2.

I’m using the [gallery] shortcode in my PHP. I have disabled all of my plugins, double checked that my libraries are hosted over the Google CDN, l even tried using fancybox manually. Still no luck. It says in the HTML output that the Fancybox files are loading properly, and the links in the portfolio are linking to the file.

I just can’t sort this one out. Please help. My shortcode is below:

[gallery id="18" link="file" size="medium" class="fancybox" rel="gallery-1"]

Hi Joshua,

It can be a number of things really. Have you made sure ALL needed script and stylesheet files are included CORRECTLY and only ONE time? Are there any javascript errors occurring (you can use a developer toolbar in your browser to see them) and if so, what? There are some trouble shooting tips on http://wordpress.org/extend/plugins/easy-fancybox/other_notes/ … or can you give me a link to a live example?

By the way, I don’t think the parameters class="fancybox" rel="gallery-1" will do anything. Unless you are using a gallery plugin. If so, which one?

Thanks for the great plugin Easy FancyBox. I tweaked your code slightly to improve links to youtube.com/user/YOURUSERNAME which will not render correctly with Easy FancyBox because it is a listing of videos – not a video. Would be great if you can add the change to your WordPress plugin for production if you approve.
Here is the diff of the code:

[~/public_html/wp-content/plugins/easy-fancybox]# diff easy-fancybox-settings.php easy-fancybox.cgm.php
709c709
‘href*=”youtube.com/watch”‘,
—
> ‘selector’ => ‘href*=”youtube.com/”‘,

Hi Chris,

Thanks for reporting. Your solution is valid but will pose some issues for users that use another youtube URL format. I’ll find a way around that while still preventing the user page appearing in FancyBox in the upcoming release 🙂

Hi,

Is there a possibility to open a SPECIFIC image of a gallery with easy fancybox by using an extension of an URL?

http://www.salsa-trips.com/galleries/adolfo-indacochea

Using facebook LIKE, we would like to link back rather to the image inside the gallery than to the image page itself. As of now, facebook links back to:

http://www.salsa-trips.com/ims_image/_dsc1612-2

My preference would be an URL like

http://www.salsa-trips.com/galleries/adolfo-indacochea/_dsc1612-2 or
http://www.salsa-trips.com/galleries/adolfo-indacochea#_dsc1612-2

Thank you 🙂

Hi Salsa, yes that is possible but you need two things:
1. all links need a unique ID to be identified with.
2. you need this extra javascript in a sidebar text widget (for example) or in your themes footer.php:

<script type="text/javascript">
window.onload = function() {
if(window.location.hash) { jQuery(window.location.hash).trigger('click'); }
};
</script>

After that, your images can be opened inside a fancybox straight on page load by appending the URL with #UNIQUE_ID where each ID is different of course.

Is it possible to make this plugin add a “open in fancybox” checkbox in the tinymce add-link function?
Background: my friends wants to have descriptive text for certain words and I think he’s too chicken to fiddle with the HTML editor so a “open in iFrame” feature would auto-add the class=fancybox-iframe parameter to a hyperlink.

Hi Daniel, I’ve been thinking about that before but have never come around to actually implementing it. But it is near the top of the list for the next release 🙂

HI i installed it and im having problems nothing show in fancybox and i did the settings under the media page. how can i put an small image and when someone click on it for it to open youtube videos with fancybox help me nothing working

i read them this doesnt help. can you plase make a video and post it on how to use this plug in and how to put youtube videos on my page and open with fancybox. where there is no videos for this plug in

Hi Ravan,
Great plugin!!! Thanks.
I’m using Fancybox to display the WP login form and I’m trying to close the Fancybox when forms are submitted. I tried adding onclick=”javascript:jQuery.fancybox.close();” to the button but it doesn’T work. Need help.
Can you advise me what trick you would use?
Thanks

Leave a Reply to manuCancel reply

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

%d bloggers like this: