Easy FancyBox

Install now

Download Version 1.3.4.9

Requires WordPress Version: 2.9 or higher
Compatible up to: 3.5.1

Easy FancyBox plugin for WordPress websites gives you a flexible and aesthetic lightbox solution for just about all media links on your website. Easy FancyBox uses the packed 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 plugins options.

Supports:

  • images (.jpg/.gif/.png and others) and image maps
  • WordPress Galleries
  • PDF and SWF (Flash) files
  • movie sites like Youtube, Vimeo and Dailmotion
  • hidden inline content
  • iframes
  • popup (auto-activate) on page load

See Screenshots for an impression on how images and YouTube movies will be presented on your site as soon as you have installed and (network) activated this simple plugin.

See FAQ’s for instructions to manage YouTube, Dailymotion and Vimeo movies (and similar services) and tips to make inline content display in a FancyBox overlay. Subscribe to Status301 for tips on how to get a high degree of control over what will be shown in a FancyBox overlay on your website.

Get support on the Easy FancyBox web page or WordPress forum.

Visit FancyBox for more information, examples and the FancyBox Support Forum. Please consider a DONATION for continued development of the FancyBox project.

Recommended:
- For increased performance, simply install and activate the plugin Use Google Libraries to load jQuery from Googles CDN.

Translators

Frequently Asked Questions

BASIC

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?

The same version as this plugin has. I aim to keep close pace to FancyBox upgrades and always move to the latest and greates version. Please, let me know if I’m lagging behind and missed an upgrade!

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 Image. From now on, clicking that thumbnail should open the full size version in FancyBox.

The same thing goes for WordPress Galleries. Choose Link to: File when inserting a gallery tag.

I want to change something. Where is the settings page?

There is no new settings page but there are a few options you can change. You will find a new FancyBox section on Settings > Media. To see the default, check out the example under Screenshots …

Help! It does not work…

Please follow the trouble shooting steps on Other Notes to determine the cause. If that fails, ask for support on the Easy FancyBox WordPress forum or go to the development site
 

ADVANCED

Will a WordPress generated gallery be displayed in a FancyBox overlay?

Yes, but only if you used the option Link thumbnails to: Image File when inserting the gallery! The gallery quicktag/shortcode should look something like .

Can I make a slideshow from my gallery?

Yes. 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 nofancybox that would normally get auto-enabled, will be excluded from opening in a FancyBox overlay.

<a href="url/to/fullimg.jpg" class="nofancybox"><img src="url/to/thumbnail.jpg" /></a>

Will a NextGen gallery be displayed in a FancyBox overlay ?

It can be. Switch OFF the FancyBox Auto-gallery feature, then set the NextGen option “JavaScript Thumbnail effect” to “Custom” and fill the code line field with

class="fancybox" rel="%GALLERY_NAME%"

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:

<div class="fancybox-hidden">

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:

</div>

With NextGEN Gallery

You can choose between two shortcodes to show a gallery that (1) limits images per gallery using the shortcode [nggallery id=x] or (2) per tag name (accross galleries; you need to set tag name manually => more work but more control) using the shortcode [nggtags gallery=YourTagName,AnotherTagName].

General steps:

A. Place the shortcode of your choice in your page/post content.

B. Configure NextGen on Gallery > Options > Gallery settings to at least have the following options set like this:

  1. Number of images per page: 1
  2. Integrate slideshow: unchecked (optional but advised: use auto-rotation in the FancyBox settings instead)
  3. Show first: Thumbnails
  4. Show ImageBrowser: unchecked
  5. Add hidden images: checked

C. Optional: install Custom CSS and add a new CSS rule to hide the page browsing links below the gallery thumbnail:

.ngg-navigation {
display:none;
}

Can I create a gallery of Youtube thumbnails which open in FancyBox?

You could do this manually by uploading individual thumbnails that you can retrieve by using the unique movie ID in these URLs for three different sizes:

http://i4.ytimg.com/vi/...UNIQUE-MOVIE-ID.../default.jpg
http://i4.ytimg.com/vi/...UNIQUE-MOVIE-ID.../mqdefault.jpg
http://i4.ytimg.com/vi/...UNIQUE-MOVIE-ID.../hqdefault.jpg

But an easier method is this one, shared by Shashank Shekhar (thanks!) :

To create Youtube thumbnail galleries, install http://wordpress.org/extend/plugins/youtube-simplegallery/ and set the ‘Effect’ option to fancybox. Then disable Youtube autodetection on Settings > Media.

Can I display web pages or HTML files in a FancyBox overlay?

