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

I have installed your plugin and implemented in on a post. It keeps loosing the “Popup” function. Meaning, I had it working fine, actually a couple of times. But it seems to go away, and then the link goes to a new page in the browser instead of popping up a window. Here’s a link to the post. Click on the window and you’ll see it loads the post in a new browser window, not a popup.

http://bluegrassphotography.net/testwordpress/category/portfolio/people/

Here’s the attributes I’ve applied to the image:


I am close to wrapping this site up for my client, but this keeps happening and they want it fixed, so any help would be highly appreciated!

Hi Chris, looking at the page source I notice you have added class=”fancybox-iframe” to the link tag. This is good start but the complete fancybox script in your header is missing. Have you switched the plugin off or is your theme not using wp_head(); anywhere between the tags in header.php ?

Yes, I deactivated it for a few minutes. It’s been re-activated!

Not sure what you’re asking below?

I can add the “script” to the appropriate header (there are quite a few headers on the site). What is the script? Is it on the Easy FancyBox site somewhere?

My question is: Do I add the script to the header of the page I’m “Popping up” from? Or the page that’s going to Pop up?

The page I’m popping up from is doable, but the page I’m popping up doesn’t have a header applied to it.

Hope this answers your questions good enough to help me out.

Thanks for the quick reply by the way! Very much appreciated!

Chris

Ah, ok… well… it looks like somehow the default wp_enqueue_script/style() hook is not working in your theme. No idea why ( better use another theme to start from or better yet create a fresh twenty-ten child theme, I would say 😉 ) but adding the header tags manually should work if you make sure they are added to PAGE/POST headers too. Right now, I see the FancyBox script files in your frontpage header but not in the header on http://bluegrassphotography.net/testwordpress/category/portfolio/ where you are actually needing them… Hope you can figure out what to edit now 🙂

Hi,

I love Easy FancyBox! It’s been a big help. Is there a way to launch a file in FancyBox on page load? I’ve been playing around with it but I’m no great programmer. I’m hoping you might have some advice.

Hi Marc, Launching a file on page load is possible in FancyBox but it has not been implemented in my plugin yet. It’s on my todo list somewhere but I do not know if I’ll have time for it soon… Neither have I studied it before so I cannot really give you any solid tips. Except what can be read on http://fancybox.net/blog (tip 6, the second from the top) but it all depends on what you want to achieve I suppose…

Hi David,

