Easy FancyBox for WordPress

Easy FancyBox for WordPress

Install now

Download Version 1.8.9

Requires WordPress: 3.3 or higher
Compatible up to: 5.0
Downloads: 2522700

Rating: 4.6 out of 5 stars
# Votes: 155

Download

Latest version: Download Easy FancyBox for WordPress 1.8.9 [zip]
Downloaded 2522700 times.

Rated 4.6 out of 5 stars with a total of 155 votes on WordPress.org »

Commercial message:

Screenshots

  1. <p>Example image with <strong>Overlay</strong> caption. This is the default way Easy FancyBox displays images. Other options are <strong>Inside</strong> and the old <strong>Outside</strong>.</p>

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

  2. <p>Example of a YouTube movie in overlay.</p>

    Example of a YouTube movie in overlay.

1,156 thoughts on “Easy FancyBox for WordPress

  1. Copyleft

    I placed the following code but I still don’t get the second pop up.

    on_sent_ok: “jQuery.fancybox.close();jQuery(‘#success’).click();”
    <a href=”#success”></a>

    <div class=”fancybox-hidden”>
    <div id=”success”>Successful submission</div>
    </div>

    Reply
    1. RavanH Post author

      Sorry, you changed the ID’s … here is a full example of what I mean:

      on_sent_ok: “jQuery.fancybox.close();jQuery(‘#successlink’).click();”
      <a href=”#success” id=”successlink”></a>

      <div class=”fancybox-hidden”>
      <div id=”success”>Successful submission</div>
      </div>

      Reply
    1. RavanH Post author

      Copyleft, you need to type the code manually instead of copy-pasting because that will take copy the wrong quotation marks (this is a template thing: normal single and double quotes in posts and comments on this site get converted to rounded quotes)… Another thing is that you are running two FancyBox plugins on the same site. The other one is throwing an error.

      Finally, I was thinking about another approach: forget the hidden div and link with new fancybox and just set a small timeout/wait to the close command so that the visitor will be able to read the success message (which you can adapt to say the window will close in a few seconds) with the code

      on_sent_ok:"jQuery('#fancybox-wrap').fadeOut(5000); window.setTimeout('jQuery.fancybox.close()',4000);"

      Change the values 5000 and 4000 (milliseconds) to vary the fadeout and closing times.

      Reply
  2. Alex

    Trying to get one thumbnail to open multiple hidden images.
    The thumbnail opens twice then the other images. Want to not have the thumbnail open with the large images.
    Also if I want multiple groups of these on the same page is using rel=”group1″ …rel=”group2″ correct?

    Site: http://www.wsreclamation.com/portfolio/

    Code:
    <div>
    <a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_03361-e1337092420650.jpg">
    <img src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_03361-e1337092420650.jpg" alt="" width="350" height="262" />
    </a>
    <div class="fancybox-hidden">
    <a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_03361-e1337092420650.jpg">
    <img class="alignnone size-large wp-image-158" title="IMG_0336" src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0336-1024x768.jpg" alt="" width="1024" height="768" />
    </a>
    <a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0337.jpg">
    <img class="alignnone size-large wp-image-157" title="IMG_0337" src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0337-1024x768.jpg" alt="" width="1024" height="768" />
    </a>
    <a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0339.jpg">
    <img class="alignnone size-large wp-image-156" title="IMG_0339" src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0339-1024x768.jpg" alt="" width="1024" height="768" />
    </a>
    <a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0340.jpg">
    <img class="alignnone size-large wp-image-155" title="IMG_0340" src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0340-1024x768.jpg" alt="" width="1024" height="768" />
    </a>
    <a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0342.jpg">
    <img class="alignnone size-large wp-image-154" title="IMG_0342" src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0342-1024x768.jpg" alt="" width="1024" height="768" />
    </a>
    </div>

    Reply
    1. RavanH Post author

      Hi Alex, you do not need to use the hidden div for that. Just place all thumbnails into your post content (linking them to their full size counterpart like you did already) and then go into the HTML View editor tab and remove all the img tags (starting with <img ... and ending with ... />) except the first one. This leaves you with one thumbnail linked to one image, followed by a lot of links without anchor text which makes them invisible to visitors but still accessible for FancyBox.

      If you want full control over galleries, you will need to disable the Auto-gallery option on Settings > Media and then use the rel attribute on each link like you seem to have understood already 🙂

      Reply
  3. Annette Kalapaca

    Forgive me if this has been covered but I can’t seem to figure it out.
    I have a WP gallery on this page:
    http://linkserver55.com/~netprofi/simon-robson/
    with an image at the top and the gallery lower down for the portfolio.
    How do I get rid of the head shot from the portfolio gallery?
    Thanks, in advance, I have added the “nofancybox” class to the head shot but it still shows up in the gallery.
    Annette

    Reply
    1. RavanH Post author

      Hi Annette, the head shot shows up in the FancyBox gallery because it is right there in the WordPress gallery (the last one) which is managed by WordPress, not by my plugin. To make WordPress not include that image in the gallery, you’ll have to jump some hoops to make it no longer be linked to the post/page. Delete the image. and then create a new page or post that you keep in Pending status or Private (as long as it is not accessible to public) and then re-upload and insert the head shot into this private post. After this operation, the image is now attached to this private post. Then go back to the original page and re-insert the image by browsing the media gallery (it should be at the top there since you have just uploaded it). Now, the image is in the post that you want it while being attached to another post. This way, it will not show up in the gallery… Like I said, it’s a bit complicated. Hope the method will serve you. Otherwise you’ll either have to insert all the other images manually (not using the WordPress gallery feature) or use a plugin like NextGEN Galleries.

      Reply
  4. Andrea

    I’ve a problem when i try to set the popup to open on page load.

    Following your tutorial this is what i’ve made:

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

    But when i try to load the page the popup show The requested content cannot be loaded.
    Please try again later and also the link is visible on my page.
    What’s wrong? Thank you mate 🙂

    Reply
    1. RavanH Post author

      Hi Andrea,

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

      Which should auto popup a fancybox with the text “…inline content here…” and NOT show any link to re-open it. If you do want the link visible, add some anchor text (like the “Read my inline content” from the example) or an image.

      Reply
  5. GraphicsbyEB

    My client wants a “Look Inside” pop-up for a paid PDF download. I’m using the Easy FancyBox plugin with Next Gen Gallery on this page: graingiver.com/food-for-thought
    It works perfectly in Firefox, but in IE there are no navigation arrows to view each of the 4 pages. I only see the “X” to close the window.

    Any suggestions?

    Reply
    1. RavanH Post author

      Hi Eileen, the only thing I notice with IE is that the facebook script throws an error. Not sure why but your like button in the sidebar seems wrong (has <?php echo $URI; ?> in the iframe source URL which is NOT going to work) so maybe that could be interfering in Internet Explorer? It’s just a wild guess but try removing the text widget and disabling the facebook share plugin to see if that changes the behaviour of fancybox or not…

      Reply
      1. GraphicsbyEB

        Thanks for the reply.
        The popup didn’t work in IE before I added the social media code (though I appreciate you telling me there is a problem, and I’ll remove it from the sidebar.)
        I’m not sure what to do now. Is the problem with using Next Gen? The goal is to display 4 images, PDFs or JPGS, in a particular sequence activated by clicking on one thumbnail.
        Is there a better way to achieve this?

        Reply
        1. RavanH Post author

          Well, it can be done without NextGEN which would make the site lighter, yes, but I would not call it better. With NextGEN it really should work too. Is there any possibility to switch to the default Twenty Eleven theme for a moment to see if thqt changes anything? Or you could try to upload some imaes to the post and insert them each seperately as thumbnail linked to their full size FILE counterpart (not attachment page) to see if that does work as it should… If so, you can then proceed to remove the thumbnails except the first one, while leaving the links to the full size images in the post source. You will need to do this in the HTML tab view. Hope this makes sence to you 😉

          Reply
      2. GraphicsbyEB

        Ravan,
        Thanks again for the reply. After stepping away from it for the long weekend, I tried your suggestions:
        I removed the shortcode for the nggallery, then I re-uploaded the full size-images linking to the file URL, and inserted each thumbnail into the post for all 4 images. This worked beautifully in both Firefox and IE., whereby the full-size image pops up for the cover page and then advances in order through the other three. But, of course, I only want to launch from one thumbnail.
        Thus I removed all thumbnails, except for the first one, and now the first full-sized image pops up, but there are no arrows to advance to the other links in either Firefox or IE. So, something went wrong when I removed the 3 thumbnails. It’s probably me, since no one else has posted about this. Please stick with me until this is resolved?
        Here is my code:
        <a href="http://graingiver.com/wp-content/uploads/2012/05/LookInside_Cover_1024x1325.jpg"><img class="alignleft size-thumbnail wp-image-265" title="Look Inside" src="http://graingiver.com/wp-content/uploads/2012/05/LookInside_Cover_1024x1325-150x175.jpg" alt="" width="150" height="175" /></a><a href="http://graingiver.com/wp-content/uploads/2012/05/LookInside_Contents_1024x1325.jpg"></a><a href="http://graingiver.com/wp-content/uploads/2012/05/LookInside_Introduction_1024x1325.jpg"></a><a href="http://graingiver.com/wp-content/uploads/2012/05/LookInside_Objectives_1024x1325.jpg"></a>

        I really appreciate your time.

        Reply
        1. RavanH Post author

          Eileen, I tested your code on my own site and it works just fine. Did you have the Auto-gallery feature turned on?

          Reply
  6. Peter

    Hi, Is there a way where you can have a link inside an easy-fancybox that will shut down the easy-fancybox and go to a specific page inside the website itself?

    best regards Peter

    Reply
    1. RavanH Post author

      Hi Peter, yes that is possible but how to do it, depends on the content you are displaying inside FancyBox. Let’s say you are showing inline content, then place a link inside the text that points to the page you want to go and add this attribute to it: onclick="jQuery.fancybox.close();return true;". Use parent.jQuery.fancybox.close() from within iFrame content (will only work when both the parent page and the iframe content page come from the same domain) and when showing images or other media, you will have to get a link with the attribute (without ‘parent’) into the title. This is a bit more difficult. You’ll have to avoid using double quotes and maybe escape some stuff with a backslash to make it work…

      Reply
      1. Peter

        Hi RavanH,

        Thank you very much for the advice.

        It is indeed both for inline content and iFrame content I need it. All materials are on the same domain, so that shouldn’t be a problem, I guess.

        best regards Peter

        Reply
  7. Uta

    Hello,
    great plugin, love it!
    Is there a way to display a Youtube or Vimeo playlist in Easy Fancy box, too?
    I just get it to work with single videos.
    Thanks for any advise!
    Uta

    Reply
  8. Simon Weil

    Hi,
    Thanks for a great plugin!!!

    Is it possilbe to add ltr support?

    the CSS I’ve taken care of:
    .rtl #fancybox-title-over {
    text-align: right;
    }

    and I can take care of translation.

    But I do not know how to change the arrow direction…
    for RTL the first item should be on the right
    and pressing the arrow on the left should transfer to the next image.

    I do not know how to accomplish that.

    Can you please help?

    Simon

    Reply
    1. RavanH Post author

      Hello Simon, thank you for your feedback and request. RTL support is indeed something that would be valuable but I’d have to take some time for it. And someone to test it out for me, so if you don’t mind I’ll contact you via e-mail directly…

      Reply
    2. RavanH Post author

      Simon,

      Could you try this CSS?


      #fancybox-left { left: auto; right: 0px; }
      #fancybox-right { left: 0px; right: auto; }
      #fancybox-right-ico { background-position: -40px -30px; }
      #fancybox-left-ico { background-position: -40px -60px; }
      .fancybox-title-over { text-align: right; }

      I’m not sure if the body class .rtl is always applied correctly (it might depend on the theme) so I’m leaving that out.

      Another thing: I have no idea how FancyBox will react to using the left/right arrow keys on an RTL keyboard. Does the left arrow key stroke move forward (to next image) or does it move backward like on LTR?

      Please let me know if these rules are useful and how the keyboard arrow keys work. And if you made a translation and are willing to share it with the WordPress community, please send me the .mo file and I’ll include it in the next release 🙂

      Regards,
      Allard

      Reply
  9. dave

    Hi I have a problem with fancy box, I have an iframe content inside the fancy box, so it opens the first time. but when I try to open it again, the contents inside the fancy box suddenly vanished. I try auto-detect and also putting iframe class in it, but to no avail.

    does anyone know any solution for this? or is having same problem?

    Thanks and regards,
    Dave

    Reply
  10. Pingback: Jetpack: Mach deinem (eigenen) Wordpress Blog Beine | rosenblut

  11. Pingback: Your donations donated

  12. Josh M

    Not sure if you answered this already. I want to display a caption (the title) on the popups that is a working link to another page. Is that possible?

    Thanks so much!

    Reply
    1. RavanH Post author

      Hi Josh, yes that is possible. Replace the current title with HTML code that represents a link but without (!) using double quotes. Double quotes will break the link… If you know how a link is formed in HTML code, it should be easy. Just replace the usual double quotes with single qoutes. 🙂

      Reply
  13. Aaron

    Hi there – when I click an enlarged image or next /prev arrow, the same active image displays two more times before advancing on to the next image. So each time I try to navigate to a new image, what I get is the same image repeated twice before a new image appears. Is there a fix for this?

    Thanks!

    Reply
    1. Rolf Allard van Hagen Post author

      Hi Aaron, this usually indicates there are more than one (consecutive or nested) links to the same image in your page source. FancyBox does not discriminate between link targets and shows them all. If you give me a link to a page where the problem is visible, I might be able to tell you more. But you can also check yourself by opening the page source (it depends on your browser but usually you can right-click and choose “View page source…” or something) and find the thumbnail of the first image that appears double. Then check the amount of link/anchor (a) tags there are to its full size counterpart…

      Reply
  14. Dmitry

    Hi Allard,

    How i can set fixed width and height for pop-up window?

    I tried this: $.fancybox( { autoSize:false, minWidth:400, width:400, height:400, maxWidth:400} ); – but not works for me.

    How i can force this styles:
    <div id="fancybox-content" style="border-width: 0px;width: 500px;height: 500px">

    Thanks!

    Reply
    1. Rolf Allard van Hagen Post author

      Hi Dmitry, with those style rules you added to the content div, it should already work. No need for any parameters in the fancybox() function.

      Reply
  15. vishal goyal

    Impossible task said by my colleague:

    I want to open two different pop up form at same page and for it I have created two contact us form and and put their short code correctly but when i open either first or second popup form it opens the first popup form.

    Reply
    1. Rolf Allard van Hagen Post author

      hi vishal goyal, it should be perfectly possible. are you using two different ID’s for the two forms and inside the two links?

      Reply
        1. Rolf Allard van Hagen Post author

          Well, obviously…

          Or are you talking about another ID like fancybox-auto? Are you looking to open these two forms in their own FancyBox at the same time? Then your colleague is right. That is not possible. You will have to display the two forms inside ONE box…

          Reply
    1. Rolf Allard van Hagen Post author

      moe, tested on FireFox 13.0.1 and should work. if not on your end, then there is either something wrong on your site or try emptying the browser cache.

      Reply
  16. Robert

    Hi Ravan,

    First off all thanks for this great looking plug-in.
    I try to use it to load in a webpage using the folowing code:
    <a href="http://maakeenshirt.nl/designer/index.php">Open De Designer</a>

    However, the page opens as a separate page and not as a overlay.
    Iframes is activated in the control panel.

    Any ideas?

    Thanks a lot, Robert

    Reply
    1. Rolf Allard van Hagen Post author

      Ha Robert, je commentaar was door Akismet als spam gefilterd. Vandaar dat er geen reactie kwam. Ik zie dat je nu Shadowbox gebruikt. Mocht je toch FancyBox willen, gebruik dan dit voor je iframe link:
      <a href="http://maakeenshirt.nl/designer/index.php" class="fancybox-iframe">Open De Designer</a>

      Or download and install the latest dev version, then add the link straight to your menu and give that menu item the “fancybox-iframe” class…

      Reply
  17. Miklos

    Hello RA,

    I have tried many plugins but yours seems to do the trick I’m looking for. I am currently testing the development version (because of the “no resize” option), and have two questions, one which has been asked earlier (the first one below)but for which I have seen no reply:

    1. Is it possible to have the large image open not on click but on the mouse hovering over the smaller one?

    2. Is it possible to have an icon such as a magnifying glass automagically appear on the top right or left corner of the small image which has a link applied to it, so as to indicate there is a way to magnify it? I actually use the same source image both for the “thumbnail” (or smaller image, resized by attributes) and the larger one (which opens in the popup).

    Thanks a lot!

    Miklos

    Reply
    1. Rolf Allard van Hagen Post author

      Hi Miklos, both questions: yes it is possible… but not with this plugin. That’s to say, it’s outside the scope of this plugin. However, if you would like to hire me for these customisations, please contact me 🙂

      Reply
  18. bryan

    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
    1. Rolf Allard van Hagen Post author

      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
      1. bryan

        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
        1. Rolf Allard van Hagen Post author

          Did you disable the PDF function on your Settings > Media page completely?

          Reply
      2. bryan

        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
  19. Shawn

    Thanks for such a great plugin!

    When I go to Settings > Media, I have no Fancybox option, only Library and Add New.

    Reply
    1. Rolf Allard van Hagen Post author

      Hi Shawn, you need to look for the Media settings page under the Settings menu. Not the Media menu.

      Reply
  20. wilq

    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
    1. Rolf Allard van Hagen Post author

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

    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
  22. dave

    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
    1. Rolf Allard van Hagen Post author

      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
      1. Richard Spencer

        Hi Rolf

        Any chance you’d give us a little more detail on how to do this?
        I’m seeing the following options:-
        Add ‘widget_content’ filter
        Use ‘wp_reset_query’ fix
        Where do I go from there?

        P.S. LOve your plugin!!!

        Cheers
        Rich
        ~

        Reply
  23. Yair

    Hello & thanks for this nice plugin

    i try ti view image in full size even when to screen small
    how can i do that

    Reply
    1. Rolf Allard van Hagen Post author

      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
  24. Magnus

    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
    1. Rolf Allard van Hagen Post author

      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
  25. Tony Su

    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
    1. Rolf Allard van Hagen Post author

      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
  26. Saana

    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
    1. Rolf Allard van Hagen Post author

      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

Leave a Reply

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