Yes. Place a link with either class="fancybox-iframe" or class="fancybox iframe" (notice the space instead of the hyphen) to any web page or .htm(l) file in your content.

NOTE: The difference between these two classes (‘-’ or space) is in size of the overlay window. Try it out and use the one that works best for you :)

Can I show PDF files in a FancyBox overlay?

Yes. Just place a link with the URL ending in .pdf to your Portable Document file in the page content.

If you do’nt have Auto-detect checked under PDF on Settings > Media admin page, you will need to add class="fancybox-pdf" (to force pdf content recognition) to the link to enable FancyBox for it.

Can I play SWF files in a FancyBox overlay?

Yes. Just place a link with the URL ending in .swf to your Flash file in the page content.

If you do’nt have Auto-detect checked under SWF on Settings > Media admin page, you will need to add either class="fancybox" or class="fancybox-swf" (to force swf content recognition) to the link to enable FancyBox for it.

How do I show content with different sizes?

FancyBox tries to detect the size of the conten automatically but if it can not find a size, it will default to the settings for that particular content type as set on the Settings > Media page. You can manually override this by defining the width and height wrapped in curly brases in the class attribute of the link itself. For example, a Flash movie with different size:

<a class="fancybox-swf {width:1024,height:675}" href="link-to-your-swf"></a>

Can I play YouTube, Dailymotion and Vimeo movies in a FancyBox overlay?

Yes. Just let the plugin auto-detect and auto-enable it for you! :)

Place the Share URL (the full Page URL, the Short URL or even with the HD option) to the YouTube/Vimeo/Dailymotion page in your content. If you have disabled Auto-detection, give the link a class attribute like class="fancybox-youtube" for Youtube, class="fancybox-vimeo" for Vimeo and class="fancybox-dailymotion" for Dailymotion, to manually enable FancyBox for it.

Both YouTube and Vimeo movies can be made to play immediately after opening by adding the paramer autoplay=1 to the URL. For example, a short-url YouTube link that should play in HD mode, have the full screen button and auto-start on open, would look like:

<a href="http://youtu.be/N_tONWXYviM?hd=1&fs=1&autoplay=1">text or thumbnail</a>

I want that ‘Show in full-screen’ button on my YouTube movies

Append &fs=1 to your YouTube share URL.

The flash movie in the overlay shows BELOW some other flash content that is on the same page!

Make sure the OTHER flash content as a wmode set, preferably to ‘opaque’ or else ‘transparent’ but not ‘window’ or missing. For example, if your embedded object looks something like:

<object type="application/x-shockwave-flash" width="200" height="300" data="...url...">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="...url..." />
</object>

just add <param name="wmode" value="opaque" /> among the other parameters. Or if you are using an embed like:

<object width="640" height="385">
<param name="movie" value="...url..."></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="...url..." type="application/x-shockwave-flash" width="640" height="385" allowscriptaccess="always" allowfullscreen="true" wmode="window"></embed>
</object>

just change that wmode="window" to wmode="opaque" or add the tag if it is missing.

Can I display INLINE content in a FancyBox overlay ?

Yes. Wrap the inline content in

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:460px;height:380px;">
...inline content here...
</div></div>

Then place a FancyBox link anywhere else in the post/page content to the inline content. Something like

<a href="#fancyboxID-1" class="fancybox">Read my inline content</a>

NOTE: The wrapping divs ID must be unique and it must correspond with the links HREF with a # in front of it. When using the above example for more FancyBox inline content (hidden div + opening link) combinations on one page, give the second one the ID fancyboxID-2 and so on…

Can I make an image or hidden content to pop up in FancyBox on page load?

Yes. A link that has the ID fancybox-auto (Note: there can be only ONE link like that on a page!) will be triggered automatically on page load.

Use the instructions above for inline content but this time give the link also id="fancybox-auto" (leave the class too) and remove the anchor text to hide it. Now the hidden div content will pop up automatically when a visitor opens the page.

Same can be done with an image, flash movie, PDF or iframe link! But please remember there can be only one item using the ID fancybox-auto per page…

Can I make a menu item open in a FancyBox overlay ?

Yes. But it depends on you theme what you need to do to make it work. If you are on WordPress 3+ and your theme supports the new internal Custom Menu feature or if you are using a custom menu in a sidebar widget, it’s easy:

  1. Go to Settings > Media and enable FancyBox iFrame support.
  2. Go to Appearance > Menus and open the little tab “Screen Options” in the top-right corner.
  3. Enable the option “CSS Classes” under Advanced menu proterties.
  4. Now give the menu item you want to open in a FancyBox iframe the class fancybox-iframe.

