WordPress fancyBox Lightbox

plugin banner

View image, YouTube video, Vimeo video, external page, inline HTML in lightbox. Add jQuery fancyBox lightbox effect to your WordPress site.

Author:naa986 (profile at wordpress.org)
WordPress version required:4.7
WordPress version tested:6.5
Plugin version:1.0.3
Added to WordPress repository:14-05-2017
Last updated:02-04-2024
Rating, %:100
Rated by:2
Plugin URI:https://noorsplugin.com/wordpress-fancybox-pl...
Total downloads:10 330
Active installs:900+
plugin download
Click to start download

WP fancybox plugin adds fancybox lightbox effect to your WordPress website. The lightbox looks great on desktop as well as mobile devices.

WP fancybox Features

  • Responsive lightbox popup using fancybox
  • Designed with a mobile first approach so it looks great on desktop, mobile and tablet devices
  • Quick and easy setup
  • Open lightbox popup from either a text link or a thumbnail image link
  • YouTube video popup
  • Vimeo video popup
  • Use a simple shortcode to pop up content in lightbox

How to Use WP fancybox

Image in lightbox

Create a new post/page and use the following shortcode to create a text/image link which will open lightbox once clicked:

[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" hyperlink="click here to pop up image"]

here, url is the link to the media file that you wish to open in lightbox and hyperlink is the anchor text/image.

[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" hyperlink="https://example.com/wp-content/uploads/images/thumb.jpg"]

YouTube video in lightbox

[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="click here to pop up youtube video"]

Vimeo video in lightbox

[wp_fancybox_media url="https://vimeo.com/1084537" hyperlink="click here to pop up vimeo video"]

Caption in lightbox

[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" caption="overlay image" hyperlink="click here to pop up image"]

Alternate Text for an Image

[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" caption="overlay image" hyperlink="https://example.com/wp-content/uploads/images/thumb.jpg" alt="Thumbnail image description"]

Custom CSS

You can specify your own CSS class in the shortcode to customize a text/image link.

[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="click here to pop up youtube video" class="custom_class"]

Multiple CSS classes can be separated with a space. For example:

[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="click here to pop up youtube video" class="custom_class custom_class2"]

For detailed documentation please visit the WordPress fancybox plugin page


Screenshots
FAQ
ChangeLog