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

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”…

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 Kailash, FancyBox can be triggered from the click on a submit button but you’ll need to jump some hoops. This plugin is not really suitable for that without either modifying it or inventing some intricate custom jQuery snippet to make it work for your button. I suggest you integrate the bare FancyBox scripts into your theme manually and add the needed javascript to make FancyBox aware of your button. There are a lot of how-to’s and tips about this particular usage of FancyBox out on the internet…

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!

Hi!

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…

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 🙂

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 class="fancybox-inline" attribute;
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…

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 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…

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

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 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.

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! 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..

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 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 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?

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?

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…

After updating from 1.3.4.9 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.

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…

Hi,

Thanks for the response. On the template wp_footer() was disabled. After enabling it was working perfect.
Thanks.

Regards James

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”]`

Hi Terence, I’m not sure but it does not look like you can give a specific class to the link in this pricing table shortcode… To be able to make the button/link display something in FancyBox, you’ll need to give that link a specific class, like “fancybox-inline” for example. If this is possible with the picing table shortcode, then you can make it work. Otherwise, it will need some really specific custom javascript to get it working.

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 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.

Please advise.
Thx
CT

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?

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?

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 Wolfram, your theme is loading its own older version of jQuery. You need to fix the theme… Or downgrade Easy FancyBox to version 1.3.4.9.

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?
Cheers

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 …

Hi,

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)

Thks

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"

Leave a Reply to JamesCancel reply

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

%d bloggers like this: