Easy FancyBox

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.

After activation, all links to JPG, GIF and PNG images are automatically opened in the FancyBox Mac-style lightbox that floats over the web page. Most options available can be managed with this plugin along with some extra features.

Also supports:

  • All other image types and image maps
  • WordPress Galleries
  • NextGEN galleries (see FAQs for instructions)
  • Youtube galleries via Youtube Simple Gallery plugin (see FAQs for instructions)
  • SWF (Flash) movies
  • SVG media images (thanks to Simon Maillard)
  • Links to Youtube, Vimeo and Dailmotion
  • Hidden inline content
  • iFrames
  • PDF files
  • Auto-popup on page load
  • links inside Gravity Forms in ajax mode

For advanced options and priority support, there is a Pro extension available.

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 site performance, simply install and activate the plugin Use Google Libraries to load jQuery from Googles CDN.

Translators

Screenshots

  1. easy-fancybox screenshot 1

    Example image with Overlay caption. This is the default way Easy FancyBox displays images. Other options are Inside and the old Outside.

  2. easy-fancybox screenshot 2

    Example of a YouTube movie in overlay.

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

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 To: Media File when inserting the gallery! The gallery quicktag/shortcode should look like [ gallery link="file" ].
The lightbox does not look good on mobile devices. What can I do about that?
The FancyBox 1.3.4 script that is used in this plugin was not developed with mobile devices in mind. The only way around this issue is currently to disable FancyBox for small screen sizes. You can do this by adding a text widget in your sidebar with the following code snippet.

<script type="text/javascript">
var pixelRatio = window.devicePixelRatio || 1;
if(window.innerWidth/pixelRatio < 641 ) {
  easy_fancybox_handler = null;
};
</script>

Tweak the value 641 to target other screen sizes.

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 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>
Can NextGEN Gallery work with Easy FancyBox ?
NetxGEN has its own built in FancyBox version along with a choice of other lightbox scripts but if you prefer to use Easy FancyBox (because of better customisability) then you need to take some steps to make the two plugins compatible.

  1. Go to your Settings > Media admin page and switch OFF the FancyBox Auto-gallery option;
  2. Go to Gallery > Other Options and set the Lightbox Effects option to “No lightbox” and click on Show Advanced Settings;
  3. fill the Code field with
class="fancybox" rel="%GALLERY_NAME%"
  1. Leave the other fields empty and save your settings.
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 > Gallery Settings to Display galleries as “NextGEN Basic Thumbnails” and then under the NextGEN Basic Thumbnails to at least have the following options set like this:

  1. Number of images per page: 1
  2. Use imagebrowser effect: No
  3. Add hidden images: Yes

C. Optional: add the following new CSS rule to your theme stylesheet (or install Custom CSS or Jetpack and add it on the new Appearance > Edit CSS admin page) to hide the page browsing links below the gallery thumbnail.

.ngg-navigation {
display:none;
}
Can I link a NextGEN thumbnail to a Youtube movie in FancyBox?
User Mark Szoldan shared a neat trick how to do this:

  1. Follow the instructions to make Easy FancyBox work smoothly with NextGEN above and make sure it all works correctly for normal thumbnails linked to their full-size version.
  2. Then give the image that you want to link to a Youtube movie the URL to the Youtube page as title.
  3. Finally paste the code below into a text widget that will live in your sidebar or footer bar, or you can hard-code it into your theme but make sure it come before the wp_footer() call…
<script type="text/javascript">
jQuery('.fancybox [title*="www.youtube.com"]').each(function() {
  var title = jQuery(this).attr('title');
  var desc = jQuery(this).parent().attr('title');
  jQuery(this).attr('title', desc);
  jQuery(this).parent().attr('href', title);
});
</script>

