Easily enable the classic FancyBox light box on just about all media links: Images, YouTube, Vimeo, Dailymotion, PDF, inline and iframe content.
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.
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)
- 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
- 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.
- 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.
See a list of known plugin and theme conflicts here
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.
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.
The instructions state to place an image in a class=”fancybox”. I placed the class=”fancybox” before the actual image including the thumbnail image, and after. Both adjustments, which were simply moving the class causes my image not to load in Easy Fancy Box. I can send the code if needed.
Hi Christopher, if you have Auto-detection enabled (Settings > Media under the Images section) then there is no need for adding any class=”fancybox”…
Auto-detection has always been enabled, not working.
Sounds like there is something else going wrong then. Adding class=”fancybox” manually will probably not solve that… CAn you share a link? If not publicly, you can use the contact form on this site 🙂
Hi, I sent the message, thanks 🙂
bro, is it possible to make a submit button on fancybox-iframe ??
i tried but it doesn’t works for me.. any special steps to proceed
thanks for the plugin !!
I couldn’t be more eager for the pro version my friend. Just for the option to round the corners! Also, any chance of including how wide the frame is in the pro-version? Pleeeaaase!
I am trying to auto play a Vimeo video in a lightbox. In Media settings, I have ticked ‘Vimeo’. Auto detect for Vimeo is on (by default).
I placed this code in a widget and nothing happens when the image is clicked.
Hi, I lik your plugin but unfortunately the close ‘X’ option doesn’t appear and also the description field is gone in Chrom and Firefox. It has always been working fine. The strange thing is that it still works for IE… The URL for my website is: http://www.dedreemarken.nl
Hi Huub, that’s not a FancyBox.
First of all, thank you for this great plugin, RavanH, it’s really awesome! 😀
I’ve tried it on serveral of my websites and it works fine, but… I’m trying to making it works on the web celeas.es but i don’t know why doesn’t works. 🙁
I would like if you could help me, please. I need to open the .pdf documents like http://celeas.es/wp-content/uploads/2013/06/2-3-4.pdf with an overlay like Easy FancyBox.
Warm greetings and thank you so much!
Hi Kaled, it’s because your theme already has the FancyBox (an older version) hard-coded in it. You will either need to disable (is there a theme option?) or manually remove that from the theme before the script provided by Easy FancyBox can work…
Hi again RavanH,
I’ve tried to find an option to disable it, but I couldn’t find it.
How could I remove that script from my theme?
Thank you very much for your support. 🙂
Ok RavanH, I think I’ve solved it.
I just deleted the “/wp-content/themes/ElegantEstate/js/jquery.fancybox-1.2.6.pack” file and… now it seems it’s working (your Easy FancyBox plugin)! 😀
Now… the question remains to me is… it’s really necessary to delete the “/wp-content/themes/ElegantEstate/css/jquery.fancybox-1.2.6” file too, or… it’s not required? :S
Hi Kaled, deleting this file (you can probably leave the one without ‘pack’ in the name) is effective but it is not ideal because each page request still means the missing file is being requested to which in turn triggers WordPress to generate a 404 page. This is rather expensive on your server and in fact doubles the load of each page request. Plus, the visitors browser will wait for that 404 page before it can go on with building the web page in it’s tab, increasing page load times considerably.
It would be better to replace the file you deleted with an empty file or better yet, if you’re not afraid of modifying your themes functions.php, find and comment out the piece of code that is responsible for the inclusion… If that sounds too daunting for you, then go for the empty file method which will already be a lot lighter on your server and speed up your site 🙂
[contact-form-7 id=”362″ title=”Contact form 1″]
I have add this code to show contact form in the page. But not work properly can u tell me where is going wrong way.
Hi Shivshankar, I think the comment form partly ate your code snippet so I cannot see what you did exactly. But what you need is this:
1. Activate the “Inline content” option on Settings > Media;
2. Give the link a
3. Wrap the contact form shortcode in the div code as given in the example in the FAQ’s to hide the form and allow it to be opened in FancyBox…
Thanx sir, It’s work porperly
[contact-form-7 id=”179″ title=”Contact form 1″]
I have add this code … but nothing show.
Hi rohit, the commenting system is not suited for (and eats) code snippets. Can you share a link to a page on your site where you are trying to get the contact form working with FancyBox?
Hi RavanH how can i use Hidden inline content with html elements? Thanks
Hi RC, you can create any html element like you normally would, then wrap it inside a div with an unique ID and wrap that in a div that hides the whole package like described in the FAQ’s…
Your plugin is top man !
Salut Baptiste, merci! 😉
nice plugin for my blog… thanks please update this plugin for fast loading
awesome plugin, fast and reliable. I have a problem for multisite. I put easy fancybox plugin dir in mu-plugins and easy-facncybox.php in mu-plugins dir. I’ve did it correctly? It’s not work for me
Sorry, it’s working well. Congrats !
Hi Marian, it’s been a long time since I tested in /mu-plugins/ (in fact, since WP 3.0 arrived) because Network-activate works just as well now and it does not break auto-upgrade. But good to hear it still works from there too 😉
Hi, I’m new on html and WP, would like to know if there’s a simple way of making a call-to-action button open a contact form using you fancybox plugin.
Hi Alberto, yes you can use FancyBox to pop up a form from a button. But you need put some elements together: a nice looking button (that fits your WordPress theme), fancybox (set to use Inline content) and a contact form (inline but primarily hidden from view). So this might prove a bit difficult for absolute beginners… Maybe there is an easier ‘call to action’ plugin out there that has these elements already integrated 🙂
Wow, thanks for you quick reply. I already have the code, provided in this page, to open a popup with the contact form using FancyBox and separately I have the code to make the Call to Action button open a url (I’m using responsive WP theme). What I haven’t been able to figure out is how to link this two pieces of code to get the desired behavior. I imagine it shouldn’t be that hard.
Indeed you seem to be close 🙂 Just send me the code snippets you have already through the contact form on http://status301.net/contact-en/ and I’ll probably be able to help you with that last step…
Hi! I have a problem with the positioning, and I just can’t figure out how to solve it.. The fancybox-content opens annoyingly to the top-left corner before positioning to the center.. What could be causing this, and how could it be fixed?
Hi Sari, can you share a link to your site?
Hi! I found the reason for this problem (caused by WP-supersized). But now I have another.. I can’t get the fancybox-content to stay the right size. I’m pretty sure this is caused by WP-supersized as well, but all of a sudden fancybox-content div is getting an element.styles somewhere..
Oh, and website is not yet opened to public, so I can’t really share the link yet.. or I can, but it won’t really help with anything.
Again, impossible to debug without seeing it live… That said, you need to know FancyBox will try to adapt its frame size to the image size (unless that is bigger than the browser frame) so you might just need to make sure all your images have the same size 🙂
Now I’m able to share a link. Finally. So here: http://www.floraandlaura.com/we-are-open/
I need to set the images under references-link to maximum width (regarding the whole window) around 30% and position them so that the links are still visible (top:~60px). Is there any way to that without just making all the images smaller and uploading them back on site.. ?
Hi Sari, even though I don’t see the size issue you are talking about (not really sure I understand) it looks like you are using NextGEN with its own version of FancyBox. Follow the instructions under “Can NextGEN Gallery work with Easy FancyBox ?” on http://wordpress.org/plugins/easy-fancybox/faq/
I just ran an update, now the close button in the picture frame disappeared.
(check out here: http://sandra-gaetke.de/?p=1745) – can somebody tell me where and how to fix this?
… I didn’t change anything and all the needed buttons in the settings are still checked.
Hi Sandra, it seems your site is currently running into a fatal PHP error so I cannot see what could be wrong, but normally a missing element would indicate a conflict with other CSS rules in either the theme stylesheet er elsewhere. Or something is missing…
I decided to re-install the back-up, which is uploading right now… I’ll try again later. Thanks anyway
I just updated to WP3.6.1. Easy Fancy Box is working, but the gallery icon and editabilty doesn’t appear in the Visual editing window for the page. It does appear in the Text window. Makes editing the gallery a pain. Here’s the page. http://thewatercolorportrait.com/work/
Any ideas? I love the plugin.
Hi Ted, those icons are not part of the plugin. They are part of the WordPress internal gallery so I’d be surprised if the plugin is causing your issue. If you disable Easy FancyBox, do the icons appear again?
You’re right. I disabled and enabled a column plugin and the gallery icon now appears. Thanks.
I have recursively the same issue with firefox and the youtube embedded videos. It seems Firefox ask to have an https url to play the video, in that case, fancybox don’t work anymore and on click, the youtube page opens in place of opening the lightbox. Is ther a fix for that?
Hi trouille2, can you share a link?
We are wanting to run this on our intranet site that will load and play swf files we have recorded using jing for quick tutorials on internal software. I have it installed and have tested with pdf, jpg and swf and none of them are being detected. Any ideas, it seems that nothing is working just yet…
I did just select the YouTube option and that did an autodetect of a test video so I know it is working… But now to get pdf and swf showing up right…
Hi C, There are similar SWF and PDF options just for that 🙂
After updating from 18.104.22.168 to 1.5.5 iframde doesn’t work anymore. When you click on a link you go directly to the page and don’t get the FancyBox.
Hi James, can you share a link?
That’s a little bit difficult. It is an intranet website. There is no access to the website from the Internet 🙁
Hi James, in that case I can not tell you what the issue is… Take a look at the page source code and verify if all the needed script files are included. Notably in the page footer. It might be your theme that is missing the obligatory wp_footer() call? Then use a browser with developer tools (like Chrome or Opera) and check the error/console output to see if there are conflicts with other scripts…
Thanks for the response. On the template wp_footer() was disabled. After enabling it was working perfect.
I have a pricing table on the website which is created with short-codes and css, and I am having difficulty with a contact-form-7 popup using a URL. How would I add this form to the existing short-code setup at [ http://bit.ly/HxrLeg ] using your plugin?…
`[pricing column=4 title=”Starter” price=”$500″ per=”one time fee” button_url=”/#/” button_text=”REQUEST A PROPOSAL”]`
Thanks for coming back to me so quickly. If I can’t use a popup I will just have to link back to contact page with no popup. That’s a a shame but sometimes there just isn’t a happy ending.
My images are not being loaded by Easy FancyBox, they are being treated as a separate post ? I have set the anchor to class=fancybox, fancybox won’t load the image ?
Hi Christopher, always choose “Link to: Media file” when inserting images or galleries.
I forgot to mention, I’m inserting my images though NextGen > Insert Media the code gets inserted, the images are not being loaded by Easy FancyBox ?
FancyBox only works on links to media files. If the NextGEN gallery code generates thumbnails that are linked to pages, FancyBox will not be able to do anything with that. You’ll need to configure NextGEN to link to the media files directly instead of attachment pages…
I wrote a message in the NextGen WordPress forum help, there is no option to link to media files in the latest version of NextGen !
Hi, how would i get the below info to show in a fancybox when clicking a link??
Hi James, it looks like the comment system ate your code snippet but it sounds like you are talking about inline content. See the instructions under “How can I display INLINE content in a FancyBox overlay ?” on http://wordpress.org/plugins/easy-fancybox/faq/ for more 🙂
I have the fancybox-iframe class to the “Hope College Logos” link beneath the Download button.
The fancybox opens, but the iframe content isn’t included. I have tested this a number of ways.
Hi Craig, that’s a weird effect… Funny that in the Opera browser the iframe content is shown, but not in Chromium or Firefox. Did you try linking to any other web page to see if that changes anything?
I did try linking to a number of web pages – URLs such as Google, as well as basic html pages on our own server with “this is a test” content in it.
Any further thoughts on this?
Hmmm… Google will not be caught in a frame if it can prevent it, so that one is very likely to fail. Otherwise, I have no thoughts on this. Except that looking at your site again in Chrome and Firefox, it works just fine now. Did you change anything?
Indeed – the blog is https, so I had a hunch about the embedding from http iframe source. Changed to https in source and it was all set.
Brilliant! Thanks for sharing 🙂
I like the way it looks and works in Google Chrome but in Firefox the pdf pages are off center. Is it not compatible with Firefox?
If you want to take a look the pdf’s are on the “Print” page of my portfolio…. the United Yellow Pages samples are pdfs.
Hi Jeffery, I do not see this off center positioning in Firefox…
I can’t close images anymore, only the “x” disappears. Same with closing by “Esc”. Example is here: http://www.zickzack-kindermode.de/sonderaktionen/
Hi Wolfram, your theme is loading its own older version of jQuery. You need to fix the theme… Or downgrade Easy FancyBox to version 22.214.171.124.
I’m sorry, going down to 126.96.36.199 doesn’t do the trick.
Do you have plans to update this plugin to support Fancybox 2.x anytime soon? I need the ability to trigger fancybox outside of an iframe when the link is inside one. Appears possible with 2.x.
Hi ryantownley, it is currently not allowed to include FancyBox2 in plugins hosted on WordPress Plugins Directory because of licencing incompatibility. But I’ll be looking into a way to offer easy integration of FancyBox2 in the future.
Hi! Thank you for this plugin.
Is there a way to show a ‘loading’ graphic while large pdf files load in the viewer?
At the moment, a static grey box appears till the entire file has loaded. Users may need to get a visual feedback that the file is being loaded.
Any thoughts on how this can be done?
Hi Dee, the FancyBox script cannot detect if object embedded or iframe content has loaded or not. It’s up to the browser PDF plugin which usually means there is just a grey ‘box’. However, there will be an alternative in the Pro extension involving https://docs.google.com/gview …
Any idea how to add the class=”fancybox-iframe” to the woocommerce “Add to Cart” button. I have the image of the product opening up a popup but now also need the “Add to Cart” button to do the same. (Mine is actually a “More Info” Button)
Don’t worry, found it. Had to add fancybox-iframe to add-to-cart.php as such : sprintf(‘<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s fancybox-iframe"