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

Hi Ted, this plugin does not mess with thumbnails. That’s WordPress itself. If there is a grey border around them that you don’ like, you might want to take a look at your themes style.css…

Thanks so much. I figured it out. But now I have two other problems. Here’s the page. http://vanderplasgallery.com/works-2/ There are multiple galleries on the page. When you cycle to the end of one gallery, you get the fist slide in the next gallery. I would prefer that you can’t jump to the next gallery. Also, cycling through the slides, the description only appears if you roll off then back over the image. Anything I can do about this?

You can limit the auto-gallery option to WordPress Galleries only. This should create one gallery group for each WordPress created gallery.

I have the same question. I have a wordpress gallery on the pages and then a separate image in another section. I would like the fancybox scroll to include only the images in the gallery. I tried setting the auto-gallery option to “galleries per section” but didn’t know what to put in the Sections area…left it as default and it doesn’t help. See page http://claystudiotour.com/judy-nelson-moore/. I don’t see a setting for “WordPress Galleries only” in the fancybox settings. Thanks for your help.

Thank you for that great help. That is the feature I was looking for weeks. Is there any solution to combine that with class=”fancybox-hidden”, so that I can group two galleries together: one visible (consisting of one picture) and one hidden gallery? Thanks for your help.

Hi Tina, sure you can. There is a section called “Can I use ONE thumbnail to open a complete gallery ?” on http://wordpress.org/extend/plugins/easy-fancybox/faq/ where you can see how it could be done. In fact, with the new WP 3.5 galleries, it’s even easier to control which images to include and which to exclude so you can prevent that one visible thumbnail image being shown twice in the FancyBox gallery. The only downside of using the WordPress galleries (shortcode) is that even though the thumbnails are hidden from view, they do get loaded by most browsers, causing some unneeded use of bandwidth… If you want to prevent that, you’ll need to create the hidden image links manually, without the thumbnail images.

By Post Author

Hi Dave, the next version will default to iframe embedding (HTML5 instead of Flash) for Youtube movies. Maybe that will solve the play issues. About the PDF’s, I can only say all depends on the PDF plugin installed on the device. And some will never have a PDF plugin. To support viewing of PDF’s on almost all devices, you can switch to the Gviewer method as you can see in the third example on http://demo.status301.net/easy-fancybox-sandbox/pdf-embeds/ …

I have a problem …. when i Install Use Google Libraries …. the X sign ( for closing the popup) disapears and I can’t get the pupup to go away … any ideas?

Thanks In Advance 🙂

Sasa

There could be a conflict going on with the jQuery Easing extension (being loaded twica maybe?) on your site. Try setting the transition to Fade on Settings > Media to see if that solves the issue.

Hi there,

Thanks for the great plugin.

I have some large images, which I would like to show in full size (need to scroll). I tried this kind of code but it didn’t work (the image auto-fits to screen size):

How can I override the auto-fit to screen, when I have large images?

RavanH, thanks for your reply. The description specified in section “Can I use ONE thumbnail to open a complete gallery ?” works perfekt until I set the auto-gallery option to “galleries per section”. Now the hidden galleries is not shown in the fancy box anymore. The fancy box only shows the thumbnail 🙁 .

