Dougal Campbell's geek ramblings

WordPress, web development, and world domination.

FancyBox Gallery


FancyBox Gallery integrates the FancyBox jQuery plugin into the WordPress
gallery functionality. Simply use the gallery shortcode to display
thumbnails in your posts with the option to link directly to the images (not
the attachment template), and the plugin handles the rest. You get nice
popups for the larger sized images, scaled to fit in the browser window,
with a nice overlay effect.


  • Automatically scales large images to fit in window
  • Adds a nice drop shadow under the zoomed item
  • Groups related items and adds navigation through them (uses preloading)

FancyBox jQuery features, not yet implemented in the WordPress plugin:

  • Can display images, inline and iframed content
  • Customizable through settings and CSS


  • Add a settings screen. Allow control of FancyBox display options.
  • Let user set their own CSS selector, instead of assuming the standard
    WordPress shortcode.


The FancyBox jQuery plugin is by Janis Skarnelis, and can be found here:


0.3.2 2010-01-10

  • Tested up to WordPress 3.0-alpha

0.3.1 2009-06-11

  • Fixed path to easing plugin.

0.3 2009-06-11

  • Upgraded to fancybox 1.2.1
  • Due to new version of fancybox, which requires jQuery version 1.3.2,
    the plugin now requires WordPress 2.8 (or at least the newer jQuery)
  • Now supports next/previous image navigation within gallery images of
    a post.

0.2 2009-01-26

  • Override table styles for image captions so that it works better with
    more themes.

0.1 2009-01-25

  • Initial release. No options, yet. Only works if you use the gallery
    shortcode like so: [gallery link="file"]


Click an image to enlarge. Use mouse or left/right arrow keys to navigate between images. Click the ‘X’ or press ESC to exit lightbox mode:

And here’s a second gallery, notice that the navigation for each gallery is separate (you don’t browse from the end of one gallery to the beginning of the next):

About Dougal Campbell

Dougal is a web developer, and a "Developer Emeritus" for the WordPress platform. When he's not coding PHP, Perl, CSS, JavaScript, or whatnot, he spends time with his wife, three children, a dog, and a cat in their Atlanta area home.
Bookmark the permalink.

38 Responses to FancyBox Gallery

  1. Pingback: FancyBox Gallery demo fixed

  2. Pingback: FancyBox Gallery WordPress Plugin Review

  3. nellone says:

    there are some problems with your dropdown menu… it vanishes 😐

    fix this and you’ll be ok 😉

    #header-container nav ul ul {top: 32px}
    instead of
    #header-container nav ul ul {top: 35px}

    • Dougal says:

      Thanks for pointing that out. I had made some adjustments to the styles mainly for mobile, but didn’t notice that it affected the dropdown menus like that. Should be working better now.

  4. chris says:

    thanks a lot for the plugin. its exactly what i was looking for. i just have one question. is there a way to not have the image titles shown?

    thanks again

    • Dougal says:

      At first, I thought you meant the captions with the thumbnails. You could hide those by adding a rule like this to your CSS stylesheet:

      .gallery-item .gallery-caption { display: none; }

      Then I realized you probably meant the titles that appear beneath the lightbox images. For those, try adding this to your stylesheet:

      #fancy_title { display: none; }

      I’m planning to update the plugin when I get some breathing room at work.

  5. Fran says:

    Great plugin. Looking for away to display the image title in the popup fancybox. jQuery fancy box does it:

  6. Dougal says:

    I have started working on some updates for the plugin. The new version will allow you to control settings for titles and such.

    Watch for an update sometime soon-ish.

  7. works OK on wp3.4 however what i would like to see is the fancy box work on a single image, also maybe be intelligent to screen size and resize image to fit if image size exceeds screen size it looks messy with a caption thx

    • Dougal says:

      The new version will allow you to lightbox any element in your content by adding the ‘fancybox’ class to the link. It should also give you more control over captions and such.

  8. thain says:

    Hi Dougal,
    I can’t get the plug-in to work.The shortcode is in [gallery link="file"] but absolutely nothing happens. Is there aomething else I need to do? I’m on a local server so unfortunately can’t include a live url.

    • Dougal says:

      Without being able to see the site, it’s hard to say what the problem could be. You’ve used the WordPress media uploader to attach images to the post? That should be all there is to it.

      I have, however, seen themes override the gallery shortcode output. If your theme changes the gallery HTML output significantly, it could cause the jQuery selectors to fail to match. I might be able to add an advanced config option in the next update to let you override the selector.

  9. Pingback: Les galeries WordPress, en fait c’est pas si mal ! par

  10. mark says:


    fab plugin , when is the new version out? as no updates have appeared on my dashboard.


    • Dougal says:

      Sorry, just as I started making progress with the updates, I ended up changing jobs. I do still plan to finish things up, it’s just hard to find the time.

  11. craig says:

    Hi. I am trying to make the icons bigger on the page and have looked but cant find any answers. Can you help please.

  12. Yves says:

    Hello Dougal,

    First, let me tell you this is a fantastic plugin. Very simple, yet does a magnificient job. Now I know you’re working on an update, but I’d like to know whether it’s possible to have the light box showing the image at a slighty smaller percentage. It seems to have some trouble with vertical pictures, where the title under the light boxes is squeezed out of the screen and creates bizarre scrolling situations in the page (at please in Google Chrome). I’ve tried tweaking the css properties of the title and fancy box divs but it seems like the solution may be deeper in the code.

    I don’t know if you have a light fix for that or if it has to be integrated in the new version, but feedback on this issue would be greatly appreciated.



  13. camilo says:

    The plugin was working ok, but now it is behaving abnormally. When I click on one of the images it does not open it–it seems to be linking to another image. Can you you please take a look and give your opening?

  14. Jean Pierre says:

    Hello !
    I have the same problem as camilo. Nowaday I work in local with WordPress 3.4.2. For the moment it is the only plug-in activated.
    Many thanks for your plugin.

  15. Nele says:

    Plugin doesn’t work in WordPress 3.5

  16. Anonymous says:

    I am not using WP 3.5. I am using an older version. Also, it worked fine for a few months. What do you supposed happened to it?

  17. EGC says:

    Great plugin! It keeps appearing over my menu, any ideas? // Check out the gallery!

  18. beingnickb says:

    Hi there,

    I love the concept of your plugin, but it doesn’t seem to be working for me. When I click on an image, I just get the spinner and the image never loads.


  19. beingnickb says:

    Got it. I wasn’t sure how to incorporate that short code into the [gallery id=""] short code. I didn’t realize you could nest the link=”file” into it. Thanks for your help!

  20. beingnickb says:

    One last question. Any idea how to alter the code so instead of WordPress’s default short code being [gallery ids="1,2,3,4"] it would be [gallery link="file" ids="1,2,3,4] – basically having WordPress insert the link=”file” attribute by default? Thanks!

    • Right now there’s not an easy way to do that. I think WordPress 3.6 will be adding a filter for shortcode parameters that will allow me to make it automatic, though. If I figure something out before then, I’ll include it in an update.

  21. Dan says:

    Thanks for the plugin!
    However, only the image I click on shows up…
    Here is my website page
    Thanks for your help

  22. fatloui says:

    Hi Dougal,

    at first, let me say thank you for your great plugin. I integrated it into my blog on: I only have on problem. On firefox and chrome it works fine. IE 9 & 10 only show a grey background when opening a photo. Is that a known issue?
    Thanks for helping me.

    • fatloui says:

      Addition to my post: I cross-tested with win7 IE10 and win8 IE10. Always the same problem. Gallery doesn’t load – grey background!
      Quick help would be apprechiated 🙂

  23. Scott says:

    Hey Dougal,

    Thanks for the sick plugin. Works great! it does seem like its conflicting with the fancybox function of the Instapress plugin. Any idea on how I could correct that. You can see the issue on my current site build:

    if you have any ideas on how to correct this issue I would be greatly appreciative.

    Thanks again for the plugin.

  24. sarah says:

    How did you get the space between your lightbox image gallery? I can’t seem to space mine out the way yours is. They are right up against eachother. So frustrating!!

  25. smooSmoo says:

    Hi Dougal,
    I wanted to say thank you for this great plugin;
    I’ve used it a few times for different sites, but was disappointed when the wp3.5 update disabled the image titles from showing under the lightbox images, as I was unable to find another plugin that was as simple or elegant to replace it.

    However, I just discovered a fix on this thread: and the titles are now back and working great! This site: which I built a while ago is now working again as intended.
    Just wanted to let you know and to say thank you again for such a great plugin!

Leave a Reply

%d bloggers like this: