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

859 thoughts on “Easy FancyBox”

  1. I have a problem when using iframe to show pdf in posts. I try to embed a pdf to post using following code:

    <a href="http://File-path/File-name.pdf&embedded=true">File-name</a>

    However, everytime I click the name it shows: ‘the requested content cannot be loaded, please try again later’. I find a post in this page that generate same problem, but the situation is different. Since I have very few php experience, I don’t know how to fix this problem. Can someone help?

    Thank you in advance!

    Reply ↓

    • Hi Bryan, for iframe use the link attribute class=”fancybox-iframe” and disable the PDF feature in the FancyBox settings OR at least the auto-detection option in the PDF settings to prevent two different instances of FancyBox being attributed to the same link…

      Reply ↓

      • I add link attribute class=”fancybox-iframe” before the href and it seems work. But everytime when I click the link it keep showing loading icon and stuck there, totally no response. I have to shut down browser and restart. Since the file is just 700kb, I don’t think it is loading problem, any way to fix it?

        Reply ↓

      • OK, I just double check the code and it is:
        <a href="http://FILE-PATH/FILE-NAME.pdf&embedded=true" rel="nofollow">FILE-NAME</a>

        In Settings>Media I have uncheck all settings of pdf (auto-detect, show title, allow title from thumbnail alt tag), but it still appear ‘the requested content cannot be loaded, please try again later’.

        Actually I follow reference this solution and it seems work in that post:
        http://wordpress.org/support/topic/plugin-easy-fancybox-error-with-fancybox-pdf-in-safari?replies=4

        Reply ↓

  3. Hi,
    My question is How to show number of image?
    I would like to display a title and for example “Image 2 of 5″ or “Image 2/5″.
    I can’t find it…

    Thanks a lot!

    Reply ↓

    • Hi wilq, that might be a feature of the Pro version in the future bit it is not possible with this plugin right now. Sorry.

      Reply ↓

  4. Hi, I am using the recent version of the plugin and trying to get the box to work for the wordpress menu. I saw a thread about this in WP forums, but my class is just class=”fancybox iframe” . It is not working for me and using class=”fancybox-iframe” does not work for any links. I always have to use class=”fancybox iframe”.

    Thanks for your advice!

    Reply ↓

  5. Hi Sir, Such great plugin you made.

    I just downloaded the latest version of the fancybox and was wondering why the shortcode (from wp-members) doesn’t work in the inline content of the fancybox?

    Thanks very much

    Reply ↓

    • Hi Dave,

      It has really nothing to do with FancyBox but it’s a WordPress thing. If the inline content is defined inside regular post or page content, the shortcode inside it should be treated just like normal. But if the inline content is inside a sidebar widget, the shortcode will not be converted by WordPress. Again, just like normal.

      But there are ways to get WordPress handle shortcodes inside text widgets the same as they are in post content. The easiest is to install a plugin like Widget Logic which adds an option to process shortcodes in widgets at the bottom of the Widgets page.

      Reply ↓

    • Hi Gudiq, you could do something like this from a link in inline content:

      <a href="#" onclick="javascript:jQuery.fancybox.close();">close me</a>

      Use parent.jQuery.fancybox.close() from inside iframe content (will only work when parent and iframed content are on the same domain). For more complicated examples of binding a function to an event in jQuery, see http://api.jquery.com/category/events/ but remember that jQuery on WordPress runs in noConflict mode (read what that means on http://api.jquery.com/jQuery.noConflict/)

      Reply ↓

  8. Hi!
    I wonder how to make international letters work in the image caption text?
    The text “Det spöregnade när vi var på 9/11 Memorial” looks like this now -> “Det spöregnade när vi var pÃ¥ 9/11 Memorial”… :(

    Reply ↓

    • That text should appear just fine like it is. Does your theme use the proper DOCTYPE and meta CHARSET declarations? You should have UTF-8 (or any other that supports ö/ä/å characters) defined with something like <meta charset="UTF-8" /> in your theme source head section… And you should make sure your theme uses a universal font type that supports these characters as well.

      Try switching to the default Twenty Eleven theme to check if the characters are correctly displayed. If not, there is something else going wrong.

      Reply ↓

  9. Hello
    I`m using this WP Plugin . It`s easy to use and very useful .
    But today I found it some pictures not show with original scale (If the width of the image is too wide) . Others can .
    I don`t know what happend.

    Reply ↓

    • Hi Tony, FancyBox will automatically scale down images that are larger than the browser window (viewport) so that there will always be a margin around them with the semi transparent overlay and room for the close button. If you do not like this behaviour, you could install the latest development version which has an option to disable downscaling. You can find the latest dev version on http://wordpress.org/extend/plugins/easy-fancybox/developers/ under Other Versions.

      Reply ↓

  10. Hi,

    After updating to WP 3.4.1 i lost some features. Image is not showing navigation arrows and i can´t choose colours from the adminpanel. X (close) button is working normally.

    Is this because of WP has changed some js libraries?

    Reply ↓

    • Hi Saana, the plugin should run fine on WP 3.4.1. Try clearing your browser cache or (if you are using such a plugin) the WordPress cache. If that does not do the trick, send me a link and I’ll have a look.

      Reply ↓

  11. Hello, I’m using this on a client’s website. When they view the PDF links on iPad, the fancybox works great but the PDFs are cropped if viewed horizontally. But if you open it when the iPad is in a vertical position, you’ll be able to see the whole PDF file loading in the lightbox/fancybox window. Is there a workaround for this? Thank you!

    Reply ↓

    • Hi Joy, that sounds like an iPad browser PDF plugin issue. I’m afraid I cannot help you with that (cannot afford an iPad) other than giving some alternative methods for displaying the PDFs. See http://demo.status301.net/easy-fancybox-sandbox/pdf-embeds/ in your iPad and tell me which of the three options works best :)

      P.S. Your own site looks great, just one tip: to the right of your Bio page the texts of your contact form buttons are showing (reset/submit) because of the negative text-indent… Add overflow:hidden; to avoid this.

      Reply ↓

      • Wow. I didn’t think I would ever receive a reply. Okay will try those. How about disabling the plugin when on a mobile/ipad/iphone?

        Will also fix the overflow on my site. It’s been there for months :D

        Reply ↓

      • BTW, the PDF file that opened is also cropped on iPad from the demo.4visions.nl page :(

        Do you know how to disable the plugin when the viewer is using iPad/iPhone? Thanks.

        Reply ↓

        • Hi Joy, even the Google Docs Viewer crops the PDF? That’s annoying… I’m afraid I do not have a quick solution ready to disable FancyBox for iPads. Sorry.

          Reply ↓

  12. Pingback: Galerías de fotos en Wordpress con NextGen | Pipas con sal

    • Simply uncheck the option “Show title” for each of the appropriate media types (Images/Inline, Flash, Youtube etc) on your Settings > Media admin page.

      Reply ↓

  14. Hello

    The first thing I did was disable it in settings title show
    Now i know liitle bit more.
    My problem problem stems from the use of a WP template that has the easy fancy box embedded.
    Can I use two instance of Easy Fancybox ?

    Reply ↓

    • No, you will either have to edit your theme to remove the included FancyBox or disable the plugin. Using the two together is sure to cause issues…

      Reply ↓

  15. Hi,Thanks for the wonderful plugin. How can I change the width and height of iframe which I am showing through fancy box plugin. Default size of 560px X 340 px is used even though I changed width and height in Settings>Media page. Please help.

    Reply ↓

    • Hi Udhaya, your theme has FancyBox script already included. If there is no option in the ePanel to disable the theme-included version, I’m afraid it is incompatible with any FancyBox plugin.

      Reply ↓

    • If you look at the other messages you should see in console, you would read multiple lines like: [blocked] The page at https://www.ffcu.org/ ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js?ver=3.3.2. (which means you are trying to load the jquery library multiple times but all are failing) … This tells you that Google Chrome blocks scripts that are served from non-secure domains when used on a secure (https) domain like yours. Either switch your site to http or reference the jQuery library with https… and only reference it once!

      Reply ↓

      • I was able to convert the plugin’s jquery to reference the internal file, but then it only displayed the first slide as a static image (basically) which didn’t move and couldn’t click through the transition in all browsers.

        I tried changing the code of:
        wp_enqueue_script( ‘jquery’ );

        to:

        wp_deregister_script( ‘jquery’ );
        wp_register_script( ‘jquery’, ‘https://www.ffcu.org/includes/jquery.min.js’, false, ‘latest’);
        wp_enqueue_script( ‘jquery’ );

        in the wp-parallax-content-slider.php but that made it stop motion altogether (like stated above). Any suggestions?

        Reply ↓

        • I suggest you disable all plugins (including mine) and check your page source again. Then enable them one by one, each time comparing changes in the source, to see when the jQuery library (that normally would be the one included in your WordPress install and thus be called via https) gets changed to the externally hosted one and when that second one appears…

          Reply ↓

  19. Just want to let you know your plugin is the best there is for lightbox effect. I think I tried them all, but yours works perfectly out of the box and is really fast!!! Great job.

    Reply ↓

  20. Pingback: WordPress Plugins in meinem Blog - Spamschutz, Sicherheit und SEO

  22. Hi!

    I know there is a way to create a cookie with the jquery cookie plugin that works with this and says “Show this to a visitor…say every X number of days” but I cannot do that :(

    Can you help with that? OR can you please tell me when you will create a Pro/Paid version and add that functionality?

    My clients (and me) LOVE this plugin except for the fact that we cannot specify that.

    Thanks for any help in advance!

    Reply ↓

    • Hi Token, FancyBox does not handle thumbnails. So that would be in your themes stylsheet or (in your case) the NextGEN Galery stylesheet. Look for “.ngg-gallery-thumbnail img”…

      Reply ↓

  24. The W3TC setting I needed to disable to fix Fancybox is:

    Prevent caching of objects after settings change
    Whenever settings are changed, a new query string will be generated and appended to objects allowing the new policy to be applied.

    (Under Browser Cache)

    Reply ↓

  25. Pingback: О фоточках на сайте | demetrios.ru

  26. many Thanks for that great plugin!
    i use it, to display .pdf Files and it works great.
    the “Auto-detect” Function is so cool… Man…

    Good Job!

    Greetings from Berlin/Germany

    Reply ↓

  28. hi, does this plugin use fancybox2? the autoresize on ipad2 doesnt seem to work the same in this plugin as it does in fancybox2. so if we open a popup in portrait mode on ipad2 and then switch to landscape mode in fancybox2 the screen seems to reload quickly and adjusts to the new %. can this be done with this plugin? many thanks

    Reply ↓

  29. I want a hidden Inline content to show when clicking on a text link, I used the codes:

    <div class="fancybox-hidden"><div id="fancyboxID-1" style="width:460px;height:380px">
    ...inline content here...
    </div></div>
    <a href="#fancyboxID-1">Read my inline content</a>

    but when i do that all that shows up is the loading wheel image and it just stays on that.
    i even tried it just posting the codes without changing anything at all. and it still doesn’t work. I understand the ID has to be set 1 for the 2 codes and if i got another one to set that one as 2, but i can’t get 1 working right now. please help.

    Reply ↓

    • Adding share buttons is not a feature of this plugin (yet) but you can do it by pasting share button code into the title (alt) field when inserting an image in your WordPress post. This will work as long as the code is simple, it will work… You can see an example on http://demo.status301.net/easy-fancybox-sandbox/like-my-box/ where a basic Facebook iframe button is pasted into the alt text field. Note that I have manually replaced all double quotes in that code with single quotes and then pasted the URL of the linked (full size) image as the ?href= parameter.

      Reply ↓

    • Hi David, I see no errors… What exactly is going wrong according to you? Which browser are you using? Have you cleared your browser cache to make sure there are no errors coming from there?

      Reply ↓

  32. Pingback: Being Expert | Tips, Tricks & How To Recipes

  33. I am trying to kick off a fancybox from a button click but the following code is not working…

    Can anyone help please!!!!

    Reply ↓

  34. Hello, I have not used this plugin yet. I would like to use the popup feature on multiple pages to display a video hosted on AmazonS3 but only on the first visit. In other words, I do not want the video to load every time a visitor lands on the same page or different pages. Is this possible please?

    Reply ↓

  35. Great plugin.

    Some compatibility problems drives me crazy. Inline content doesn’t show correctly in IE 8. My site is https://playingluv.com, if you set your IE9 to compatible mode(the button on the left of reload in address bar) and click “登陆” the anchor on the right of date on the header bar. The hidden fancybox pops up but with a strange width.

    I am a newbie and there’s nothing i can do about it. Would u please help me.

    Thanks so much:)

    Reply ↓

    • Hi Stanley,

      I do not have the means to test with IE9 in compatibility mode (nor IE8) so I can only suggest something to try: the page source code shows a blank line as first line, followed by the DOCTYPE declaration. This doctype declaration needs to be the absolute first line, starting on the absolute first position. And IE absolutely needs a doctype to display FancyBox correctly. So I suggest you try to find out why/how this blank line got there… It might be simply the first line in your themes header.php but it might also come from elsewhere.

      Again, it’s just a thought and I cannot test it. So if it does not solve the issue, please tell me :)

      Reply ↓

  36. So, I believe you already addressed this issue, but I am still struggling. The Pop-up looks awesome, but I need to be able to add the print functionality within the pop-up. I know you mentioned something in regards to an “alt” tag, but I can’t seem to make it work.

    <a href="http://www.polarisglobalfunds.com/wp-content/uploads/2012/09/globalreturns.jpg">GLOBAL ANNUALIZED RETURNS</a>

    Reply ↓

    • Hi Kelly, In your code example, an alt attribute is not going to work (you need an <img … > tag for that) so you’ll have to paste your print code inside the link title field.

      Reply ↓

  37. Easy Fancy Box Causes Site to Hang in IE8

    Easy Fancy Box 1.3.4.9. WordPress 3.4.1.

    Found a solution but wanted to run by you for verification.

    TwentyEleven theme running on a Windows server. When Easy Fancy Box plugin is active, site works fine in all browsers except IE8 (works fine in IE9, but wasn’t able to test IE6 or IE7). I disabled all plugins and site does not hang. Activated only Easy Fancy Box and site hangs. Site eventually responds after about 1-2 minutes after each click.
    I searched your forum and the internet. Found a suggestion outside your forum to fix the issue, and it worked…

    Change the paths to images in the IE sections of the CSS. ‘AlphaImageLoader’ filter loads everything relative to the document, but if changed to full path the site no longer hangs.

    src=’http:siteurl/wp-content/plugins/easy-fancybox/fancybox/fancy_close.png’ – where siteurl is the site’s url

    instead of:

    src=’/fancybox/fancy_close.png’

    Do I really have to modify the jquery.fancybox-1.3.4.css?

    Thanks
    Jim

    Reply ↓

    • Hi Jim, thanks for your feedback. I cannot reproduce the issue but I’ve had others report similar effect in IE8. So I’d like to ask you for some more help… I’m going to do some patching and would like to send the result to you for testing. Is that OK?

      Reply ↓

    • Jim, looking at your website, I see the plugin is already converting the URLs in the stylesheet correcly: http://boldaction.electricstores.com/blog120827/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4 — search for ‘AlphaImageLoader(src=’ — or is that by your manuel editing? If so, could you please install the latest dev version which has a slightly different way of determining the full URL paths than the current stable version. You can find it on http://wordpress.org/extend/plugins/easy-fancybox/developers/ under Other Versions.

      Reply ↓

      • Yes, I had modified the file. I removed the plugin and installed the latest Dev version (Development Version (svn)). The plugin is active, but doesn’t seem to be working (is Dev version doing that?). I re-checked and it is active. The site now loads fine in IE8.

        Reply ↓

        • Ooops, my bad. I activated Version 1.3.4.10dev9. Site loads fine in IE8 and plugin is working, with one change – the fancy box displays fine, but the background is grayed out (not dimmed like it used to). Maybe I need to change a setting. Try the Events links and click on Tix Info.

          Reply ↓

          • Jim, I finally found an older PC with Windows still running on it which luckily (in this case… I’m not a big Windows fan) had IE8. And it displayed the overlay correctly. Not grayed out but semi-transparent like it is supposed to. Maybe if you clear your browser cache?

      • Ravan, all is good with testing using 1.3.4.10dev9. Thank you. And many thanks for responding so quickly – many others do not.

        Last question – how best to proceed. Leave in the 1.3.4.10dev9 version I installed or wait for something else?

        Tanks

        Reply ↓

        • Jim, you can just leave the dev9 version active and you’ll receive the usual automatic upgrade as soon as there is a new stable version :)

          Reply ↓

  38. error notices after instalation:
    Notice: Undefined index: id in /var/www/projects/zdrojak/htdocs/public/soubory/plugins/easy-fancybox/easy-fancybox.php on line 351

    Reply ↓

  39. Pingback: YOUTUBE – Video einbetten

  40. Thanks for the plugin.

    I am trying to display auto playing video with some text below it in a lightbox with the requirement that the video should stop playing when it is dismissed by either pressing Esc or clicking away.

    I placed the video via jwplayer shortcode in a text widget. Here is the full code in the text widget: http://pastebin.com/3ATNrais.

    It is working as expected in Chrome, but not in Firefox. In Firefox, video continues to play even when the fancybox is dismissed. I have since removed style=”display:none;”, but it didn’t make any difference.

    This problem can be seen at http://www.amazingyogateachertraining.com/blog/. Look for the video thumbnail in the right sidebar.

    Any pointers?

    Reply ↓

    • Hi Sridhar Katakam, I would advise you to use iframe embedding instead of inline to assure cross browser compatibility. If you can host your videos on any of the supported video platforms like Youtube, Vimeo or DailyMotion, then you can simply use those. That’s the easiest option. If not, you will have to create an external page or pages that show the video(s) via your instance of the jwplayer. Then link to those pages with class="fancybox-iframe".

      Alternatively, you can test the following method but it might not work as expected so you’ll have to test it: change in your current code href="#fancyboxID-1" class="fancybox" to href="#fancyboxID-1" class="fancybox iframe" (notice there is no hyphen between fancybox and iframe!)

      Reply ↓

  41. I have been racking my mind over this one. Probably a case of that I can’t see the forest for the trees. I’m using WordPress 3.4.2.

    I’m using the [gallery] shortcode in my PHP. I have disabled all of my plugins, double checked that my libraries are hosted over the Google CDN, l even tried using fancybox manually. Still no luck. It says in the HTML output that the Fancybox files are loading properly, and the links in the portfolio are linking to the file.

    I just can’t sort this one out. Please help. My shortcode is below:

    [gallery id="18" link="file" size="medium" class="fancybox" rel="gallery-1"]

    Reply ↓

    • Hi Joshua,

      It can be a number of things really. Have you made sure ALL needed script and stylesheet files are included CORRECTLY and only ONE time? Are there any javascript errors occurring (you can use a developer toolbar in your browser to see them) and if so, what? There are some trouble shooting tips on http://wordpress.org/extend/plugins/easy-fancybox/other_notes/ … or can you give me a link to a live example?

      By the way, I don’t think the parameters class="fancybox" rel="gallery-1" will do anything. Unless you are using a gallery plugin. If so, which one?

      Reply ↓

  42. Thanks for the great plugin Easy FancyBox. I tweaked your code slightly to improve links to youtube.com/user/YOURUSERNAME which will not render correctly with Easy FancyBox because it is a listing of videos – not a video. Would be great if you can add the change to your WordPress plugin for production if you approve.
    Here is the diff of the code:

    [~/public_html/wp-content/plugins/easy-fancybox]# diff easy-fancybox-settings.php easy-fancybox.cgm.php
    709c709
    ‘href*=”youtube.com/watch”‘,
    —
    > ‘selector’ => ‘href*=”youtube.com/”‘,

    Reply ↓

    • Hi Chris,

      Thanks for reporting. Your solution is valid but will pose some issues for users that use another youtube URL format. I’ll find a way around that while still preventing the user page appearing in FancyBox in the upcoming release :)

      Reply ↓

  43. Hi,

    Is there a possibility to open a SPECIFIC image of a gallery with easy fancybox by using an extension of an URL?

    http://www.salsa-trips.com/galleries/adolfo-indacochea

    Using facebook LIKE, we would like to link back rather to the image inside the gallery than to the image page itself. As of now, facebook links back to:

    http://www.salsa-trips.com/ims_image/_dsc1612-2

    My preference would be an URL like

    http://www.salsa-trips.com/galleries/adolfo-indacochea/_dsc1612-2 or
    http://www.salsa-trips.com/galleries/adolfo-indacochea#_dsc1612-2

    Thank you :-)

    Reply ↓

    • Hi Salsa, yes that is possible but you need two things:
      1. all links need a unique ID to be identified with.
      2. you need this extra javascript in a sidebar text widget (for example) or in your themes footer.php:

      <script type="text/javascript">
      window.onload = function() {
      if(window.location.hash) { jQuery(window.location.hash).trigger('click'); }
      };
      </script>

      After that, your images can be opened inside a fancybox straight on page load by appending the URL with #UNIQUE_ID where each ID is different of course.

      Reply ↓

  44. Is it possible to make this plugin add a “open in fancybox” checkbox in the tinymce add-link function?
    Background: my friends wants to have descriptive text for certain words and I think he’s too chicken to fiddle with the HTML editor so a “open in iFrame” feature would auto-add the class=fancybox-iframe parameter to a hyperlink.

    Reply ↓

  45. HI i installed it and im having problems nothing show in fancybox and i did the settings under the media page. how can i put an small image and when someone click on it for it to open youtube videos with fancybox help me nothing working

    Reply ↓

  46. i read them this doesnt help. can you plase make a video and post it on how to use this plug in and how to put youtube videos on my page and open with fancybox. where there is no videos for this plug in

    Reply ↓

  47. Hi Ravan,
    Great plugin!!! Thanks.
    I’m using Fancybox to display the WP login form and I’m trying to close the Fancybox when forms are submitted. I tried adding onclick=”javascript:jQuery.fancybox.close();” to the button but it doesn’T work. Need help.
    Can you advise me what trick you would use?
    Thanks

    Reply ↓

  48. Hi there,

    I’m using a child theme customised from Elegant Themes. I can’t seem to get auto-rotation to work.

    I wondered if there was a conflict somewhere. Grateful of any help.

    Cheers!

    Reply ↓

  49. HELLO!

    Great plugin. I am using it on pdf-files and it works great.

    Is it possible to adjust settings in the viewer? My pdf is a folder in landscape format and when it pops up, it adjusts the width to 100%.

    I am not a big fan of scrolling. I would like it to zoom to pagelevel and show the whole thing instead?

    Reply ↓

    • Hi Marie,

      This is a PDF browser plugin issue. In most browsers (except Chrome) this will likely be the official Adobe plugin, which can be controlled by some parameters. When you are using the PDF option in Easy FancyBox, these parameters will be #toolbar=1&navpanes=0&nameddest=self&page=1&view=FitH,0&zoom=80,0,0 but you can create your own by going to Settings > Media and disabling FAncyBox for PDF and enabling it for iFrame. Next go to the PDF link itself and give it a class="fancybox-iframe" attribute and then append the URL with your own parameters. Start with the ones above then, adjust the view (FitH or FitW) and zoom parameters.

      Hope you can make it work for you :)

      Reply ↓

      • HI Ravan :-)

        Thanks for the tip – My pdf files already look a lot better when opening in an iFrame.

        I feel a little silly – but I dont actually know how to append the URL with my own parameters in WP? I tried google of course, but all the different answers just got me more confused.

        Do I need some sort of plugin?

        Again…thank you for the quick reply:-)

        //Marie

        Reply ↓

  50. Hey buddy, I’m using a script to stretch my background, since CSS’ing it is performing really poorly with videos on top.

    However, the script need to load the 1.8.1 jquery, and loading jquery “again” kind of breaks the functionality of this plugin.

    I’m using: http://srobbin.com/jquery-plugins/backstretch/

    I’m not sure on how to correct this, but by de-activating FancyBox I can get the background to work, so is the problem with FancyBox or with the script?
    Or with the fact that I need to call the jquery twice? (For some reason)

    Cheers,
    André

    Reply ↓

    • Hi v0ice, the problem is caused by loading the two jQuery libraries on top of each other. Normally I would not do this but in this case I would simply replace the jQuery (1.7) library that is included in your WordPress installation with the 1.8.1 version. Then you can get rid of the manual call to the 1.8.1 library. You will not have to worry about the coming WordPress 3.5 release because that will include jQuery 1.8.2 just skip any in-between update like 3.4.3 if that should come before 3.5 ;)

      Reply ↓

      • Hey mate, I actually tried replacing the WP-jquery with both 1.8.1 and 1.8.2, but none of them got both of the scripts working together.

        It seems like the “backstretch-script” needs to have the call right before the actual script line.

        And if I remove the wordpress-jquery and only have the call before the script, your plugin won’t work.. the dilemma!..

        Reply ↓

        • Do you have a link to your site so I can take a look? If you don’t like to share it publicly, you can use the form on the Contact page :)

          Reply ↓

          • OK, I see you have replaced the WP library with 1.8.1 (good) but you still include the jQuery library a second time just above the backstretch script in the footer. If you remove that inclusion line
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
            it should work :)

          • Ah yes… that’s because the current jQuery is running in NoConflict mode. Could you try replacing the $.backstretch with jQuery.backstretch in that line in the footer?

Leave a Reply