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 media links with class nolightbox or nofancybox, will be excluded from auto-detection. Such a link will not open in a FancyBox overlay.
<a href="url/to/fullimg.jpg" class="nolightbox"><img src="url/to/thumbnail.jpg" /></a>Note: If you give a link both a nolightbox and a dedicated class like fancybox-iframe then that link will open in FancBox in iframe mode. This can be useful to “override” auto-detection and force FancyBox to open in a particular mode.
Read more on Limit Auto-detection.
Yes, you can find instructions here.
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>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, you can find 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.
Yes. You can activate the plugin per site, or network wide.
When activating the plugin per site, each site will have the Images media type activated and Easy FancyBox will immediately try opening image links in the light box.
When activated network wide (with Network Activate), each sub-site will not have any media type activated. The options will be there for individual site admins, ready to either activate or leave deactivated.