WordPress fancyBox Plugin

Last updated on by admin

WP fancyBox plugin enables fancy lightbox functionality on your WordPress site. It allows you to pop up image, YouTube video, Vimeo video, external page, inline HTML content beautifully.

fancyBox is a jQuery lightbox script developed for opening content in a Mac-style lightbox. This plugin makes fancyBox lightbox script available for WordPress.

fancyBox Plugin Summary

Plugin Name: WordPress fancyBox Lightbox
Icon of WordPress fancyBox Lightbox
Description: A free WordPress plugin for viewing image, video (YouTube, Vimeo), page, inline HTML, custom content in fancyBox lightbox. Add jQuery fancyBox lightbox effect to your WordPress site.
Rating: 5.0 based on 1 review
Price: 0 USD
Availability: instock

WordPress fancyBox Plugin Installation

  • Login to your WordPress admin dashboard
  • Go to Plugins->Add New
  • Enter WP fancyBox in the search box
  • Once you find the plugin hit the install button

Option 2

  • Download the zip version of the plugin
  • Go to Plugins->Add New and switch to the Upload tab
  • Select the zip file on your computer
  • Upload and install it

Option 3

  • Download the zip file and extract it
  • Connect to your website via FTP (you can use a software like Filezilla to transfer files to your server) and browse to the “/wp-content/plugins” folder
  • Select the folder containing the plugin files on your computer and upload it
  • Once all the files have been uploaded to your web server you can activate the plugin from the Plugins menu (WordPress admin dashboard)

WordPress fancyBox Plugin Usage

You can pop up your media file from either a text or image link (it’s called hyperlink in the shortcode) by using a shortcode.

Photo/Image in Lightbox

[wp_fancybox_media url="http://example.com/wp-content/uploads/image/lightbox.jpg" type="image" hyperlink="click here to open image"]

Here is a screenshot of the popup window from a mobile device:

screenshot of photo/image in lightbox using the WordPress fancyBox plugin

YouTube Video in Lightbox

[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g&autoplay=0" type="youtube" width="640" height="360" hyperlink="click here to open youtube video"]

Autoplay is enabled by default on all YouTube videos. That’s why you need to add “autoplay=0” to the URL. Here is a screenshot of the YouTube video popup from a mobile device:

screenshot of YouTube video in lightbox using the WordPress fancyBox plugin

Vimeo Video in Lightbox

[wp_fancybox_media url="https://vimeo.com/1084537" type="vimeo" width="640" height="360" hyperlink="click here to open vimeo video"]

Here is a screenshot of the Vimeo video popup from a mobile device:

screenshot of vimeo video in lightbox using the WordPress fancyBox plugin

External Page in Lightbox

[wp_fancybox_media url="http://wikipedia.com" type="iframe" hyperlink="click here to open external page"]

Here is a screenshot of the External page popup from a mobile device:

screenshot of external page in lightbox using the WordPress fancyBox plugin

Inline HTML in Lightbox

[wp_fancybox_media url="#inline_content" type="inline" hyperlink="click here to open inline HTML"]

After entering the shortcode switch to the “Text” editor, create a div (The ID needs to match one specified in the url parameter) and enter your custom HTML content that you want to pop up in lightbox. For example:

screenshot of inline html popup code using the WordPress fancyBox plugin

Save the page and view it in a new tab. When you click on the text link your inline HTML content will pop up in lightbox.

screenshot of inline HTML in lightbox using the WordPress fancyBox plugin

Using Thumbnail as Hyperlink

In order to open lightbox from a thumbnail image you need to specify your thumbnail image URL in the hyperlink parameter. For example:

[wp_fancybox_media url="http://example.com/wp-content/uploads/image/lightbox.jpg" type="image" hyperlink="http://example.com/wp-content/uploads/image/thumbnail.jpg"]

Alternate Text for an Image

If you have a thumbnail image as the hyperlink, you might also want to specify an alternate text for it. This can be done using the “alt” parameter in the shortcode (This is very useful for SEO). For example:

[wp_fancybox_media url="http://example.com/wp-content/uploads/image/lightbox.jpg" title="overlay image" type="image" hyperlink="http://example.com/wp-content/uploads/image/thumbnail.jpg" alt="thumbnail image description"]

Showing Caption in Lightbox

In order to show a caption for your media file you need to use the caption parameter in the shortcode. For example:

[wp_fancybox_media url="http://example.com/wp-content/uploads/image/lightbox.jpg" caption="overlay image" type="text" hyperlink="click here to open image"]

If you like WP fancyBox please leave it a rating. A huge thanks in advance!
Users who like fancyBox also like Lightbox Ultimate plugin.

Top WordPress Hosting for Speed, Performance & Security

6x faster A2 hosting for WordPressSiteGround WordPress hosting

3 thoughts on “WordPress fancyBox Plugin”

  1. Really love this plugin! Clean, responsive and lightweight. Much better than Easy fancybox. Keep up the good work.

  2. Works perfectly; an absolute relief to find a simple, lightweight lightbox—many of the others either are not responsive or are densely counter-intuitive. Thanks so much for this.

    One small note: You misspelled “width” on the YouTube embed code.

Leave a Reply

Your email address will not be published. Required fields are marked *