Easy FancyBox: Docs
Home & FAQs
Easy FancyBox is a simple and lightweight lightbox plugin for WordPress. After activation, all links to JPG, GIF and PNG images are automatically opened in a lightbox that floats over the web page.
The plugin uses an updated version of the traditional FancyBox jQuery extension and is WP 3+ Multi-Site compatible.
After activation you can find settings on your Settings > Media screen. Get support on the WordPress forum.
Frequently Asked Questions:
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.
This plugin uses an updated version of the original FancyBox 1.3.4, better adapted to the mobile era.
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.
You will find a new FancyBox section on Settings > Media.
Yes, but only if you used the option Link To: Media File when inserting the gallery!
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.
In the Pro extension, there is an Advanced option called “Gallery Auto-rotation” for that.
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>
Yes, follow the instructions here.
Yes, follow the instructions here.
This largely depends on the (theme or plugin) script that is responsable for this new content. Easy FancyBox is compatible with Jetpack Infinite Scroll but other scripts may need to be adapted.
Read more which hook ‘post-load’ that is available to trigger FancyBox to scan new content here.
Yes. It is designed to work with Network Activate and does not require manual activation on each site in your network.
Please follow the trouble shooting steps to determine the cause. If that fails, ask for support on the Easy FancyBox WordPress forum.
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 image</a>
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.
Yes, follow the instructions here.
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.
Yes. First, enable the iFrame option on Settings > Media. Then, in your post or page content create a link to any web page or .htm(l) file in your content. In the Classic Editor, switch to the Text tab and find the link <a ... >
tag and give it a class="fancybox-iframe"
attribute. In the new Gutenberg editor, see this screencast for an example:
Note: Not all external web pages are allowed to be embedded in an iframe and may be blocked by a server response header or script. The result will be either an empty/blank light box or the target page “breaking out” of the light box and loading in the main browser tab.
Note 2: FancyBox does not include a video player. When showing a video file like mp4 or webp in iframe mode, playback depends on the visitor browser.
Yes.
First, activate the PDF option at Media in the FancyBox section on Settings > Media. Then save and find the new PDF section to tweak settings like window size and Auto-detect.
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.
Note: FancyBox does not include a PDF viewer. When showing a PDF file in iframe mode, display depends on the visitor browser. Some (older or mobile) browsers do not natively support rendering PDF files.
Yes.
First, make sure to choose “Legacy” for the script Version in the FancyBox section on Settings > Media. Then save, and activate the SWF option at Media. Then save again and find the new SWF section to tweak settings like window size and Auto-detect.
Then 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.
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="...">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="..." />
</object>
just add <param name="wmode" value="opaque" />
among the other parameters. Or if you are using an embed like:
< embed src="..." type="application/x-shockwave-flash" width="640" height="385" allowscriptaccess="always" allowfullscreen="true" wmode="window"></embed>
just change that wmode="window"
to wmode="opaque"
or add the attribute if it is missing.
Follow the Inline content instructions.
Yes. There are several methods imaginable but the easiest would be to use the Inline method as described above. Use the contact form shortcode or block as inline content.
Be aware that different contact form plugins use different ways to submit, each with a different effect on the light box:
- an AJAX form submission will not refresh the page and will show feedback information (like submission errors or success message) right inside the light box. The user will then have to manually close the light box again to continue browsing your site.
- a POST request to the page itself which will thus cause the light box to disappear as the page is refreshed. The light box will not open up again automatically, so any success message will not be visible unless the visitor opens the light box again.
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, video, PDF or iframe link! But please remember there can be only one item using the ID fancybox-auto per page…
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="javascript:jQuery.fancybox.close();" class="fancybox-close">Accept</a>
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:
- Media and enable FancyBox iFrame support.
- Go to Appearance > Menus and open the little tab “Screen Options” in the top-right corner.
- Enable the option “CSS Classes” under Advanced menu properties.
- 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.
Yes, see instructions.
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 | Miscellaneous | Advanced on Settings > Media is enabled.
For example, a video with different size:
<a class="fancybox-svg {width:1024,height:675}" href="_your_svg_url_"></a>
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 on user interaction like scroll or click) like Infinite Scroll 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.
Yes, it is possible to either prevent the script files from being loaded completely or to prevent the script from executing (binding itself to media links) on individual pages, posts or other parts of your site.
However, this does involve some manual work. You can read full instructions on Disable FancyBox on certain pages.
Fancybox Documentation
Show Inline Content in Lightbox
Limit Easy FancyBox Auto-Detection
One thumbnail to open a complete gallery slideshow
Slider Revolution 5 and Easy FancyBox
Slider Revolution 6+ and Easy Fancybox
NextGEN Gallery and Easy FancyBox
Disable Easy FancyBox on Certain Pages
[Pro] Trigger FancyBox with a URL Hash