Hi Tina, so you are using more than one gallery on a page and you would like to keep them separate? You could change the Sections entry to “.fancygallery” (for example) and then edit the post again and wrap each gallery plus its visible thumbnail in a “< div class="fancygallery"> … < /div>” (without the spaces after each “<").

Urk! I Installed the developer version to gain access to the Metadata options for setting the IFrame size and now all I get is the overlay box … empty. Firebug shows there’s no IFrame. What’s worse, I reverted to the standard version of the plugin and it’s not working now either. I’ve changed nothing else, just the plugin, and it was working previously. All I wanted to do was set the box size.

Any clues?

Thanks

Hi MrHasBean, I do not have any idea. Can you share a link to the website with the issue?

Hi Andrew, it’s a theme incompatibility. The content is loaded by Ajax which means after the ‘document ready’ event. FancyBox binds itself on ‘document ready’ but content loaded after that, will not be handled by the script. There are ways to make FancyBox and your theme work together but that’s out of the scope of a plugin. You’ll have to manually integrate the FancyBox extension into your theme using custom event triggers and handlers. Or hire someone to do it for you, of course.

HI,
I want to use iframe or fancy box to use all the posts without doing anything each time i post it.
User should be able to click the post title and see the post content (text & images) in an Iframe.

Hi Jay, this is a difficult thing to do. There are many questions about this on the web and tips on how to do it but all involve heavy theme modification…

I’m getting an error when active the plugin:
Notice: Undefined index: id in /home/fame/public_html/test/codilight/wp-content/plugins/easy-fancybox/easy-fancybox.php on line 349

Hi famethemes, if you have WP_DEBUG on, you’ll get notices like that. Not errors but still annoying of you are debugging something else… To get rid of them, please install the latest Development release of Easy FancyBox. Get it from http://wordpress.org/plugins/easy-fancybox/developers/ and install via FTP (not the WP internal plugin installer).

Hello,
I am using a template that has a builder-style interface and I hope you can assist me with this issue…

Currently, I am using an image that is rendered via the builder, and this image has a class of ‘fancybox’ applied to it. Please see screenshot attached here:
http://i.imgur.com/XtDeABl.jpg

In the highlighted area, you will see there is an area for a hyperlink.
I want to link this to a page or post that has a gallery, and present the gallery on that page or post inside of fancybox.

Right now, I am either getting an infinite progress circle (nothing is loading), or if I use fancybox-iframe, I am getting that entire page or post inserted into the fancybox, which is a problem because I only want the images from that page’s or post’s gallery to appear in the fancybox, not the entire webpage.

Any suggestions on how I can achieve this with such a theme setup?

If not, and I have to wrap an image around a tag to display a gallery in fancybox, what would be the syntax to accomplish this? Luckily, I have another option to create a thumbnail manually using a ‘text block’, please see attached image:

http://i.imgur.com/VLUUqDP.jpg

Sorry If I am rambling, but what I basically want is a thumbnail to open a certain set of images in a fancybox. If I can do it with the theme provided image block, fine. If not, hopefully I can use some HTML code to achieve this.

Thank you for your time and have a great day.

I am getting closer:

[nggallery id=1]

But when I click on my custom thumbnail, the first image it opens is the NextGen thumbnail. You must click that image to view other images in that gallery.

Any suggestions???

Hi Elemental, I have no idea how your theme works but to get Easy FancyBox to work with NextGEN Gallery please take note of the instructions on http://wordpress.org/plugins/easy-fancybox/faq/
Start at “Will a NextGen gallery be displayed in a FancyBox overlay ?” and continue with the NextGEN related part of “Can I use ONE thumbnail to open a complete gallery ?” right below that…

I’m using Auto-rotation (Slideshow) and it’s working but I have two questions.

How to change the fixed 5 second pause? I want it to be 3.5 seconds. I found file: easy-fancybox-settings.php and the notation of 5000 but changing that seems to have no effect.

How to restart the slideshow from the beginning. It just stops on the last slide…

Hi Ron, a Slideshow with adjustible time values is planned for the coming Pro release. But it’s not ready yet…

Hi! I’ve used your plugin for a while now and it have worked great trough all the updates but now with 1.5.0 everything went wrong. Now it doesn’t work at all. My images are just opened in a new window and i can’t really understand why!
Could you please check it out?
http://www.24fps.se

//Anton

Hi Anton, your site / theme is using jQuery version 1.4 from the Google API instead of the one included with WordPress, version 1.8.3. Can you find out why this is? A plugin? The theme? It needs jQuery 1.7 or above…

after a recent update our homepage scrolling gallery will no longer hold multiple pictures properly. previously we could just upload to media and attach img to “Home” and it would throw it in the gallery. I have tried and tried to fix and it may not even be a fancy box problem. any help would be GRrrrrrrrrrrrr-8!!!!!

Hi Murphy, please check the option ‘Auto-gallery’ on the Settings > Media page. Either set it to ‘All in one gallery’ or adapt the ‘Section(s)’ option to your theme… If that does not work, please send me a link to your site.

Hi!
Thanks a lot for the great plugin!

There is just one problem… When I have created a gallery, with one thumbnail to open the complete gallery, I have this problem (when I have more galleries on the same page):
When I open the first gallery it keeps continuing into the second gallery and so on… 🙁
It is really annoying because then the gallery option is ruined, I think.

Hope you understand what I mean and help me!

/Nanna

I go to pages and follow your guide “Can I use ONE thumbnail to open a complete gallery ?” and then publish it.

I hope this is enough answer (I am brand new on wordpress).

Hi Nanna, yes but which one of the two methods are you using? Or maybe you can share a URL of your gallery page so I can help you better?

I used this method:

Can I use ONE thumbnail to open a complete gallery ?

It can be done manually (using the internal WordPress gallery feature, or not) or in combination with NextGen Gallery.

Manual

A. Open your post for editing in HTML mode and insert the first image thumbnail in your post content (linking to the images file, not page) to serve as the gallery thumbnail.

B. Place the following code to start a hidden div containing all the other images that should only be visible in FancyBox:

C. Right after that starting on a new line, insert all other images you want to show in your gallery. You can even use the WordPress internal gallery feature with the shortcode . NOTE: if the gallery thumbnail is attached to the post, it will be show a second time when flipping through the gallery in FancyBox. If you do not want that, use an image that is not attached to the post as gallery thumbail.

D. Close the hidden div with the following code on a new line:

I did not use the “NextGen gallery” method.

Here is a link to the gallery: http://nannachristensendesign.com/photos/

Hi Nanna, the Auto Gallery function cannot distinguish between the two different galleries.

You will need to do this manually:
1. Disable the auto-gallery option and then
2. Open your post for editing and give each link a distinct rel attribute value.
To do this in the View / Wysiwyg tab: click an image, then open the Edit Image dialog (icon on the left) then go to the Advanced Settings tab and find the field ‘Link relationship’. In this field, you can set a value like gallery1 for the first gallery, and gallery2 for the second gallery. do this for each image in each gallery so that all images in each gallery have corresponding rel values.

This way, FancyBox knows these are two different groups.

By Post Author

Hi,

Great plugin, thank you!

Is there a way to do the following? To have an image, and when someone clicks on it instead of the image coming up, INLINE content in a FancyBox overlay comes up?

Thanks again,

Jamie

Hi Jamie, yes that is possible. FancyBox works on LINKS and it does not matter what they look like. You can put a thumbnail image (or any other size) in your post/page and link it to the inline content just the same way as you would when linking plain text. See the instructions for inline content and use the href value when inserting your image in the Custom URL field.

Thanks very much for the speedy reply. I’ve had a go at this and it doesn’t seem to work, would it be possible to check out my html?

Click on a tab below to help you to decide which one of our courses you would like to study.

Thanks again,

Jamie

Hi Jamie, pasting code in comment fields does not work well. Can you share a link? If not publicly, then use the contact form on this site.

Hi Ravan!

Have been very happy with Easy Fancy Box as you already know. Haven’t had a problem with since you helped me when I lasted post an SOS many months ago. If you could help me once again, I’d really be very grateful. I can’t figure out why all of a sudden the plugin stopped working on the home page of one of my sites. On all the other pages, it’s working quite well. I haven’t done anything other than change the video links on the sidebar. The home page URL is:

http://fanfairefoundation.org

On loading, it should pop-up an Easy Fancy Box lightbox (which it did until yesterday); also the links (to some ,pdf files and web pages) in the body and the sidebar are not working anymore as they should. Looking forward to hearing from you.

MANY MANY THANKS!

Hi Gloria, I cannot really figure it out but it looks like there is some conflict going on with the scripts from the gForm on your home page. Are there any other pages where you use gForms and FancyBox together? And could you maybe contact the gForms dev and ask if he/she can spot where the conflict actually occurs? I cannot seem to be able to pinpoint it…

Thanks, RavanH! It’s really strange because it’s only on the front page that a conflict suddenly appeared. Like I said, it has been working all this time on this page until the other day. I have the same gForm on most, if not all, the pages, and Easy FancyBox works in all instances where they appear together, e.g.

http://fanfairefoundation.org/about/why/

where some of the same links used on the front page are also used.

So, it must be something other than the gForm, right?

I’ll recheck the code and see if something got inadvertently modified while I was doing some minor editing of the site. Thanks so much for your very kind attention.

It would indeed suggest there is a third factor in play. Could you try temporarily switching off other plugins (either all at once, then reactivating one by one or the reverse of that) to find out at which point the issue resurfaces? Start with gForms to see if that indeed ‘solves’ the issue on the front page, then reactivate gForms again and try to find out which ohter plugin or script code (did you add anything to your theme or sidebar widgets?) plays a role in the issue…

Thanks, as always! I’ll do what you suggested soon as I find time. No, I didn’t add anything to the theme, and the only thing I change in the side bar is the embedding code for the videos, and only because the videos were no longer showing up in the Easy FancyBox lightbox (as they still do on the page I cited earlier).

Hi Gloria,

I’ll do what you suggested soon as I find time.

Completely understandable, it’s a tough one to figure out… It would be great though if you can find out more so it can be fixed for others too. So if you could report back if and when, great! 🙂

Hi RavanH! This is the third time I’m posting this reply. I didn’t realize until now that I have been getting an “invalid security token” and thus my reply is not being posted. Anyways… I’ve been trying to tell you that I don’t thing plugin conflicts are the culprit. It’s most likely my easy fancybox popup code, which I may have inadvertently modified while editing pages on the site. I came to this conclusion because before disabling the plugins, I thought I’d copy-and-paste the popup code on another page that contained easy fancybox links that work, and sure enough, the links ceased to work when the popup code was added. Also, when I removed the popup code from the problem front page, the other easy fancybox inline links worked! So, my eyes are obviously missing something as I’ve parsed the code over and over again, and I can’t pinpoint anything wrong.

I’ve been copying the code here in the hope that perhaps you could give it a quick look and perhaps immediately see a missing or extra punctuation, or some other small thing that is so easily overlooked. BUT I’m removing it now thinking that it may be, because of its length causing the invalid security token, If it’s not, I’ll try posting it again.

MANY THANKS for your kind help and patience, as always! – Gloria C

Hi RavanH – I keep getting an “invalid security token” message when I try sending the code. I’ve tried commenting out the lines. Is there a limit to the length of the reply? Thanks – Gloria C

Hi RavanH – Here is the popup code. I’ve considerably shortened the inline content. Hope it works this time around. THANKS – Gloria

<!

“I would teach children music, physics, and philosophy; but most importantly music, for the patterns in music and all the arts are the keys to learning.”
– Plato

!>

Hi Again RavanH! I realize I didn’t use the comment out tags in the above reply correctly. I’ve tried sending the code with the correct comment out tags, but no dice! What’s the best way to send it to you so you can take a quick look? Many thanks! – Gloria

I finally found time to check the plugins re: my problem with re: the easy fancy box pop-up not working, and disabling all easy fancybox links that are on the same page along with it. It appears that there are two plugins causing the problem: Collapse-O-matic and Gravity Forms BUT whatever conflicts there are seem to adversely affect ONLY the page that has a pop-up easy fancybox code and if this page also has other easy fancybox links, these are negatively affected as well, i.e., they are disabled, such as what happens on the home page of one of my sites:

http://fanfairefoundation.org

However, as I pointed out earlier, once I remove the pop-up code from this page, all the other easy fancybox links work again. So, it appears there is something in the pop-up code that conflicts with these two plugins–and ONLYwith the pop-up– since on pages where both the Collapse-O-Matic and/or Gravity Forms plugin are working, your easy fancybox links work also without any problem, whether these link to a .pdf, a YouTube video, or an html file, etc.

It would really be great if you could find a fix for this. It would be nice to have a pop-up for those instances when a pop-up serves a useful purpose. For myself, as of now, since I use the pop-up only when there is an important message or announcement to make, I have chosen to remove the inline/pop-up code from the page rather than disable the Gravity Forms and Collapse-O-Matic plugins which work beautifully with Easy FancyBox (minus the pop-up) on all other pages. Your thoughts?

Many thanks again…. and all best!

Gloria

Great! So you found the third actor in this mystery… Now for the final step in this ‘who-dunnit’, could you create a temporary test page with a FancyBox popup and the two others active to reproduce the issue? You can set visibility to ‘Password protected’ and send me the URL + password via the contact form on http://status301.net/contact-en/ to avoid publicly sharing a URL that should not be indexed… Thanks for following up on this 🙂

On an iPhone or iPad the inline lightbox is cut off and doesn’t show the right size. Is there something I can do to fix this?

Hi,

I’ve got FancyBox set to work for images and pdfs. However, it seems to also want to kick in on links that refer to other web sites.

Our site is reconciliationcanada.ca, the ‘click here to donate’ link on the right sidebar goes to https://www.gifttool.com/donations/Donate?ID=1377&AID=449&PID=3568. When FancyBox is activated, clicking on the donate link results in overlay and box with ‘unable to display’ error message.

In settings, pdf and images are only items activated.

After fiddling with settings for ages and various troubleshooting efforts, have resorted to deactivating FancyBox.

Any ideas?

Hi Julia, I suspect the script reacts to the “.gif” inside that particular URL. Do you have GIF in the Auto-detection field on Settigs > Media?

Aren’t you clever?! 🙂 Yep, that seems to have been it. The auto-detection field had “jpg gif png”. I tried “.jpg .gif .png” to no avail, but removing .gif altogether did the trick. Thanks.

I have found some sample code and done some additional testing and it seems that as soon as I put an anchor tag with the “fancybox-auto” id, all of my pop-up links cease to work. I’ve any idea as to the problem?

Here is a link to my site:

[removed]

Hi Robert, you’ve hit a bug. I just released a fix (or at least it should be a fix). Please tell me if the issue remains after upgrading to 1.5.2. Thanks for reporting! 🙂

Just updated to the new version and it seems to be working now. Thanks for the quick fix.

Great plugin, nice settings and all, good work.

One bug I’m encountering while I’m trying to work on a site right now is that the Vimeo fancybox appears perfectly when I play it but if I happen to refresh the page and try to play it again, nothing happens, the video doesn’t want to open up anymore. Do you have any insight on this by chance? Cookie related maybe? And if so, a way to work around this would be greatly appreciated.

Thanks!

Hi Leo, It depends on how you are integrating your Vimeo movies. If you can share a URL, I can take a look.

Hi Leo, I get a “Oops! Something broke. Please try again later!” message each time but that is something on Vimeo’s side, not anything FancyBox can fix… Even if you replace the &autoplay=1 with ?autoplay=1 (which you should) you still get the same message. Same when viewing the video straight on the Vimeo page.

Leave a Reply to RavanHCancel reply

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

%d bloggers like this: