Hosting Tutorial & Guide

How to Add FancyBox Lightbox to WordPress Images and Videos

updated on Apr 20, 2017
How to Add FancyBox Lightbox to WordPress Images and Videos FancyBox is a jQuery lightbox script that helps you display images, videos and HTML content with a Mac-style lightbox. There are several reasons why many people apply it.
  • It is highly customizable with CSS.
  • It is mobile friendly, offering smaller file sizes to mobile users, which improves the content delivery speed as well as saves the bandwidth.
  • It supports various content, including images, YouTube videos, Vimeo videos, Instagram photos, Google Maps, inline content, and Iframed page.
It is easy to set up FancyBox because you only need to download two files from this page and then upload them to your website. However, the customization becomes hard for beginners because you have to know CSS in order to customize the border, change the title position or apply different animations.

Therefore, if you want to try FancyBox without much CSS knowledge, we would suggest you use a plugin which enables you to make customizations with clicks only. In this post, we will introduce a plugin which works out-of-the-box.

About Easy FancyBox

Easy FancyBox is a popular plugin that adds the FancyBox lightbox to WordPress sites. It is multisite compatible, and it is quite easy-to-use especially for beginners. Besides, the plugin supports multiple media types including images, inline content, iFrames, videos, and PDFs.

Add FancyBox Lightbox to WordPress with Easy FancyBox

Add FancyBox Lightbox to WordPress with Easy FancyBox

With the successful plugin installation and activation, Easy FancyBox starts working with the default settings. To guarantee that the plugin can work properly, you have to make sure that the images used in your posts/pages are already linked to the full-size counterpart. This can be checked by opening any post or page with images and editing the first image. The option for "Link To" should be "Media File".

Link To Media File

If there is no problem with the image settings, you can access the post or page on your website and check the FancyBox lightbox. Click on any image, and you should get a lightbox overlay that floats over the page. A click on the close button or any place that is not occupied by the image, the lightbox will be closed.

FancyBox Lightbox

If you only want a simple lightbox effect for your images and image galleries, you can end here and rest assured that the plugin is able to work correctly. However, you must know that Easy FancyBox provides many customization options that you may want to use to make the lightbox more appealing.

Customize the FancyBox Lightbox

Easy FancyBox allows you to customize the applicable media types, overlay appearance, overlay behaviors, etc. You can find all the available options by going to Settings > Media. There is a dedicated part for FancyBox settings.

Select media types and configure them

By default, Easy FancyBox only enables FancyBox for images. However, depending on the content types on your WordPress site, you can also enable lightbox for other media files. There is a list of all the media types supported by the plugin, and you can make a choice by ticking the checkboxes.

Select Media Types

After saving the changes, you will see extra settings for the media types you have selected when scrolling down to the bottom of the page. For most of the options, you don't need to touch them because they work fine for most sites. Of course, you can still change the width, height and border as you like.

Configure Media Settings

However, there is one important thing to note. To make sure that FancyBox works automatically and properly for the media types you select, you have to turn on "Autodetect" for each them. Auto-detection, however, would make the page loads heavier, which means it affects the speed of your website to some extent. If you want to minimize the effect on site performance, you can also unselect "Autodetect" and then add an additional class to your media files each time you embed them into your posts or pages.

For example, if you embed a YouTube video to a post with auto-detection turned off, you need to add "class=fancybox-youtube" after the video link to enable FancyBox manually. For other media types, just replace "youtube" with some others like "vimeo", "pdf" and "dailymotion".

For the sake of website performance, we suggest you only enable FancyBox for the media types that you really use, especially in the case that you prefer auto-detection instead of manual works.

Customize the window appearance and behavior

Easy FancyBox allows you to fully customize the lightbox window, so that you can change the appearance, dimensions, and the lightbox behavior. The available options include:
  • Appearance: Show/hide the close button, and change the colors of the title, border, text and background.
  • Dimensions: Set the default dimensions of the lightbox which will be used when the content size cannot be tested automatically, and change the border and margin.
  • Behavior: Enable/disable the lightbox floating and the auto-scale of large content.
You can leave some of the options untouched, but if you want to customize the colors and dimensions, make sure to test them until achieving the best results.

Configure Window Settings

Customize the image settings

As the plugin provides many additional options for customizing the image display in lightbox, you can have a look at those options and make some changes. The things you can do include:
  • Changing the transition/easing effects.
  • Choosing to show/hide title.
  • Turning on auto-gallery for WordPress galleries.
For the other options, make sure to read them carefully. It shouldn't be hard to configure them since Easy FancyBox provides detailed explanations for those pieces of complex information.

Configure Image Settings

Final Thought

Installing Easy FancyBox is the easiest way to apply and customize FancyBox lightbox. If you are on the way to make your images, videos and PDF files better to view, you can try this plugin.