This script snippet will scan the image titles and if it finds a Youtube URL there, it will replace the links href attribute value accordingly.

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/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. Make sure the option “Inlcude the Metadata jQuery extension script…” under FancyBox | Links on Settings > Media is enabled.

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. Simply create a link using the Share URL (the full Page URL, the Short URL with or without options like HD etc.) to the YouTube/Vimeo/Dailymotion page in your post content. If you have Auto-detect enabled, the plugin will take care of the rest for you! :)

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.
Can I show a Youtube playlist in FancyBox?
Yes, just go to Youtube page of any movie that’s in the playlist and use the Share button to get the share URL just like with single movies, but this time place a checkmark at the ‘Share with playlist’ option.
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 never ‘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 attribute if it is missing.

How can I display INLINE content in a FancyBox overlay ?
First go to your Settings > Media admin page and activate the Inline option under the FancyBox settings. After saving, the amin page will show a new section called Inline where you can tweak its parameters.

Next, open your page/post for editing in the HTML tab and wrap the inline content in

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

Then place a FancyBox link tag with class attribute “fancybox-inline” anywhere else in the post/page content that will point to the inline content like

<a href="#fancyboxID-1" class="fancybox-inline">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…

NOTE 2: If you find that the inline contect shown in FancyBox is styled very different than the rests of the page content, then you might want to change the div tag attribute class="hentry" to something else that matches your theme. Find out what class name is used for the main content on your site and re-use that.

Can I display a contact form in FancyBox?
Yes. There are several methods imaginable but the easiest would be to use the Inline method. The inline content can be a shortcode like in this example using Contact Forms 7 and Easy FancyBox:

<a href="#contact_form_pop" class="fancybox">Contact Us</a>

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop" class="hentry" style="width:460px;height:380px;">
        [contact-form-7 id="87" title="Contact form 1"]
    </div>
</div>

Where you replace the shortcode (between the [ and ] characters) with the one given by the plugin. It can also work with shortcode by other plugins like Jetpack’s Contact Form module. Change the class attribute to reflect the class used for the div that wraps your post content to have any form CSS style rules that are limited to post content, be applied to the inline content inside FancyBox.

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.5.6 [zip]
Downloaded 579400 times.

