WordPress fancyBox plugin enables fancy lightbox functionality on your WordPress site. It allows you to pop up an image, YouTube video, Vimeo video, or 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.
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)
How to Use WordPress fancyBox Plugin
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="https://example.com/wp-content/uploads/image/lightbox.jpg" hyperlink="click here to open image"]
Here is a screenshot of the popup window from a mobile device:
YouTube Video in Lightbox
[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="click here to open youtube video"]
Here is a screenshot of the YouTube video popup from a mobile device:
Vimeo Video in Lightbox
[wp_fancybox_media url="https://vimeo.com/1084537" hyperlink="click here to open vimeo video"]
Here is a screenshot of the Vimeo video popup from a mobile device:
Inline HTML in Lightbox
[wp_fancybox_media url="#inline_content" 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:
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.
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="https://example.com/wp-content/uploads/image/lightbox.jpg" hyperlink="https://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="https://example.com/wp-content/uploads/image/lightbox.jpg" hyperlink="https://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="https://example.com/wp-content/uploads/image/lightbox.jpg" caption="overlay image" hyperlink="click here to open image"]
Really love this plugin! Clean, responsive and lightweight. Much better than Easy fancybox. Keep up the good work.
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.
@Michael, Thank you for the feedback :). I have fixed the typo in the YouTube embed code.
Hi, is there any options to get the youtube video on the lightbox in fullscreen mode?
@Jesus, Do you mean you want to show a fullscreen option in the YouTube player or automatically open the YouTube player in fullscreen mood when it opens in lightbox.
Hi there,
Great plugin, great work.
I would love to know how to show the fullscreen option in the Vimeo player when it opens in lightbox, or to resize for different screens (desktop, tablet and mobile).
@QNS, The popup window is already compatible with desktop, tablet, and mobile devices.
Hi, do you know if I can use this inside Revolution Slider to display a Youtube video in a lightbox by clicking on a button in the slider?
Thank you very much
Carole
Great plugin. A few questions.
1. How do you add a rollover to a thumbnail?
2. I added some JS embed code as html content and the box was cut off. Not sure what kind of html content is supported.
@Gen, It’s not possible to add a rollover effect to a thumbnail at the moment. You will need to customize the plugin code in order to implement this functionality.
Hello, can you explain how to customize your code so that a hover image overlay is possible for thumbnails? Thanks!
@Emma, This is not possible at the moment.
Hy team.
I love you plugin. it’s so great!
I have a problem. When i add an external page in lightbox i want to scroll down and up to view the entire page. Can you help me with this problem? Can you tell me what shortcode to use?
@Cosmin, Please provide a link to the page in question so I can take a look.
Hi there. Great plugin! Is there a way to create a normal link on a page without the shortcode?
@Steve, That depends on what you are trying to open in lightbox.
Is there a configuration to set that would make the lightbox iframe to be initialized when the page loads without having to click a hyperlink?
Great plugin, Thanks!
I am using the inline_content for address maps, ect. There is a thick white border that I would like to remove, any ideas. This is the code I tried: (tried with em as well) Could I at least make bottom same thickness as top and sides?
.inline_content {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
Thanks
@Josh, Please provide a link to the page where you are using the shortcode.
https://www.thevillagespro.com/golf-course/bonifay/Click on this line:
Address: 1033 Pinellas Place
Thanks
@Josh, Thanks. Twenty Seventeen theme seems to be apply a custom margin for the iframe tag. Please add this CSS and see how it goes:
#inline_content iframe{
margin-bottom: auto;
}
So I just noticed on Category/Tag/Achieve type pages the #inline_content with only display the first lightbox. Actually it will display anywhere the code is present but will only display the first instance. Is there a way to number them say #inline_content_1 or identify them somehow so the proper one displays?
@Josh, Each div needs to have a unique ID. You can name whatever you want. #inline_content_1 should work as long as there is no other div on the page with the same ID.
I have links using over an image, how to use this plugin?
Example:
I have links using
{map}over an image, how to use this plugin?Example:
{img src="image.png" usemap="#image_map"}
{map name="image_map"}
{area alt="" title="Link 1" href="https://link1.co" coords="104,39,255,124" shape="rect"}
{area alt="" title="Link 2" href="https://link2.co" coords="283,39,413,124" shape="rect"}
{/map}
@Valessio, Image maps are not supported.