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

1,036 thoughts on “Easy FancyBox

  1. trouille2

    I have recursively the same issue with firefox and the youtube embedded videos. It seems Firefox ask to have an https url to play the video, in that case, fancybox don’t work anymore and on click, the youtube page opens in place of opening the lightbox. Is ther a fix for that?

    Reply
  2. C. Spencer Reynolds

    We are wanting to run this on our intranet site that will load and play swf files we have recorded using jing for quick tutorials on internal software. I have it installed and have tested with pdf, jpg and swf and none of them are being detected. Any ideas, it seems that nothing is working just yet…

    Reply
  3. James

    After updating from 1.3.4.9 to 1.5.5 iframde doesn’t work anymore. When you click on a link you go directly to the page and don’t get the FancyBox.

    Reply
  4. James

    That’s a little bit difficult. It is an intranet website. There is no access to the website from the Internet :-(

    Reply
    1. RavanH Post author

      Hi James, in that case I can not tell you what the issue is… Take a look at the page source code and verify if all the needed script files are included. Notably in the page footer. It might be your theme that is missing the obligatory wp_footer() call? Then use a browser with developer tools (like Chrome or Opera) and check the error/console output to see if there are conflicts with other scripts…

      Reply
      1. James

        Hi,

        Thanks for the response. On the template wp_footer() was disabled. After enabling it was working perfect.
        Thanks.

        Regards James

        Reply
  5. Terence Milbourn

    I have a pricing table on the website which is created with short-codes and css, and I am having difficulty with a contact-form-7 popup using a URL. How would I add this form to the existing short-code setup at [ http://bit.ly/HxrLeg ] using your plugin?…

    `[pricing column=4 title="Starter" price="$500" per="one time fee" button_url="/#/" button_text="REQUEST A PROPOSAL"]`

    Reply
    1. RavanH Post author

      Hi Terence, I’m not sure but it does not look like you can give a specific class to the link in this pricing table shortcode… To be able to make the button/link display something in FancyBox, you’ll need to give that link a specific class, like “fancybox-inline” for example. If this is possible with the picing table shortcode, then you can make it work. Otherwise, it will need some really specific custom javascript to get it working.

      Reply
      1. Terence Milbourn

        Thanks for coming back to me so quickly. If I can’t use a popup I will just have to link back to contact page with no popup. That’s a a shame but sometimes there just isn’t a happy ending.

        Reply
  6. Christopher

    My images are not being loaded by Easy FancyBox, they are being treated as a separate post ? I have set the anchor to class=fancybox, fancybox won’t load the image ?

    Reply
  7. Christopher

    I forgot to mention, I’m inserting my images though NextGen > Insert Media the code gets inserted, the images are not being loaded by Easy FancyBox ?

    Reply
    1. RavanH Post author

      FancyBox only works on links to media files. If the NextGEN gallery code generates thumbnails that are linked to pages, FancyBox will not be able to do anything with that. You’ll need to configure NextGEN to link to the media files directly instead of attachment pages…

      Reply
  8. Craig Tommola

    I have the fancybox-iframe class to the “Hope College Logos” link beneath the Download button.

    The fancybox opens, but the iframe content isn’t included. I have tested this a number of ways.

    Please advise.
    Thx
    CT

    Reply
    1. RavanH Post author

      Hi Craig, that’s a weird effect… Funny that in the Opera browser the iframe content is shown, but not in Chromium or Firefox. Did you try linking to any other web page to see if that changes anything?

      Reply
        1. RavanH Post author

          Hmmm… Google will not be caught in a frame if it can prevent it, so that one is very likely to fail. Otherwise, I have no thoughts on this. Except that looking at your site again in Chrome and Firefox, it works just fine now. Did you change anything?

          Reply
  9. Jeffery Shirley

    I like the way it looks and works in Google Chrome but in Firefox the pdf pages are off center. Is it not compatible with Firefox?

    If you want to take a look the pdf’s are on the “Print” page of my portfolio…. the United Yellow Pages samples are pdfs.

    Reply
    1. RavanH Post author

      Hi Wolfram, your theme is loading its own older version of jQuery. You need to fix the theme… Or downgrade Easy FancyBox to version 1.3.4.9.

      Reply
  10. ryantownley

    Do you have plans to update this plugin to support Fancybox 2.x anytime soon? I need the ability to trigger fancybox outside of an iframe when the link is inside one. Appears possible with 2.x.

    Reply
    1. RavanH Post author

      Hi ryantownley, it is currently not allowed to include FancyBox2 in plugins hosted on WordPress Plugins Directory because of licencing incompatibility. But I’ll be looking into a way to offer easy integration of FancyBox2 in the future.

      Reply
  11. Dee

    Hi! Thank you for this plugin.
    Is there a way to show a ‘loading’ graphic while large pdf files load in the viewer?

    At the moment, a static grey box appears till the entire file has loaded. Users may need to get a visual feedback that the file is being loaded.

    Any thoughts on how this can be done?
    Cheers

    Reply
    1. RavanH Post author

      Hi Dee, the FancyBox script cannot detect if object embedded or iframe content has loaded or not. It’s up to the browser PDF plugin which usually means there is just a grey ‘box’. However, there will be an alternative in the Pro extension involving https://docs.google.com/gview

      Reply
  12. Pingback: 11 Useful and Effective Lightbox for WordPress - Resource Guru

  13. mistrmint

    Hi,

    Any idea how to add the class=”fancybox-iframe” to the woocommerce “Add to Cart” button. I have the image of the product opening up a popup but now also need the “Add to Cart” button to do the same. (Mine is actually a “More Info” Button)

    Thks

    Reply
    1. mistrmint

      Don’t worry, found it. Had to add fancybox-iframe to add-to-cart.php as such : sprintf(‘<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s fancybox-iframe"

      Reply
  14. Craig Tommola

    I turned on WP Debug for an entirely unrelated reason, and immediately received the following:

    Strict Standards: Non-static method easyFancyBox::register_settings() should not be called statically in /data/blogs/wp-content/plugins/easy-fancybox/easy-fancybox-class.php on line 546

    Strict Standards: Non-static method easyFancyBox::register_settings() should not be called statically in /data/blogs/wp-content/plugins/easy-fancybox/easy-fancybox-class.php on line 311

    Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method easyFancyBox::register_scripts() should not be called statically in /data/blogs/wp-includes/plugin.php on line 429

    Please advise.
    Thx
    CT

    Reply
  15. mistrmint

    How would I refresh the parent page after closing popup? I have an “add to cart” on the iframe popup but onClose (afterClose) I need the parent page to refresh so that the cart gets updated.

    I tried :

    $(“.fancybox”).fancybox({
    type: ‘iframe’,
    afterClose: function () { // USE THIS IT IS YOUR ANSWER THE KEY WORD IS “afterClose”
    parent.location.reload(true);
    }
    });

    but doesn’t seem to work with easy fancybox.

    Reply
    1. RavanH Post author

      Hi mistrmint, if you can edit the add to cart button, try adding the javascript call parent.$.fancybox.close();

      Reply
        1. RavanH Post author

          Sorry, Craig. It looks like the comment system ate your code snippet. Try wrapping code in <code></code> tags and replace all < characters inside that code snippet with &lt; to prevent them from being interpreted…

          Reply
          1. Craig Tommola

            Every time I try, it says “invalid security token” or it comments nothingness.

            base target=”_parent” /

            Use that in the head, with the normal less than and greater than around it.

  16. Pingback: Notes on creating this portfolio site | Document Design

    1. RavanH

      I do not see any “click here” link. Besides, it looks like you are already using TWO other lightbox plugins (form-lightbox and lightbox-plus) at the same time so I strongly advise against installing a third one…

      Reply
  17. Pingback: Popular Wordpress plugins

    1. RavanH

      Hi Rose, your theme is incompatible with my plugin (most Elegant themes are) since it has fancybox already baked in.

      Reply
  18. Rodrigo

    Hi,

    First great plugin works great, I’ve used a few times.

    But now I’m facing a challenge about it. The fact is that I’m building a single page blog and the one thing missing is a gallery plugin. The thing is that I create the gallery using the add media button on the post editing area, and works great, the gallery is added, the thumbnails are generated and if you look the images in dev tools everything looks normal (no errors on the console or strange things in the html code), but when you click an image it loads the image in the browser tab/window, not the typical fancybox container on top of the overlay.

    The question, is there some function that needs to be executed when the post is loaded in order so the plugin can take control over the click event (I presume the preventDefault is missing, therefore the image loads the old fashion way)?,

    If I look at the header of the single page blog and the page with the post address I don’t see anything different(same scripts and stylesheet, also same html markup in the images) between both instances and I also see this in both at the bottom of the code:

    I’m loading the posts using jQuery’s ajax-get method and getting just the content and comments container, nothing else.

    Any idea on how can I solve this?

    Best,
    Rodrigo.

    Reply
    1. RavanH Post author

      Hi Rodrigo, the fact that post content is loaded via AJAX is likely the cause of the issue. My plugin searches for and binds FancyBox to media links on two events: document ‘ready’ and ‘post-load’. Apparently, the theme does not trigger the ‘post-load’ event after loading new post content via AJAX. Do you know if there is an event triggered at that point at all by the theme script? And if so, what name (handler) does it have?

      Reply
      1. Rodrigo

        Hi

        Thanks for the quick reply.

        Actually there are two AJAX callbacks in this case. The first one is when the post data is received and a second one that’s launched to preload the images data. On the first Ajax call the post content is looked up in order to see if there’s any images on it, since there are, the callback preload the images data and when all the images are completed a new callback is triggered to change the content container display.

        I made the entire code (which is not much, around 300 lines) and it uses jQuery no conflict, the main idea is a minimalist blog.

        Thanks again for your reply AMD sorry for the delay in my followup.

        Rodrigo.

        Reply
      2. Rodrigo

        Hi,

        I forgot to mention the callbacks names.

        The first callback is processAjaxResult(data), this function basically get the response and checks if there’s any on the post, if there is it calls a second ajax call to preload all the post’s images. The callback for this function is showAjaxResult(), which basically changes the container’s display property and animates the its height and opacity, both from 0. The second callback is the best because with that you make sure everything is loaded and in place to show the post, kind of a window.onload event.

        I’ll be very thankful if you could indicate me what should I add to one of this calls in order to make the plugin work.

        Thanks,
        Rodrigo.

        Reply
        1. RavanH

          Hi Rodrigo, if anywhere in one of these callback functions you see a possiblity do add a line like
          this.body.trigger( 'post-load' );
          then in theory, FancyBox should kick in and bind to any new media links that are available at that point.

          Reply
        2. Rodrigo

          Hi,

          Thanks for the response.

          I’ll try that, but in the mean time I looked around the fancybox docs and in Stackoverflow and I ended up registering and queueing the JS and CSS of fancybox and made a regular jQuery(“.fancybox”).fancybox(); call.

          As I mentioned before I took advantage of the first ajax callback which looks the response data for images, to add the fancybox class. Also I added a bit of code to look for galleries and add the rel attribute to each gallery depending on the gallery’s parent DIV ID.

          Then when all the images are loaded I call the fancybox() function with the parameters and change the display of the post container, to prevent people clicking on an image before the fancybox method is called.

          Rodrigo.

          Reply
  19. Sari Haavisto

    Hi! I really love your plugin but I’m having some troubles with Easy Fancybox on a website:

    1. I’m using Easy Fancybox with NextGen Galleries. This works fine, except that Easy Fancybox won’t show the whole Gallery if I turn off NGG’s own lightbox effect. I don’t know if this has some effect on how images are displayed or other plugin functions.

    2. I can’t get the fancybox-effect to turn off on mobile devices. I’ve tried your code:

    if(window.screen.width < 500 || window.screen.height < 500) {
    jQuery(document).off('ready', easy_fancybox_handler);
    }

    AND Photoswipe to disable fancybox, but nothing seems to work.

    3. Is there anyway to determine maximum height or width (preferably in percents even) for fancybox/images opening in fancybox. I haven't been able to find any solution.

    Webpage address: http://www.floraandlaura.com. I've blocked fancybox action on mobile for time beeing by changing the link to imagegallery for a link to facebook on mobile..

    I would really appreciate any help on these issues!! Thank you!

    Reply
    1. RavanH Post author

      Hi Sari, better not use the FancyBox included with NextGEN Gallery together with the one included in Easy FancyBox. Either keep the option in NextGEN activated and disable my plugin, or disable the lightbox option in NextGEN and keep my plugin. But not both…

      To disable the FancyBox in Easy FancyBox for smaller screens, try:

      /* Disable fancybox for small screens */
      var pixelRatio = window.devicePixelRatio || 1;
      if(window.innerWidth/pixelRatio < 641 ) {
      easy_fancybox_handler = null;
      };

      Inside script tags, of course. One small tip: if you want to place comments in text widgets, place them inside the script tags too or else they will be part of the HTML.

      Reply
      1. Sari Haavisto

        Thanks for a quick response! The problem is, that your plugin is betterlooking and somehow easier to customize, and therefore I would love to disable NextGen’s fancybox, BUT this also blocks the gallery from displaying. So for some reason, if I disable NextGen’s lightbox effect the “references” -link only shows the first picture. Not the whole image gallery. Any idea what might cause this..?

        Reply
          1. Sari Haavisto

            Oh my, I had missed one step. Sorry about that and thank you!!!

            Now the first issue is resolved. I still haven’t managed to turn Fancybox off on mobile though. So no luck changing it to e.g. photoswipe. Would you have any other solutions on this?? I’ve tried quite a few codes including this:

            /* Disable fancybox for small screens */
            var pixelRatio = window.devicePixelRatio || 1;
            if(window.innerWidth/pixelRatio < 641 ) {
            easy_fancybox_handler = null;
            };

            Thank you for the help!!

            Sari

          1. Pharéo

            Hi Sari, from my side it actually works fine. Remember you have to reload the page if you are testing it by making the browser window 640px (or less) wide… Also note that on a device with a different pixelRatio (newer devices with high density screens) the max width will be calculated differently.

  20. Tim

    Hi, Im getting the error on “jQuery(document).on(‘ready post-load’, easy_fancybox_handler );
    ” in IE it throws an error but in Chrome it suppresses it however the images and SWF are not loading in fancybox, any ideas?

    Thanks

    Reply
    1. RavanH Post author

      Hi Tim, this usually means your theme (or another plugin) is forcing WordPress to use an older (pre 1.8) version of the jQuery library. What is the error exactly? Or can you share a link to the page where this is occurring?

      Reply
    1. RavanH

      Hi Danny, I’ve seen issues with other plugins that compress/minify script files too. The script files in Easy Fancybox are already minified so that might be the problem… Is there an option in Autoptimize to exlude certain script files from being treated? If so, start with excluding jquery.fancybox-1.3.6.pack.css jquery.fancybox-1.3.6.pack.js and maybe jquery.mousewheel.pack.js and jquery.metadata.pack.js too.

      Reply
      1. DaVe McComb

        Has anyone had any luck with getting autoptimize and easy fancybox to work together? I added this to the JavaScript exclude line:

        jquery.fancybox-1.3.6.pack.js,jquery.easing.pack.js,jquery.mousewheel.pack.js

        but it still does not work. When I turn off JavaScript optimization in Autoptimize, easy fancybox works again. Anything I could be missing? (The CSS optimization setting in Autoptimize works fine.)

        Reply
  21. Pingback: Easy FancyBox | WP Plugin Directory

  22. mrcavallo

    hello – this is a great plugin however I am having issues with youtube links.

    i am using nextgen gallery and have followed all the instructions in the FAQ above – but when I add a youtube link into the title of the image it opens up the image and places the youtube video underneath.

    feel like I am close but maybe missing something? I have added the script above the footer – where the google analytics script goes and I have also tried the widget option.

    I would greatly appreciate any suggestions.

    thank you.

    Reply
    1. RavanH

      Hi mrcavallo, I’m not following you. Maybe a link to the web page in question helps me understand :)

      Reply

Leave a Reply