If you are on an older version of WordPress or if you cannot use WP’s Menus, you will need to do some heavy theme hacking to get it to work. Basically, what you need to achieve is that the menu item you want opened in a lightbox overlay, should get a class=”fancybox-iframe” tag.

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. You can even install it in mu-plugins: upload the complete /easy-fancybox/ directory to /wp-content/mu-plugins/ and move the file easy-fancybox.php one dir up.

Download

Latest version: Download Easy FancyBox 1.3.4.9 [zip]
Downloaded 221531 times.

859 thoughts on “Easy FancyBox”

    • Hi Jimmy, it seems WordPress ate your code (if you’d like to share code, maybe the plugin support forum on http://wordpress.org/support/plugin/easy-fancybox is a better place) but looking at your site, I notice two things:
      1. You are using a theme from Elegent Themes which are notoriously incompatible with FancyBox plugins because they have their own FancyBox version hard-coded in.
      2. I see no link to your Youtube movie on your site. You should create a link, not paste the Youtube URL plain because WordPress will convert that to an embedded movie.

      Reply ↓

      • Thanks for the reply!

        I gave up on getting it to work when I found that reference about Elegant Themes when I saw they are incompatible with FancyBox plugins because they have their own FancyBox version hard-coded in.

        Thanks for taking a look!

        Strangely enough It works if I set Easy FancyBox to open any YouTube links on any page when they are opened. I didn’t need the video to do that on this page :)

        Reply ↓

  2. Thanks for a great plugin. It’s exactly what I was looking for.

    However, I am running into an issue. Upon first-time page load, the external website (iframe) opens perfectly in lightbox overlay. However, when it’s closed and if I try to reopen by clicking the hyperlink in the page, it just seems to keep running in an infinite loop without reopening. What am I doing wrong?

    Here’s the link of code I am using in my post:

    Click Here to View the Opportunity

    Thanks for your help.

    Reply ↓

    • Hi scriptcoder, you’d need to create a link to that Youtube page and give it a class="fancybox-youtube" attribute.

      Reply ↓

  4. Hi Ravan,

    Need help in showing hidden content in lightbox.

    We have placed this code in a text widget: http://pastebin.com/uKsxG63s

    at http://obharath.com/demos/htl/

    When either the video thumb link or the text link “watch our 1 minute overview video” below is clicked, nothing is happening.

    Console shows: “NetworkError: 500 Internal Server Error – http://obharath.com/demos/htl/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4”

    Please advise.

    Reply ↓

  5. Hello everyone and thank you for this plugin that i find very usefull.

    Sorry for my english hope you understand

    For a project i am working on, i create a fancybox with a custom registration form (who work with another plugin) . When you confirm the form, it bring you to a new page confirmation but what i want is to use ajax to be redirect to this confirmation page directly in the fancybox with no reloading process.

    Is it possible? my experience with ajax and javscript is not top level ;-)

    Thank you very much

    Reply ↓

      • Hi Raven and thanks for quick reply i use the plugin wp-client;) i hope someone can help me on this. I can give give code by mail

        Reply ↓

  6. They have a support but no forum . I Ask theM but i must wait and i dont think it Will be one of their priority to solve this particulare issue. I must find a solution for my own client

    Reply ↓

  7. Hey there, great plugin! I am just having a conflict with NextGen.

    At first it was fine, I just disabled the Nextgen effect and it worked all great. But then the arrows dissapeared and I have been testing all I can to get it back to working.

    I saw the tip to disable the auto option in fancybox and add the custom code to nextgen, but that did not change anything.

    Any help will be much appreciated.

    Reply ↓

  10. HI There :)

    Is it possible to have a iframe popup from another iframe popup using ( class=”fancybox iframe”

    Its like I have popup page that should lead me to contact form popup page, but it works only on the first page that gets popup …. the other link that should lead to poping up contact page is not reacting … any ideas?

    Thanks in Advance :)

    Reply ↓

    • Hi Sasha, there is only one FancyBox frame at a time possible. You can load different content in sequence into the same frame but not two frames at the same time…

      Reply ↓

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

      Reply ↓

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

    Reply ↓

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

      Reply ↓

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

        Reply ↓

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

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

      Reply ↓

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

    Reply ↓

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

      Reply ↓

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

    Reply ↓

  18. 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 :-( .

    Reply ↓

    • 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 “<“).

      Reply ↓

  19. Pingback: ワードプレス：クリックすると拡大画像が表示されるプラグインの比較 | ブログ

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

    Reply ↓

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

      Reply ↓

  23. Hello, Im using this great plugin, its realy easy to use … im having little problem: pop up loads on half of the page…

    Reply ↓

Leave a Reply