Easy FancyBox FAQ’s

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 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-detected, will be excluded from opening in a FancyBox overlay.

<a href="url/to/fullimg.jpg" class="nolightbox"><img src="url/to/thumbnail.jpg" /></a>

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

Yes, follow the steps described here.

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>

Append &fs=1 to your YouTube share URL.

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.

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

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. Then switch to the Text tab in the Classic Editor or to Edit as HTML (under More options in the block menu) in Gutenberg, find the link <a ... > tag and give it a class="fancybox-iframe" attribute.

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.

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.

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.

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.

Yes, 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:

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

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.

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 Flash movie with different size:

<a class="fancybox-swf {width:1024,height:675}" href="link-to-your-swf"></a>