1,057 thoughts on “Easy FancyBox

  1. ChrisD

    Hi Ravan, great plugin it is perfect for my site and I love the ease of use. One question I have is how do I add an image to the right hand side of the active photo. (Just like this site has) I have been going through your code but can’t seem to find a place to drop it in. Is it in the easy-fancybox/easy-fancybox.php or somewhere else?

    Many thanks :)

    Reply
    1. RavanH Post author

      Hi Chris, I do not understand what you mean with “an image to the right hand side of the active photo” … Could you elaborate or give a link to an example?

      Reply
  2. Staffan

    Hi, I want to set the size for a box showing inline content. I want the same contents that are on my page to open in a box 700p wide and 100% height.

    I tried on my test-blog:
    http://masungo.se/wp/?page_id=106

    The problem is that I can’t seem to set the size for that box, to simply add
    <a class=”fancybox {width:600,height:400}” href=”#reader” >LINK TO CONTENT</a>
    <div id=”reader”>
    INLINE CONTENT.
    </div>

    doesn’t seem to work on inline content.

    I saw your tip on another forum to instead set the size for the containg div (which I call reader) but the problem there is that when I set the size 700p for example that div gets to wide for the normal page (as my width in that template is only 550p).

    I have found no way of setting the size for an inline fancybox, only for iframe, images and flash-content. How do I do to get it right?

    See my attempt here:

    http://masungo.se/wp/?page_id=50
    <a class=”fancybox” href=”#reader” >READER MODE</a>
    <div id=”reader” style=”width: 700px; height: 100%;”>
    INLINE CONTENT
    </div>

    Reply
    1. RavanH Post author

      Hi Staffan, when using FancyBox to display inline content, it’s best to take the content from inside a hidden div. That way, you can give the div (with proper ID) inside it, the dimensions you want it to have in the overlay. FancyBox automatically adapts to the width and hight given to that inline content div.

      When you show already visible inline content in FancyBox but with different dimensions than it has on the page itself, then after closing the overlay, the content is put back in its place on the page but it will keep the dimensions set in FancyBox. This will likely break your normal site layout…

      Reply
  3. sangeeta

    i have one question, i want to load fancybox script only when post has images, swf etc

    please see my question @support

    i would like to suggest u to please give option in plugin setting .

    please have a look @ this

    i used this code but not work

    please reply !! :)

    Reply
    1. RavanH Post author

      Hi sangeeta, I will consider an option like that for the next release. But the problem is that some people use FancyBox not only for post content but for sidebar content too. Or for galleries either generated by WP or by another plugin like NextGEN… This will be much harder to detect so finding a one-size-fits-all solution will be difficult.

      Reply
  4. jwsheff

    I have been using your previous version with no problem but when I updated to 1.3.4.9 it fails as follows. The grayed out background is there but no fancybox image. You can see what looks like an indication in the upper left corner when an image can not be found. I checked my browser error console and received the following jquery error:
    Error: f.easing[e.animatedProperties[this.prop]] is not a function
    Source File: http://www.linuxforall.net/desertscape/wp-includes/js/jquery/jquery.js?ver=1.6.1
    Line: 18

    It seems the problem happens when I try to use the new version on a site that is using jquery with another plugin or the theme. Like I said your old version worked under the joint jquery situation but your new version will not. I had to revert to your previous version to get my site back in order. I built a copy of the site in another directory and then updated your plugin and recreated the failure.

    Reply
    1. RavanH Post author

      Hi jwsheff, it seems your theme is missing the essential (not only to my plugin but many others) WordPress footer function .

      In the latest plugin update, some of the script files have moved to the footer to improve page load time but this fails when your theme is missing the obligatory footer call

      Reply
      1. jwsheff

        Hi RavanH,

        You are right on, I added the function call and it works perfectly. Funny thing I had the same problem with 2 different themes.

        Thanks you very much!!

        Reply
  5. Vinh

    He RavanH, awesome plugin. I love the animation!

    Anyway is there a way that I can set a no conflict mode or something in the JS so it doesnt conflict with any other of my ajax plugins?

    Let me know, thanks!

    Reply
    1. RavanH Post author

      Hi Vinh, do you mean setting jQuery to no conflict mode? That should not be necessary with Easy FancyBox because it does not use short jQuery references ($) by itself. Are you seeing a jQuery conflict with any other script?

      Reply
  6. Ralph

    Hi RavanH!

    Thanks for a great plugin, looks good on my site and lots of helpful documentation and support here.

    I’m having a problem viewing PDF’s though which is quite important for the site i’m currently working on. Both the latest versions of Safari and Firefox on Mac OSX say Missing Plugin. Firefox cannot find an extension automatically, adobe reader is installed but i never needed it to read PDFs on either browser anyway?

    Do you have any ideas how to make it work?

    Many Thanks

    Reply
    1. RavanH Post author

      Hi Ralph, it’s outside the scope of this plugin to tell browsers what plugin they should use or force them to install one. It simply allows you to embed PDF’s in a lightbox overlay, just like you would embed them straight into your posts/pages. But there are some alternatives that might work better on these two browsers on OSX. Please have a look at my PDF testing page http://demo.status301.net/easy-fancybox-sandbox/pdf-embeds/ (allow for some load time) where you will see some links with FancyBox enabled and some straight embedded examples. Tell me which one works in OSX, if any.

      To use iframe mode: Disable the PDF feature in the FancyBox settings and enable the iFrame feature. Then use class="fancybox-iframe" on any PDF links. Now these links will cause the PDFs to be loaded into an iframe (inside the lightbox) instead of with an embed code.

      Reply
  7. Piet

    Hi Ravan,
    On one of my sites today I all of a sudden realised that Easy Fancybox wasn’t working anymore. I first thought it had to do with WP Supercache or my CDN, but even with those disabled I couldn’t get it to work. Then I started digging a little deeper and I discovered that in the file easy-fancybox.css.php the actual css file is being called, like: include( './fancybox/jquery.fancybox-' . htmlspecialchars( $version , ENT_QUOTES) . '.css' );
    However viewing that in my source created errors and a warning that that specific file (jquery.fancybox-.css) did not exist. Looking in the fancybox sub-directory the css file actually uses 1.3.4, so I have now changed that into include( dirname(__FILE__) . '/fancybox/jquery.fancybox-1.3.4.css' );
    This works fine and Easy Fancybox is working again on my site now.
    I am not really sure what triggered this bug as I am using your plugin also on other sites without this problem.
    Cheers,
    Piet

    Reply
    1. RavanH Post author

      Ha Piet,

      When the file easy-fancybox.css.php is called from the page header, it should be with ?ver=1.3.4 appended. This parameter in turn is used by htmlspecialchars( $version , ENT_QUOTES) to form the complete file name. So when you are saying FancyBox was not working anymore, something seems to be causing this ?ver= to be suppressed. Do you have a plugin running that does this on purpose maybe?

      Allard

      Reply
      1. Piet

        Hoi Allard, thanks for your response. Yes, that is exactly what is happening. I have several plugins running, hard to tell which is the one that surpresses this ?ver=.
        Recently installed BetterWPSecurity and BackupBuddy, so it could be any of those two perhaps. For me (and for now) it’s ok now as I have hardcoded the version into the plugin and as you don’t do updates of the plugin on a daily basis, I’m actually quite ok with it :)

        Reply
        1. RavanH Post author

          It’s probably BetterWPSecurity. Does it have an option to switch off this ‘var’-query-string-removal feature? If so (or not) I’d like to make a mention about it in the FAQ’s… Dank :)

          Reply
      2. Piet

        Hoi Allard, been looking all through the options of BetterWPSecurity, but cannot find a specific option that switches off the feature. So perhaps it’s indeed a good idea to make a mention of this in your FAQ. Graag gedaan!

        Reply
    1. RavanH Post author

      Vinh, Please disable Easy FancyBox on that site and tell me if the calendar works then. Leave it de-activated so I can take a second look tomorrow…

      Reply
  8. henriette

    Hello Ravan, thank you for your awesome plugin!
    I am using it in a site in combination with the Postie plugin (for posting by email) and this is great because all attached files like images/movies/pdf files get a thumbnail or icon and they will open flawlessly in fancybox, except…
    the files that open in an iframe (like pdf), IN EXPLORER IE9, open only the first time and when loading for a second time there will be a blank iframe which can’t be closed.
    I found a link leading to similar issues with Fancybox, and there seems to be a workaround, but I am not as good in .php as to know how and where to implement it… the link is http://groups.google.com/group/fancybox/browse_thread/thread/d7321b9a4df5b20b/
    and the website I am working on with this is http://www.pattinaggioaltichiero.com, although for know I have no iframed links for you to show the problem..

    Can you please suggest how to solve this??
    Thank you so much in advance!

    Reply
    1. RavanH Post author

      Henriette, the PDF problem in IE9 is not well know (yet) but has been reported before. It’s a problem with the PDF plugin in your browser so there is not much I can do about it.

      There is, however, a workaround and I might be integrating it into the next release. For displaying PDF files, the current version of Easy FancyBox uses standard embed code. This does seem to generate the issue of not being able to be opened twice in IE9. If you force Easy FancyBox to display the PDF files in iFrame mode, the issue does not occur. You can do this by disabling the PDF feature in the FancyBox settings (or at least the autodetection option for PDFs) and then give each PDF link a class="fancybox-iframe" attibute.

      This should work around the issue in IE9 but I'm not sure if you can automate this in Postie. Can you?

      Reply
      1. Rosa Chaves

        (I’m sorry, my english isn’t too good)

        1st. – I can’t find out how to put my site to do PDF recognition by iFrame as you said to do it.. so how do I give each PDF link a class=”fancybox-iframe” attibute… ?? I’m very basic, sorry.

        2nd – I also need to create several thumbnails (one for each) that links to several gallerys of pictures.. can you teach me step by step (baby steps)

        Thanks!! ;)

        Reply
        1. RavanH Post author

          Hi Rosa,

          Number one: First switch off the PDF auto-detection (or even the complete PDF function) on your Settings > Media page and then go to edit your page. To add a class attribute to a link, you need to switch to the HTML view tab. I’m not sure how it is called in your language (Portuguese or Spanish?) but I would guess ‘HTML’ ;) Then scroll through the source code you see there and find your link. It should look something like this but with other URL and anchor text:

          <a href="http://url.to/your.pdf">open my PDF</a>

          Now change it like this:

          <a href="http://url.to/your.pdf" class="fancybox-iframe">open my PDF</a>

          Number two: To show more than one gallery on a post or page, you will need to install a gallery plugin. There are some basic instructions on how to set up the well known NextGEN Gallery plugin with Easy FancyBox in the FAQ section under “Will a NextGen gallery be displayed in a FancyBox overlay ?”. Then, use NextGEN to manage your galleries and insert a thumbnail for each one as described under “Can I use ONE thumbnail to open a complete gallery ? … With NextGEN Gallery”

          But if you only want one gallery per post/page, you can do without the NextGEN plugin. Contact me if you want more detailed instructions via e-mail. EDIT: Oh, I see you already did ;)

          Allard

          Reply
    1. RavanH Post author

      Alan, if you are using files with .jpeg extension, and you want auto-detection, you need to add that extension to the Auto-detect field under FancyBox > Images & Inline on your Settings > Media admin page. Or add class="fancybox" attribute to each link…

      Reply
    1. RavanH Post author

      Hi Marcus, it’s your theme. It loads the prettyPhoto script which basically does the same as FancyBox. If there is a theme option to switch it off, please do so. Else you will have to make a choice: manually remove prettyPhoto from the theme (see functions.php) or uninstall FancyBox.

      Reply
  9. dave

    Ravan, nice implementation. I took a look at the header of one my pages after I loaded it; am I seeing things, or is it supposed to add around 30 lines of code to the header?

    Reply
    1. RavanH Post author

      Hi Dave, it depends on how many features you activated on Settings > Media > FancyBox. The more features, the more javascript, the more visitor side page load time. As mentioned on that same settings page, only enable the feautres you actually need on your site to keep things lite ;)

      Reply
    1. RavanH Post author

      That is indeed an option to do this by inclusion of an external js call, but that call will have to be to dynamically created content via php. This will have the same impact as putting the javascript straight into the head section of the body. With the ‘bonus’ of one extra server query… So no gain there.

      Ofcource, I could device some way to add ‘expires’ headers that get reset after any changes in the config or some other way to both make changes appear instantly while still allowing browser caching to gain server time. But it will take a lot of extra development and testing time ;)

      Reply
  10. Drew

    Hi there,

    Thanks for getting back to me. I have solved the problem by choosing to use an iframe instead of embedding the content in a hidden div. For some reason that worked in my new theme. :)

    Thanks again for this plugin it really helped me out on this project. :)

    Reply
  11. b.rouge

    i like to change the color of the next and preview buttons.
    i did so and replaced the ones at the server.
    /fancybox/fancy_nav_left.png
    /fancybox/fancy_nav_right.png

    but nothing happens. it’s still showed with the white buttons.
    how can i make easy-fancybox realize the change. i played with the settings but that won’t help.

    Reply
    1. RavanH Post author

      Hi B. Rouge, it is actually the image sprite easy-fancybox/fancybox/fancybox.png that you will have to change to see the effect in modern browsers. The seperate images you changed are used only for IE6. And who still uses IE6? ;) But they are still there for the few that do come to your site with IE6…

      If you change the images or other files, please do not forget to make a backup of them. Any new update of the plugin will overwrite your changes so you can quickly replace the new image with your backup later.

      Reply
  12. Dan

    Hello, I really like the plugin. The best I’ve seen. And Spotlight efect is just awesome! Thanx! I have one question to anyone who may reply @) Is is possible to add loop mode to the it? (to get from the last gallery image to the first one with the “Next” arrow button) Thank you.

    Reply
  13. creation Sites Web

    [MARKED AS SPAM BY ANTISPAM BEE | Server IP]
    Hi Ravan,

    Great plugin, thank you for that !

    I’m using it for 1 only thing on a new website: show PDF’s files. It displays the files properly but the “Download this file” button at the bottom does nothing :-(

    And I have another question too: is it possible to set the document to fill the full-width of fancybox window by default ?

    Thanks a lot for your help, mate :-)

    Here is a screenshot of what’s not working: http://www.diigo.com/item/image/1q1ia/a04w

    And the URL where the PDF’s are:
    http://www.gite-var.com/infos-pratiques/contrats/

    Reply
    1. RavanH Post author

      Hi Franck, what you are seeing there is the title that has been taken from the alt attribute of the thumbnail image. It’s not an actual (download) link. If you set the alt text to anything else, that title below the pdf will change accordingly. Basically, you can create a link as alt text like for example:

      <a href='http://www.gite-var.com/Contrat-Gite-Mimosas.pdf' target='_blank'>CLIQUEZ ICI POUR TELECHARGER LE CONTRAT</a>

      Note that I am using single quotes ( not ” but ‘ ) to prevent conflict with the alt attribute wrapped in double quotes. Also note that it is just a link, it is up to the visitors browser to decide what should be done with the content: display in a new tab (most likely) or download… And although this will allow the title to become an actual link, it will probably not pass strict HTML validation so if you are concerned about that, you will need to find another solution to allow your visitors to download the file instead of viewing it in a lightbox or new browser tab.

      And the same goes for the width of the PDF document content. I’ve added some parameters in the URL that try to pass a zoom level of 80% but it completely depends on the browsers PDF plugin if it will adhere to that setting or not. Zoom level (or width) might also be overridden by the PDF documents internal settings that where set during creation of the file…

      Reply
  14. b.rouge

    can i give an i-frame an independent background that differs from the one in the setting?

    reason is i’d like to have a black background for showing images and a white for showing other homepages (mostly they are using no background for a white background).

    best regards
    tbr

    Reply
  15. Ava

    Hi. I’m currently using your plug-in for a website. It’s working great!

    I just want to ask if it’s possible to automatically close the lightbox once the SWF bit is done?

    Thanks and I hope you can help me!

    Cheers!

    Reply
    1. RavanH Post author

      Hi Ava, that’s a question that has been asked before. But difficult to answer because functionality like that depends on the flash movie that’s being played. Is it a one-layered flash movie that does actually END or is it layered like a movie player that does not end itself while the movie inside it does end… If the latter, does the player have some kind of API to communicate with it to be able to detect its status. You see, it would be nearly impossible to write generic script that could cope with any possible kind of flash content.

      Reply
      1. Josiah

        Someone on gravity form forums recommended your plugin, it works great!
        Question: What if I am using gravity forms and I want to close box on submit?

        Here is a link:http://4kensingtondrive.com/buyer-tips/6-buyer-mistakes

        Here is the code I have so far in the page:

        [gravityform id="1" ajax="true"]

        Is it best to add script to top of page? it doesn’t seem to work for me, here is what I added:

        jQuery(document).bind(‘gform_confirmation_loaded’, function(){
        fancybox_close(); //closes the fancybox
        return false;
        });

        I want my user to see my page but register first to access it. 1 step is preferable. Thank you for the awesome plugin and help!

        Reply
        1. RavanH Post author

          Hi Josiah, if you want to add javascript, you can use a simple text widget (in the footer or as last one in the sidebar) and make sure you wrap the script in the proper tags. I also suggest some small changes but have not tested it so cannot confirm it will work:

          <script type="text/javascript">
          jQuery(document).bind(‘gform_confirmation_loaded’, function($){
          $.fancybox.close(); //closes the fancybox
          return false;
          });
          </script>

          Also make sure to NOT check the ‘Automatically add paragraphs’ option.

          You can take the code out of that META description tag in the header. It does nothing there…

          Reply
      2. Josiah

        Once again, thank you for your attention.

        I have inserted the script in the appropriate place in the footer. agentpress has a place for it in its theme settings.

        Here is what I put in the page as html:


        [gravityform id="1" ajax="false"]
        <a href="#fancyboxID-1" rel="nofollow"></a>

        Gravity forms has a submission confirmation message with ajax that probably overrides the close command? I have ajax on false as you can see. If I can switch off the confirmation fuction in gravity forms it may solve the problem….. Thoughts?

        Reply
        1. RavanH Post author

          You might be correct in your assumption here… On http://fancybox.net/blog at example #5 you can see how in theory a form could be used in FancyBox. No idea how that could be made to fit your Gravity form submission/validation. I have no experience with that plugin so I can only advise you to try and see ;)

          Reply
  16. Liat Gat

    Hi there – your plugin is so great! Is there a way to get a javascript form to open in an overlay? I am using the javascript on my site right now – it’s an AWeber sign up form.

    The page I want to use it on is http://knitfreedom.com/free-patterns/worsted-weight-socks – right now I have an icon of the PDF logo and the form below it. I want people to be able to click on the PDF logo and have the form appear in an overlay.

    Is there any way to do this? Thank you!

    Also, is there any way to view the fancybox videos on mobile devices without being sent to YouTube after the video is finished being viewed?

    Thank you!!

    Reply
    1. RavanH Post author

      Hi Liat,

      In theory it is possible to handle javascript request via the FancyBox API but in your case that would mean redesigning both AWeber and my plugin to work together in a meaningful way… Too much trouble, I can assure you.

      However, there might be an alternative. I’m not sure if this is going to work in this particular case but there is a way to place your form on the page like normal and then hide it from normal view so it can be shown inside a FancyBox modal window.

      Wrap the form (or shortcode) inside the following tags where the ID value must be unique on that page:

      … form code here …

      Next, create your link to pop up de form by referring to thqt ID:

      … your link text or image here …

      This should make the form open in FancyBox but the question remains if the javascript still works. You’ll need to test it

      About the videos redirecting mobile browsers to the youtube page afterwards: I was not aware this happens. It is a Youtube thing, I guess. I’ll try to find out nore about why this happens and if there is a way to prevent it. Otherwise, you might find the Vimeo service to be a better alternative ;)

      Reply
    2. RavanH Post author

      Oh, and I notice you are using prettyPhoto and Colorbox at the same time with FancyBox. These three lightbox scripts can cause issues when used together…

      Reply
  17. Kristina

    Hi there! Love love love your plugin! I had two questions for you.

    1) I would love if there was a way to include an option to disable automatic adding of jquery – I already add jquery manually via google libraries, so it would be great to not load it twice.

    2) this is a bit more complicated. I’m looking for a solution that will allow me to link to a fancybox via my thumbnail of the image (mostly for videos–youtube)–fancybox does this for me wonderfully, but it centers it in the page. I want the fancybox to load exactly where the image was (like the image thumbnail and the video have the same dimensions) – in other words, I want it to be seamless. Any chance you could help me with this? I’d be willing to donate $$.

    Thanks again!

    Reply
    1. RavanH Post author

      Hi Kristina,

      1) Do you include the library as a hard-coded link in the themes header.php or do you use a plugin like Use Google Libraries and let WordPress handle the library inclusion? If the latter, there will be no problem with loading two libraries since my plugin conforms to the official way of including scripts… If the former, and since there is no option to exclude the jquery library, I would suggest to (a) remove the hard-coded link, (b) install Use Google Libraries and (c) activate Easy FancyBox. from then on, your site will be using the jQuery library as provided by Google plus it will be in no-conflict mode (which is safer) just like the official WP included library.

      2) To give the lightbox an absolute position to match the original thumbnail will be extremely complicated. Supposing you are only using ONE link to open in FancyBox per page and each time the thumbnail is in the same place (first thing in the sidebar for example) then you might be able to pull it off by adding some CSS rules to your stylesheet. You can read more here. But as soon as you want it to work like this for several links from thumbnails that are on different places on your page, you would have to completely rip the plugin apart and maybe even rewrite a substantial part of the FancyBox script itself… The lighbox script simply is not designed to be able to do this, sorry :(

      Reply
    1. RavanH Post author

      Hi Paul, I fear that is an issue related to displaying of PDFs on the iPad and it’s out of the scope of this plugin or FancyBox script to do anything about it. But it will be interesting to find out if the alternative for showing PDFs, iframe mode, works better on the iPad…

      Could you please (1) disable PDF support and enable iFrame support in the FancyBox settings, (2) change your current PDF link(s) to use class="fancybox-iframe" and (3) fire one on the iPad and let me know if (and how) that changed anything? If you need more precise instructions/help with that, please let me know.

      Thanks :)

      Reply
  18. jj

    Hi, this is a great plugin, but here’s my guestion:

    So, I can open html page on fancybox with this link.
    <a href="page1.html" rel="nofollow">First page

    First page contains link to second page:
    <a href="page2.html" rel="nofollow">Second page

    If I make a chain of these fancybox links, like above, only first page
    shows on fancybox.

    How can I make a link within fancybox that opens new page in a new
    fancybox?

    Reply
      1. JJ

        Thanks RavanH,

        So, How I can load new page in same fancybox?, that would be the solution that I was looking for.

        Reply
        1. RavanH Post author

          Just make the first link open in FancyBox using the class fancybox-iframe and all following pages will remain inside that same frame. Take for example the automatic pop-up on http://demo.status301.net/easy-fancybox-sandbox/ and click the link in that text, then click other links to browse further and it will all be inside that frame… Unless one of the pages has a so-called break-out script that forces the page to be opened in the top window. In that case, there is nothing FancyBox or this plugin can do about it.

          Reply
    1. RavanH Post author

      Hi Brett, there are no scrollbar options for iFrame mode in this plugin at this point. I will be looking at it for the next version…

      Reply
    1. RavanH Post author

      Enable the PDF functionality on Settings > Media and give the link a class=”fancybox-pdf” attribute or enable auto-detection. You might also need to disable the download tracking for PDFs in Analytics for WordPress…

      Reply
  19. Klara Nilsson

    Thankyou for a great plugin!

    I have successfully added it to my wordpress-blog and it works great, but only in the feed with all the posts? As soon as I click one particular posts image the overlay is there but the image is way out of the viewport? What could be wrong?

    http://klaranilsson.se/munkfabriken/ <<for instance here.

    Would love to get some help on this!

    Reply
    1. RavanH Post author

      Hi Klara, it seems your theme is not including the usual footer.php there… or at least it is missing the obligatory wp_footer() call and the closing </body></html> tags.

      Reply
  20. Paul Aston

    Hi Ravan,

    Loving this plug-in! It has saved me a massive b***-ache in a piece of webdesign, brilliant!.

    I have a quick question though: I’m using this to open an iframe to some content heavy pages and there’s a bit of a wait on the load. Is there a way to add a loading gif to the frame while the content loads? I was wondering if I could manually set this as the background?

    All the best,

    Paul

    Reply
    1. RavanH Post author

      Hi Paul, In the case of iframes, FancyBox cannot determine if the content has loaded so your idea to set the loading animation as background is not bad. I do not have a clear idea yet on how to make this work (it will take more than just some CSS) but it’s on my list :)

      Reply
      1. Paul Aston

        Awesome news. I look forward to it!

        I have one other question as well…

        It is possible to set a 0 opacity on the background of the box, without fading out the content as well? The effect I would like is to have an iframe fancybox over an image, with the bg of the iframe content set to 0.5 opacity so there is a kind of overlay effect. (I hope that makes sense)

        Thanks again!

        Paul

        Reply
        1. RavanH Post author

          Hi Paul, actually there is a way… It will influence the border too but put (for example) rgba(254, 254, 254, 0.6) in the field “Background” under Window > Color in the FancyBox section on your Options > Media admin page.

          Hope I explained that clearly enough :)

          Reply
        1. RavanH Post author

          No problem ;)

          Downside here is that this does not work on IE 8 and below. If you want that too, you’ll need to get more complicated by adding a proprietary filter like for example
          rgba(254, 254, 254, 0.6); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7AFFFFFF,endColorstr=#7AFFFFFF);
          where ‘7A’ stands for the transparency (in hex value format)… You’ll have to test :)

          Reply

Leave a Reply