Plugin / Easy FancyBox
RavanH
Frequently Asked Questions (FAQ)
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.
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 …
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
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-enabled, will be excluded from opening in a FancyBox overlay.
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.
Go to your Settings > Media admin page and switch OFF the FancyBox “Auto-gallery” option in the Images section;
Go to Gallery > Other Options and set the Lightbox Effects option to “Custom” and click on Show Advanced Settings;
fill the Code field with
class=”fancybox” rel=”%GALLERY_NAME%”
Leave the other fields empty and save your settings.
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:
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:
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:
Number of images per page: 1
Use imagebrowser effect: No
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;
}
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:
text or thumbnail
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:
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.
Then give the image that you want to link to a Youtube movie the URL to the Youtube page as title.
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.
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 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.
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:
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:
just add among the other parameters. Or if you are using an embed like:
just change that wmode="window" to wmode="opaque" or add the attribute if it is missing.
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
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
Read my inline content
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.
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:
Contact Us
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.
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…
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:
Accept
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:
Go to Settings > 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.
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.
Yes. Designed to work with Network Activate and does not require manual activation on each site in your network.
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:
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 Media File 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.
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 image to trigger FancyBox.
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.
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.
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.
See known theme conflicts above first, then continue with these following steps.
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
