Easy FancyBox

Easy FancyBox

Install now

Download Version 1.8.3

Requires WordPress: 3.3 or higher
Compatible up to: 4.9.6
Downloads: 1995179

Rating: 4.6 out of 5 stars
# Votes: 155

Easy FancyBox plugin for WordPress websites gives you a flexible and aesthetic light box solution for just about all media links on your website. Easy FancyBox uses an updated version of the traditional 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 media light box options.

After activation, all links to JPG, GIF and PNG images are automatically opened in the FancyBox Mac/Gnome-style lightbox that floats over the web page.

FEATURES

Supported media and content types:

  • All common image formats including webp
  • Hosted video on Youtube, Vimeo and Dailmotion
  • PDF files (embed with object tag, in iframe or in external Google Docs Viewer)
  • SWF (Flash) files
  • SVG media images (thanks to Simon Maillard)
  • Inline HTML content (see instructions in the FAQs)
  • External web pages (see instructions in the FAQs)

Also supports:

Additional features:

  • Modal window option (see instructions in the FAQs)
  • Automatic detection of media file links
  • Automatic detection of galleries
  • Popup on page load optional (see instructions in the FAQs)
  • Fade or Elastic popup effects
  • Styling options for light box overlay (color and opacity) and window (border size and color)

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

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.

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

Visit FancyBox for more information and examples.

PRO FEATURES

  • Priority support on dedicated forum
  • Slideshow effect for galleries (autorotation)
  • Spotlight effect for the light box overlay
  • FacetWP, Gravity Forms and TablePress compatibility
  • More styling options: rounded corners, inline content background and text colors
  • More automatic popup options: triggered by URL hash, first link by media type, hide popup after first visit
  • Pass dedicated light box setting per media link via link class (see Metadata instructions in the FAQs)
  • More elastic (easing) popup effects on open and close
  • Show/hide image title on mouse hover
  • Fine-tune media link and gallery autodetection to match your theme source markup to allow galleries per post for example

For these additional features, you need to install the Pro extension alongside this free plugin.

Contribute

If you’re happy with this plugin as it is, please consider writing a quick rating or helping other users out on the support forum.

If you wish to help build this plugin, you’re very welcome to translate Easy FancyBox into your language or contribute bug reports, feature suggestions and/or code on Github.

Known Issues

General

  • Outbound links or Downloads tracking in some of the stats plugins can interfere with FancyBox. Disable such option or exclude links manually with a class (see instructions for SlimStat below)
  • Most plugins and themes that already include a light box script. Continue reading to see if you are using one of the know ones or follow the troubleshooting steps to find out what is conflicting on your site.
  • Any theme that is missing the obligatory <?php wp_footer(); ?> call in the footer.php template.

Plugin conflicts

  • jQuery Updater moves jQuery to version 2+ which is incompatible.
  • All in One SEO Pack and Analytics for WordPress with outbound link tracking enabled. Disable that feature.
  • WP Slimstat with Track Outbound Clicks enabled, will break the light box effect on some browsers. Adding fancybox (or any of the other classes like fancybox-youtube,fancybox-iframe,fancybox-inline depending on which media should be displayed in FancyBox) to the Do Not Track field is reported to solve the issue. Slimstat also might interfere with the YouTube url conversion. When clicking a Youtube link, the movie opens in an overlay as it is supposed to but immediately after that, the complete page gets redirected to the original YouTube page. Adding a class="noslimstat" to the link is reported to work around the issue.
  • Google Analytics for WordPress converts links like href="#anyID" to href="http://yoursite.url/page/#anyID", disabling inline content shown in FancyBox.
  • Both the uBillBoard and Camera slideshow have their own easing script hard-coded which conflicts with the one in Easy FancyBox. The only way around the conflict is to set both the Easing In and Easing Out options on your Settings > Media page to Swing.
  • WordPress Firewall 2 blocks access to image files needed for proper display of the FancyBox overlay in older IE and other non-css3 browsers.
  • WordPress Amazon Associate: A script provided by Amazon and the FancyBox script are incompatible. Disabling Product Preview in the WP – Amazon > Settings page should work around the issue.
  • WP Supersized uses the Animate Enhanced jQuery extension which causes a conflict with the Easing extension used by FancyBox resulting in a 0px sized lightbox frame and/or some kind of positioning issue with auto-centering.

Theme conflicts

  • Older versions of Elegant Themes have FancyBox integrated in a hard-coded way, making them incompatible with Easy FancyBox. In the latest versions of these themes, there is an option to disable the included FancyBox. Use this option to make your theme compatible with Easy FancyBox 🙂
  • The Mystique theme has two options called “Lightbox” and “Optimize website for faster loading” that will break Easy FancyBox. Disable both in Mystique’s options > Advanced.
  • Imbalance and other themes that uses the Photo Galleria jQuery extension: turn of the JSGallery option.
  • Themes like Envisioned, Chameleon and many others have FancyBox baked in. There is no solution other than stripping the theme of all FancyBox related code or better: disable the plugin and use the theme provided version…
  • Themes based on the Thesis framework might see issues in IE 8, for which a hack has been proposed

Other

  • When showing an iframe as inline content in FancyBox — not advised, use fancybox-iframe instead! — the iframe will become blank after opening and closing it. The solution is to link directly to the iframe source and use class="fancybox-iframe" instead.
  • Embedded flash content that has no wmode or wmode ‘window’, is displayed above the overlay and other javascript rendered content like dropdown menus. WordPress does NOT check for missing wmode in oEmbed generated embed code. Since version 1.3.4.5, the missing wmode is added by this plugin for WP (auto-)embeds but not for other user-embedded content. Please make sure you set the wmode parameter to ‘opaque’ (best performance) or ‘transparent’ (only when you need transparency) for your embedded content.

Trouble Shooting

If, after activation, your images do not open in a FancyBox overlay, there are several possible reasons. Some are easily solved, others are more difficult. Follow these basic checks to make sure everything is in place:

Basic checks

  1. Make sure that thumbnail images are linked directly to their larger counterpart, not to a dynamic WordPress page that includes the larger image. This means when you insert an image in your posts or pages, you need to select File URL at the Link option instead of Page URL. You’ll have to manually edit your old posts if you have always inserted images with Page URL before, FancyBox cannot do this for you.
  2. Make sure you have all the needed media and their Auto-detect options activated on your Settings > Media admin page. If you are using images in other formats that JPG, GIF or PNG, you need to add the extensions to the Auto-detect field for Images. Please note: The image file names must actaully end with that extension! This means that if you have an image file that (for example) has no extension (does not end with .jpg or any other) even if is in JPEG compressed format, the FancyBox will not be able to detect is as an image. You will need to manually give those links the class fancybox to trigger FancyBox.

General trouble shooting steps

  1. Switch off all other plugins and switch your sites appearance to the default Twenty Seventeen theme. FancyBox should work now. If so, continue with the next step. If not, re-install the plugin and verify the basic steps above.
  2. Switch back to your original theme and check if FancyBox is still working. If so, continue with the next step. If not, See the Theme Incompatibility checks below.
  3. One by one, switch each plugin that you had running before back ON. Keep checking to see at which point FancyBox starts failing and you will hve found the conflicting plugin.

Theme Incompatibility checks

  1. See known theme conflicts above first, then continue with these following steps.
  2. Make sure your theme is capable of placing the needed javascript and css in the page header and footer. Open any page on your site and view the source code by right-clicking on an empty section and selecting ‘View source…’ (or similar). There you will need to check of there are any references to javascript files like jquery.fancybox.min.js?ver=x.x.x near the closing </body> tag. There should also be a easy-fancybox.min.css?ver=x.x.x in the head section… If it’s not there, your theme is really out of date. Consider switching to a new theme fast!
  3. Make sure that your theme does not load the main jQuery library file more than once. Look for references to javascript files like jquery.js?ver=x.x.x or jquery.min.js in the page source code. If you find more than one, try to find out in which theme template file that second reference is hard-coded and remove that line. Usually in header.php or footer.php
  4. Check if your theme loads another or the same lightbox script. Look for references to Thickbox, Prettyphoto, Lightbox2, Colorbox or FancyBox script files or code. These are very likely to cause the incompatibility and you will either have to remove these by hacking your theme or switch to another theme.