There are several things wrong in your page source code that you need to take care of first. You can check them all out on W3C Validator but the ones responsible for the PDF not opening in FancyBox are:
1. one line 13 there is that does NOT belong there (unclosed tag, breaking the whole header in terms of js DOM)
2. the actual PDF link should (among others) not have target=”_blank” in it, so instead make it look like ... (without the space between the ‘<' and 'a' at the beginning there)

Then the PDF should work – at least 😉

thanks for the quick reply, i added that target right now until i could get this figured out. I’ll take a look at why the header is broken, seemed like a good theme, maybe some things were overlooked. Thanks!

great, that definitely fixed it. Not sure why that was in the header, probably remnants of old code forgotten. thanks!

Hey, I really like the look of this plugin. I’ve tried it on my WordPress site – in a page gallery of two images:

http://confessionsofasocialmediaproducer.co.uk/gallery

When I click on one image, that takes me to another page which has just that one image on. This is the URL for that page:

http://confessionsofasocialmediaproducer.co.uk/gallery/attachment/dpp_edit016_sharp

Only when I click on the image on this page does the image open in Easy Fancybox. What have I done wrong? Is it something to do with how I’m uploading the images, or where they’re being stored.

Thanks in advance for any help you can give.
Best wishes
Sam

Hi, when inserting an image in your page/post content, you need to link DIRECTLY to the image you want to open. Not to the attachment page for the image… During the Add Image steps you will notice a Link To option. Re-insert the images to change that option.

Hi Michael, are you experiencing conflict anywhere? With what other javascript library?

I thought I was using ‘safe’ code (not needing noConflict mode) everywhere but maybe I missed something. If you have a link for me, that would be great 🙂

Hi!

Thanks for this awesome plugin!

I’m having trouble with the size of the iframe window – it doesn’t see to care what I enter for width or height in the settings, it’s always 560x340px

I have tried chaning both the iframe setting and the overlay, but it wont affect the size

Here’s an example:

Hi Vaco, are you calling that content with ‘fancybox-iframe’ or just ‘fancybox’ ? You see, that content needs FancyBox’s Inline mode since it is not a full HTML source… And in Inline mode, Fancybox will adapt to the content width and height. In this case, those are set in the style tag: “…width: 560px;height: 340px”. This will cause FancyBox to size itself to those dimensions, just like it does with different size images.

When you need that example content to be displayed in an iFrame (of which you can control the size in the Media settings) you need to put it in a separate file or on a seperate WordPress page/post and then link to it via a link with class=”fancybox-iframe”.

I just realized that that example code is taken from the FancyBox output that you are seeing. Correct? I would be more interested in the code that you use to trigger the fancybox iframe. Or maybe you can you give me a link to a page where I can see this happening?

Hi RavanH, colourbox js installed in my theme as I want to use fancybox for my galleries and would like everything to look the same accross the whole site.

Thx!!

Thanks for the great plugin. It has been a fairly painless way of getting FancyBox working on my site.

I wonder if you might consider a couple enhancements for a future version?

1. How about only loading the js and css on pages where it is needed? No need to have the extra page weight if a FancyBox won’t be displayed.

2. Would this still work if the scripts were loaded in the footer? If so, an option to do that would give the perception of the page loading faster.

Hi Doug, thanks for the suggestions. Number 2 is already planned for the next release but number 1 will be VERY difficult to implement in a fool-proof way.

Yes, I could make a filter to check for img, gallery, youtube etc. code in post/page content before loading the script in the footer. But a lot of users want also to have sidebar images, movies or PDF / external links load in an overlay. Whether they are in a NextGen or other media plugin widgets, plain text widgets or just hard-coded… Difficult to account for all the possibilities.

Though it has crossed my mind to make it optional 😉

Hi RavanH,

Thanks for the great plugin. I have been using the plugin recently with BuddyPress. My goal was to include the iframe option on specific links within the activity stream. What I have noticed is that it works great when the page is first loaded. If you then try to filter the data or click on “My Friends” or “My Favorites” and activate the same link, it simply opens the link in a new window. Do you think this is because the new data being displayed via AJAX never loads a required function (maybe in the header?). Just trying to understand this better and see if there are any options around it.

Thanks again! Great plugin!
Chad

Basic explanation: after the page has loaded, jQuery javascript auto-attaches FancyBox to certain parts of the page source like image links or in your case some links that should load in an iframe. But if you have other javascript running on the site that changes the source code after it has been loaded (and after FancyBox has been attached) then that might indeed undo/break the attachment… Or if that script loads some new source code without triggering the onload jQuery script that attaches FancyBox to it, that new source code will not have FancyBox enabled links.

It is hard to tell what is going on without knowing what that javascript actually does and it also might depend on HOW you actually have set up the jQuery in my plugin to attach FancyBox. Do you have a link for me?

I just installed the latest Easy FancyBox (1.3.4.5) plugin in a WP 3.0.4 blog at http://wpblog.teribloom.com/ but it does not appear to be working.

I then turned off all plugins except for Easy FancyBox and reloaded the page. Still no joy.

I’m sure it’s something simple, but I just can’t see why it’s not finding the anchor-image selector and taking control of the link/click.

Love the concept of a fire-and-forget plugin, but just need to get it working. Thanks!

Not so ‘fire-and-forget’ if it is not working, is it? 😉

On a serious note: the plugin is working on single pages like http://wpblog.teribloom.com/?p=17 , just not on your home page and archive pages. This is because your theme does not wrap post content in divs with class=”post” (like usual in WordPress themes) but with class=”contenttitle”… To fix this issue, you could edit your theme template files like home.php, category.php, archive.php and replace the code

with

(remove the space between ‘<' and 'div'). If you do not want to edit your theme, you have the option of editing the plugin file (mail me for instructions) or wait for the next release where will be an option to switch of this behaviour for archive pages…

RavanH, thank you for your quick reply!

I did as you suggested – adding the class ‘post’ to the home page content divs – if you check the site again (http://wpblog.teribloom.com/) you can see

on the entry on the home page.

However, the image still just links to the actual image and does not pop the FancyBox 🙁

I do see that it does indeed work on the specific post page directly: http://wpblog.teribloom.com/?p=17

So, I must be doing something else wrong… Any ideas?

Looking closer at your page source, the div with class “contenttitle” only wraps the title and not the post excerpt. Reverse that last change and place a

at the beginning of the loop, just before the

for example and place an extra closing at the end of the loop… (note: take out the spaces between ‘<' and 'div' and '/')

Hi,

Great plugin! 🙂

I just upgraded the version that was released today (1.3.4.6) on my development server, and none of the images or youtube links are opening in a fancybox. Everything was working prior to this update. I rolled back to the old version and everything worked again. Just for fun, I tried on my production server and same result. Had to roll back. Settings were carried over and looked fine. Any ideas?

Hi John, I cannot tell you what may have gone wrong. Is the script in the header there? And the css/js files in place and correctly referenced in the header? What theme are you using? Because it might be that you need to change the new option “Auto-gallery” from the default “Post/page images only, separate galleries per post” — which needs post/page content to be inside a div (or article for HTML5) with class hentry — to “All images, one gallery for all” to make it work on your theme.

If one of the upgrades (on dev or prod server) is still active and accessible from the web, I ‘d like to take a look and tell you more. Mail me a link if you can…

Hi Ravan,

I’m using the Studiopress “Lifestyle 40” theme.

Changing the “Auto-gallery” setting as you suggested did the trick! Thank you very much for the help and the nice plugin!

John

Hi Ravan,
I have a problem, and I *think* I’ve narrowed down the problem to a plugin conflict (www.yourlittlefilm.com/biz) but it is working GREAT on http://www.yourlittlefilm.com (see http://yourlittlefilm.com/films/ and click on a thumbnail).

I started deactivating and reinstalling things on the ylf/biz site. And this is the only thing that I can see – the video plays fine on its own, the video plays fine in the single custom post type (http://yourlittlefilm.com/biz/films/watch-what-we-do/), but when its in the pop-up it uses a TON of resources from the browser to load and then I have difficulty closing the screen.

Can I hire you privately to trouble-shoot this? You have my email address! I look forward to hearing from you – thank you!

Hi Cathy, I see what you are trying to do and also the 100% processor time it takes… A highly creative use of FancyBox with great result, if it works ofcourse 😉 but I think I can help you out. An e-mail is on it’s way…

Very nice wordpress plugin! Works great on my sites, was just wondering if this plugin has a slideshow option while viewing gallerys in this fancybox… Or did I mis that part somewhere…?

Hallo Joop,

If you mean by “slideshow” that it auto-rotates the images then: No you did not miss anything on that because FancyBox does not have auto-rotation incorporated as a parameter so my plugin does not have a simple way to do this. However, there is a method in the FancyBox API ($.fancybox.next) that can be used to set such a thing up with some custom javascript like
setInterval($.fancybox.next, 4000);

This feature has not been tested yet but it IS on the roadmap for a future release of Easy FancyBox…

Hi Ravan,

Just wanted to start by thanking you for an awesome WP Plugin! Works awesome. I ran across a scenario where I have anywhere from 40-50 different SWF files of varying size. I wanted to share with you the mods I made to allow resizes for individual elements, instead of one default size.

After some research I learned of a jQuery Metadata plugin which allows you to extract metadata from tag classes. I downloaded the jquery.metadata.js from http://plugins.jquery.com/project/metadata and dropped the jquery.metadata.js into the fancybox plugin directory

I then added the following 2 lines to the easy-fancybox.php file for the script to register.
after line 15:
define( ‘METADATA_VERSION’, ‘2.1’);
after line 1160:
wp_enqueue_script(‘jquery.metadata’,plugins_url($efb_subdir, __FILE__).’/fancybox/jquery.metadata.js’, array(‘jquery’), METADATA_VERSION);

And now on any of my SWF links I just add… <a class="fancybox-swf {width:800,height:600}" … and voila! I can resize individual SWF links to the actual SWF size.

You may not give a crap, but I just wanted to pass this on in case you want to use it.

Thanks again for the great work you did on this plugin. Cheers!
~Eric

Hi Eric, the Metadata plugin was on my TODO list but I have not had time to look at it. Your code will save me a lot of time and will likely make it into the next release… Thanks! 🙂

Hi, is this feature now built-in to the plugin? I’m trying to figure out how to do what Eric was describing. Please advise. If not I will try and retrace his steps to achieve this (since I have no idea how to make varying fancybox sizes for .swf files). And I only have two SWFs I need to do this with!!! 🙂

Thanks.

Hi Drew, no I still have not had any time to move forward with integrating the Meta-data plugin… But if you are only going to need this for two swf files, you might try a different approach: read the section in the FAQ’s about displaying INLINE content. This method will allow you to take control over the size of the displayed content without needing to hack the current version of this plugin 🙂

Hi Cathy, the first thing I notice is that you need to change the option “Auto-gallery” to “All images, One gallery for all” which will make it compatible with your theme.

But then there seems to be abother problem. The stylesheet returns a 404 : http://desperatelyseekingwp.com/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4 … Can you check if that file exists at all?

And the third problem is that the jQuery library is loaded 3 times (and different versions) which is sure to cause problems…

Hi ugo, it looks like WP filtered out some essential parts in your code. Can you submit again but this time putting a space between each opening ‘<' and following character (like 'a' or '/') ? Or maybe use the contact form to send it via e-mail… Thanks 🙂

just found out that it was only matter of activating the iframe in the media>settings menu, now even the class fancybox-iframe works 🙂

sorry to bother, sometimes we all need to check all the possible options before asking support…
btw great plugin Ravan, it would be nice to have it in the myeasy series!

Hi Rhavan,
awesome Plugin. Works like it is supposed to on a WP 3.04 MS installation.
But …
Maybe I’m missing something and you can point me in the right direction. If I load a page automaticaly via an iframe and there is a link to another page, I want to get out of the iframe. So I use target _parent or _blank. Works fine if I load the iframe by itself. If I load the same iframe in easyfancybox it does not leave the overlay. For clarification: I want it to close the overlay and open the link according to its target settings.
What am I missing?

Hello to you all! I’ve been reading through the comments and saw one other person having issues with pdf’s/mac. My pdf’s aren’t showing up. When I click on the file link that I inserted/embedded into my page, the overlay box appears, but just appears a gray empty box with no pdf document inside. I use mac/safari. I forwarded the link to a friend on windows and hers did the same thing. Please help! THank you!

I’m using FancyBox to display pdf files. In Firefox they are showing up wonderfully, but when I try the site in IE 7, a blank box pops up. I have enabled “auto detect” in the pdf settings, and I also tried adding the class=fancybox-pdf to force it, but still blank. What gives? I really don’t want to go back to making all my pdf’s into jpg’s because I want to turn the site maintenance over to the company so they can update these pdf links themselves… Thanks!

Hi Yvonne, do you have a link for me? It looks like you are using lightbox2 on your garrisonestates site…

Yvonne, I think I found the problem. It should be fixed in version .7 that will be released right now.

Thanks for reporting the issue.

Hello Ravan.

First: Nice PlugIn, works very well.

My Question: I use more than one inline-content in one post, that’s no problem. But is it possible to step thru the different inline-content without leaving the fancy-box… just the way like a gallery?

Thanks for your help…
Jörg

Hi Jörg, I have not tried that before but I suggest you test with giving all the links the same rel=”xxx” tag. Those x’s can be anything but if you make it “gallery” you will append the inline content to any FancyBox image gallery you might already have on the same page.

Let me know if if works or not 🙂

After updating to v1.3.4.7, I discovered that the overlay opacity/color properties no longer work. The ‘spotlight’ effect is less than desirable…how can I get the overlay to be a simple, professional solid color again? I can see the color and opacity properties in the CSS, but they just don’t display…pretty frustrating to update plugins and have them break basic functionality and change admin settings that were already properly in place.

Thanks,
Cody

Leave a Reply to RavanHCancel reply

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

%d bloggers like this: