Easy FancyBox Docs

Getting Started

Easy FancyBox is a simple and lightweight lightbox for WordPress. It supports a wide range of image formats and media, and allows for the creation of modals / dialogs / popup window with custom content.

Getting Started

Install and activate. Log in to your website, go to the plugins page, search for “lightbox”, install the plugin, and activate it.

Images and galleries will open automatically. Images and galleries added via the block editor will automatically open in the lightbox. Historically, you had to set the image or gallery “Link To” setting to media file, but that is no longer needed. You can turn off autodetect and manually link images by adding the ‘fancybox’ class to any image link.

Opening links to Youtube, Vimeo, Dailymotion, or uploaded videos. For videos hosted on Youtube, Vimeo, or other services, copy the videos’s share url. Add a link to any page or post, and link it to the share url. Either enable autodetect for videos, or manually add a CSS class like ‘fancybox-youtube’ or ‘fancybox-vimeo’ to the link.

Open Example Video

Open links to PDFs. Upload a PDF to your media library or copy a link to an external PDF. Add a link to the file to any page or post. Either enable autodetect for PDFs, or manually add a CSS class like ‘fancybox-pdf’ to the link.

Open Example PDF

Open Google map links (Pro only). Open google maps, search for your location, adjust the map as needed, and copy the url. Then add a link to that map url to any page or post. Enable autodetect for maps, or manually add a CSS class like ‘fancybox-map’ to the link. For demo see Pro plugin page.

See Pro Plugin for Demo

Dialogs / Modals / Popups. Add a container block to hold your modal content. You can use a Group block, Kadence Row block, or similar. Add any content you want. In the block settings ‘Advanced’ tab, give to block a unique HTML anchor (ie, ‘uniqueID’) and the ‘fancybox-hidden’ class. Elsewhere on the same page, add a link to #uniqueID and add the ‘fancybox-inline’ class to to the links. For more detail, see instructions here.

Open Example Modal

Lightbox Settings. To adjust settings for the lightbox, look for “Lightbox” menu item on your website’s main dashboard menu.

Pro Plugin. The pro plugin offers a beautiful, modern, full featured Pro lightbox as well as extra pro features for the basic lightboxes in our free plugin. Pro users also get priority support directly from our developers. See Pro info and demos.

Support. You can get free support on the WordPress forum. Pro users can get faster and more reliable email support, directly from our developers, by sending a request via our contact form.

Frequently Asked Questions:

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>

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, 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.

This is a modal!

Easy Fancybox allows you to add modals easily! Add a group block, give it an html anchor like #uniqueID, add content using the block editor, and add the “fancybox-hidden” class to hide it initially.

Then add a link or button that links to same anchor to open it. Extra tip: The close button below is a normal button block with the “data-fancybox-close” attribute, which makes it close this modal.

Easy FancyBox Docs

Getting Started

Big News!

Getting Started

Images

Video

Modals & Dialogs

Other Content Types

Troubleshooting

Third Party Integrations

Pro Plugin

Getting Started

Frequently Asked Questions:

This is a modal!