If you still do not get to see your images in FancyBox, ask on the Easy FancyBox WordPress forum or go to the development site

Plugin Incompatibility checks

  1. If you followed the general trouble shooting steps above, you should now be aware of which plugin is conflicting whith Easy FancyBox. See known plugin conflicts above first. If the plugin and its solution are not mentioned there, continue with the following steps.
  2. Make sure that the plugins do not make the main jQuery library file load more than once. Look for references to javascript files like jquery.js?ver=x.x.x or jquery.min.js in the page source code. If you find more than one, try to find out where that comes from.
  3. Check if your theme loads another or the same lightbox script or any other of the needed jQuery extensions like jquery.easing or jquery.mousewheel. Look for references to Thickbox, Prettyphoto, Lightbox2, Colorbox or FancyBox script files or code. These are very likely to cause the incompatibility and you will have to either find a setting in the other plugin to switch OFF the use of the conflicting script (possible in NextGEN for example, see under Advanced below) or choose between the two conflicting plugins.
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.

Frequently Asked Questions

Installation Instructions
WordPress
Quick installation: Install now !
… OR …
Search for “easy fancybox” and install with that slick Plugins > Add New back-end page.
… OR …
Follow these steps:

  1. Download archive.
  2. Upload the zip file via the Plugins > Add New > Upload page … OR … unpack and upload with your favorite FTP client to the /plugins/ folder.
  3. Activate the plugin on the Plug-ins page.

Done! By default, any images that are linked to directly (not to a WordPress page) from within your posts and pages, should now be opening in a FancyBox overlay 🙂
Not happy with the default settings? Check out the new options under Settings > Media.

WordPress MU / WordPress 3+ in Multi Site mode
Same as above but do a Network Activate to activate FancyBox image overlays on each site on your network. No database tables are created or manipulated and no activation hook needs to be run for it to function with default settings.
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?
This plugin uses an updated version of the original FancyBox 1.3.4, better adapted to the mobile era.
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.
Where is the settings page?
There is no new settings page but there are many 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 near the end of the plugin description above 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 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 something like [ gallery link="file" ].
The lightbox does not look good on mobile devices. What can I do about that?
The original FancyBox 1.3.4 script was not developed with mobile devices in mind and although the version used in this plugin has some adaptations for mobile devices, it might still be less optimal for very small screens. The only way around this issue is currently to disable FancyBox for small screen sizes on Settings > Media in the section Miscellaneous > Browser & device compatibility.
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 nolightbox that would normally get auto-enabled, will be excluded from opening in a FancyBox overlay.

<a href="url/to/fullimg.jpg" class="nolightbox"><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 light box scripts but if you prefer to use Easy FancyBox (because of better customizability and other media support) 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 in the Images section;
  2. Go to Gallery > Other Options and set the Lightbox Effects option to “Custom” and click on Show Advanced Settings;
  3. fill the Code field with
    class=”fancybox” rel=”%GALLERY_NAME%”
  4. 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 [ gallery link="file" ]. 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 thumbnail.
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 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="https://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.
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 Custom HTML 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…
    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);
    });

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:

https://img.youtube.com/vi/UNIQUE-MOVIE-ID/default.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/mqdefault.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/hqdefault.jpg

Other locations might be

https://img.youtube.com/vi/UNIQUE-MOVIE-ID/0.jpg (same as hqdefault.jpg)
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/1.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/2.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/3.jpg
https://img.youtube.com/vi_webp/UNIQUE-MOVIE-ID/0.webp (same as hqdefault.webp)
etc...

But an easier method is this one, shared by Shashank Shekhar (thanks!) :
To create Youtube thumbnail galleries, install https://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. First, enable the iFrame option on Settings > Media. Then, in your post or page content create 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 don’t 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 don’t 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 content 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.
The Pro extension provides an extra option to allow you to manually override this by defining the width and height wrapped in curly braces in the class attribute of the link itself. Make sure the option “Include 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>
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;max-width:100%;">
...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 content 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. First go to your Settings > Media admin page and enable the Inline Content option. Next, go back to edit your post or page in the Text editor tab. 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-inline">Contact Us</a>

<div style="display:none" class="fancybox-hidden">
    <div id="contact_form_pop" class="hentry" style="width:460px;max-width:100%;">
        [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 have a modal window ?
Yes, just create a hidden inline content light box (can be auto-popup) as described above and give the link an extra class “modal”. This will remove all options to close the light box, like the close button, an overlay click or escape key.
This means there is NO option to close the light box, unless you create a link like this inside the hidden inline content div:

<a href="" class="fancybox-close">Accept</a>
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 properties.
  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" attribute.

How can I make AJAX loaded content be seen by FancyBox ?
Easy FancyBox initially scans the page source for media links on the “Document Loaded” event. This means right after the page source has become available to and read by the browser. When content is added or modified through AJAX (meaning after initial page load) by your theme or another plugin, then FancyBox will not be aware of any media links in that new content.
To make Easy FancyBox rescan the updated page source after content has been modified though AJAX, there is an event listener available. This event is also triggered by the Jetpack Infinite Scroll module. To use this event, you’ll need to modify the theme or other plugin script that handles the AJAX calls.
You can trigger the event like this:

jQuery(document.body).trigger('post-load');

Note: It completely depends on the AJAX script where this code snippet should be placed. Optimally, right after the DOM modification where content is added or modified. In most cases at the end of the AJAX Success handler.

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.

Download

Latest version: Download Easy FancyBox 1.8.3 [zip]
Downloaded 1995179 times.

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

1,145 thoughts on “Easy FancyBox

  1. Hanasazi

    Hi there, I’ve always loved Easy Fancybox, but I just installed it on a website that it didn’t work well on. It put a partial link at the top of the images in the WooCommerce shop on the site, and now they won’t go away, even when I remove the plugin entirely! I just reinstalled it to see if fiddling with the settings might help, but they appear to be “stuck” there. It looks like they’re a remnant of the links (with attribution) I put in the captions of a wordpress gallery included in a new post in the blog, which lead to products in the shop. I really need them to disappear.

    The site is http://lindaabblettwatercolors.com
    The partial link I’m seeing is this: See New Pricing” data-rel=”prettyPhoto”>
    It shows up at the top left of the paintings in the shop, but only the paintings included in this new post which have links in the captions to their product posts in the shop, all the others look clean: http://lindaabblettwatercolors.com/2016/06/06/prices-reduced-original-watercolors/

    The one thing that drives me crazy about WordPress is that the images don’t open in a fancybox by default. The theme I’m using on this site includes the code for their galleries, but not for wordpress galleries or single images, which is why I installed it in the first place. I thought the only problem with this arrangement was that the theme galleries open two fancybox images of the same image when it’s clicked, but then I discovered this other issue which my client won’t be happy about at all. Can you please help me? Thank you so much!

    Reply
  2. Hanasazi

    Quick followup on my request for support. I just checked again on the product pages, and the product image on every page where I see this exposed link code does not open in a fancybox, but those that were not linked from the blog post I mentioned all do open in Fancybox without any trouble. Thanks so much for any assistance you can provide!

    Reply
    1. RavanH Post author

      That’s prettyPhoto light box that came with Woocommerce. Best not to use more than one light box script on a site… To make prettyPhoto work with other image links than only on the product pages, try giving a link a data-rel=”prettyPhoto” and class=”zoom” attributes.

      Reply
  3. Hanasazi

    I see, I had spaced on the fact that WooCommerce also has this feature. I’ve submitted a ticket with them and hope they can help me work it out. Thanks for the information, Ravan! It really helped me know where to turn for further assistance. Have a lovely day.

    Reply
  4. Lawless

    Easy FancyBox 1.5.8 – Fatal error after updating the plugin

    Can not be activated, both in the individual Web and in the Multisite Web

    Warning: require_once(/srv/www/[domain]/wp-content/plugins/easy-fancybox/class-easyfancybox-options.php): failed to open stream: No such file or directory in /srv/www/[domain]/wp-content/plugins/easy-fancybox/inc/class-easyfancybox.php on line 424 Fatal error: require_once(): Failed opening required ‘/srv/www/[domain]/wp-content/plugins/easy-fancybox/class-easyfancybox-options.php’ (include_path=’./:/usr/share/php5/5.2.17/PEAR’) in /srv/www/[domain]/wp-content/plugins/easy-fancybox/inc/class-easyfancybox.php on line 424

    Reply
    1. Pharéo

      Update: the new release 1.5.8.1 should work around the issue no matter what your server OS or PHP version… Could you try to update and let me know?

      Reply
  5. Suzanne

    Is there a way to display something like “image 1 of 3” in the lightbox when using a group of images with the rel attribute? I’m afraid people won’t know there’s multiple images. Or is there a way to display the left and right arrows without hover so it indicates right away that there are more images.

    Reply
    1. Pharéo

      Hi Suzanne, this is not possible without modifying the plugin or light box script. The advanced extension is planned to feature this option but it’s not ready yet. Sorry.

      Reply
  6. bakkegaard

    Thanks for the plug in, really love it. Unfortunately after updating to WordPress 4.7, with Easy FancyBox 1.5.8.2 the title no longer shows in Fancybox. Any suggestions?

    Reply
    1. RavanH Post author

      Hi Dario, there are some serious script (jQuery) errors going on on that second site. You might want to start debugging by turning off autoptimize….

      Reply
  7. Dario Petkovic

    Wow, thanks very much – this is exactly what solved it for anyone else out there.

    From Autoptimize plug-in settings I unticked ‘Optimise JavaScript Code?’ and YouTube videos are now playing as expected!

    ps. Reason I used Autoptimize was to get rid of the Google Speed Test warning that is now back since making this change, the warning being for Mobile:
    Should Fix:
    Eliminate render-blocking JavaScript and CSS in above-the-fold content.

    I’ll leave it this way though, thanks very much once again!

    Reply
    1. RavanH Post author

      Hi Dario, the plugin places indeed a little script in the head section but it’s not “render blocking” in the sense that Google Pagespeed test supposes. It is only loaded there and does not do anything until triggered after page load. The code needs to be ready because in rare cases it needs to be triggered earlier but even then, it does not actually add any significant above-the-fold render time. Sadly, Google Pagespeed test does not know this and simply adds the (rather common) “eliminate render-blocking” should-fix warning.

      That said, there is new version planned that will add an option to move the code snippet to the footer to get rid of the Pagespeed test warning. While some may need to keep it in the header, for most cases the footer should be fine too.

      Reply
  8. Cedric

    Hello I can you help me with this one. I’ve successfully implemented the contact form on my website with easy fancy box, but the problem is that the message that will say that the contact form has successfully submitted is not showing. Only a red line. Also when you have a blank input and just pressed submit, nothing happens, even the error message of contact form 7 does not show. Can you help me with this? I want to know if this is a css problem or contact form 7 problem.
    This is the test website http://edeskaloans.com/edeskatest/production-knives/

    Reply
    1. RavanH Post author

      Hi Cedric,

      First, test the form without FancyBox. Move the CF7 shortcode outside the hidden div to make it visible on the page and do some test submissions. Does it show any response messages then? If not, then it’s an issue with CF7.

      Reply
  9. Hutch Moore

    On the website I’m working on, when a picture is clicked, it brings it up twice: once in a white border, and once without. Do you know why that would be happening?

    Reply
    1. RavanH Post author

      That normally happens when there is another light box running on the site. Either in your theme or another plugin… Best delete Easy FancyBox an d find a way to make the other light box work for you.

      Reply
    1. RavanH Post author

      Hi iamartbc, a form is inline content. You can find how to embed inline content following the example in the FAQs 🙂

      Reply
        1. RavanH Post author

          In this page (scroll to above the comments) under the heading “Frequently Asked Questions” then “Advanced” there are two questions that have example code that you can paste in your WordPress page editor Text tab. The most important one for you is “Can I display a contact form in FancyBox?” Click the link to open the explanation, copy the example to your site and replace the contact form shortcode with the one you are using.

          Reply
  10. iamartbc

    Hi again RavanH,

    Got 1 more simple question for you, I have a shortcode ( [formidable id=5] ) as menu it works fine pointing to that, but me and my creations minds, lol….

    it’s there a way that when click on that menu it shows the form on the fancybox?

    sorry to bother, still LOVE your work

    Reply
    1. RavanH Post author

      Hi iamartbc, sorry I do not think I understand your question. Do you wish to open the contact from from a menu item? Then just give that menu item a class “fancybox-inline” (there are advaced menu options on the menu edit page) … If you mean something else, can you share a link to an example page maybe?

      Reply
      1. ariasig

        Heyyyy RavanH, thanks for so fast answer: Look

        I use formidable forms, witch has shortcode for each form you create; Now someone (client) it’s asking me if there’s a way that Form is’t on the top menu.

        so I did: http://bestteam.com.do/ (last menu has two forms), but he want’s that form opens with fancybox, thing is I did try to add the class to the menu with just the shortcode and what does is that straight up opens the form and without the fancybox.
        ScreenShot: https://snag.gy/p4QjCx.jpg

        So I believe that the question should be:

        “I have a Shortcode of a form, that I want to add it as a Top Menu Option, that when it’s clicked It opens the form in FancyBox.”

        Note: I use “shortcode in Menu” plugin to add the shortcode to menu. should i change this ?

        Reply
          1. ariasig

            Thanks RavanH, One more thing, do I get more stuff and personal attention with Pro version, cuz I’m thinking of buying it today.

          2. Pharéo

            With the advanced version you get the extra options and access to the pro support forum 🙂

    1. RavanH Post author

      Hi, full mobile/touch support should be there in the next release when the FancyBox 3 script will be integrated into the WordPress plugin.

      Reply
    1. Pharéo

      Hi Ketan, the image title or description are not available to FancyBox. Only the image ALT text. You can put all you wish to show in the light box there…

      Reply
  11. clintburkinshaw

    Hello,

    After the recent update, the plugin has errored, blocking any back end dashboard access on wordpress. I had to manually disable it within cPanel on my hosting company.

    The error message is:
    Parse error: syntax error, unexpected ‘[‘ in /html-directory-location/wp-content/plugins/easy-fancybox/inc/class-easyfancybox-admin.php on line 21

    Kind regards,
    Clint

    Reply
    1. RavanH Post author

      You need PHP version 5.4 or above. Can you upgrade your server PHP? Preferably to PHP 7.0 or higher as recommended by WordPress…

      Reply
    1. RavanH Post author

      You need PHP version 5.4 or above. Can you upgrade your server PHP? Preferably to PHP 7.0 or higher as recommended by WordPress…

      Reply
  12. lyubaffka

    Please help

    The plugin was not activated, because it caused a fatal error.
    Parse error: syntax error, unexpected ‘[‘ in /home/sands00/s-and-s.com.ua/www/wp-content/plugins/easy-fancybox/inc/class-easyfancybox-admin.php on line 21

    Reply
    1. RavanH Post author

      You need PHP version 5.4 or above. Can you upgrade your server PHP? Preferably to PHP 7.0 or higher as recommended by WordPress…

      Reply
    1. RavanH Post author

      You need PHP version 5.4 or above. Can you upgrade your server PHP? Preferably to PHP 7.0 or higher as recommended by WordPress…

      Reply
  13. Darknote

    hi,
    To see the images in full size, I put images of 1024 pixels wide.
    I would like to give the choice to the visitors, that they can click to see the image in size Reelle, thank you

    Reply
  14. Craig

    Hello,

    I used something like this to open a image in light box. It was working fine until the last update.


    Click here

    Please let me know how to make it work again.

    Reply
    1. Pharéo

      Hi Craig, you may be suffering from a theme incompatibility that did not occur with the previous version. Can you share a link to your site?

      Reply

Leave a Reply to RavanH Cancel reply