Display Images, Videos & HTML Using a LightBox or FancyBox Plugin

Have you ever wanted to display your images in a larger size than will fit in your page or post?

Sometimes images cannot be read properly when they are too small especially when in a gallery.

The solution is to install a fancy box plugin which displays your images in a lightbox style pop up which expands the size of your images, video or HTML to its original size for better viewing.

Some premium WordPress themes like the Canvas theme already offer a built in fancy box or what they call a Lightbox which you can use for any images, videos or HTML.

Go to Canvas > Dynamic Image settings at the bottom of the screen where you can enable the Lightbox

Enable Lightbox

Enable the PrettyPhoto lightbox script on images within your website’s content.

What is Fancy Box?

Fancy Box is built using JQuery code for displaying images, videos and html in a box that floats over the top of your post or page.

Its a great solution if you want to display an images or video which is wider than your page width in a fancy box.

Fancy Box Examples

Displaying a Youtube video in a fancy box.

Fancy Box for Youtube Video

Fancybox for Google Maps

Google Maps in fancy box
Displaying Images in FancyBox

Fancy pop up Box for WordPress Images

FancyBox Plugin for WordPress

There are quite a few fancybox & lightbox style plugins for WordPress. The most popular Fancy Box plugin for WordPress is named FancyBox for WordPress.

Once you install and activate the FancyBox plugin, go to the Settings page and configure the settings. If you don’t want to do this, you can simply use the default settings which should be fine.

FancyBox Plugin Settings

FancyBox Gallery Plugin

If you’re using the WordPress default gallery, you could install the FancyBox Gallery plugin instead if you wish. This WordPress plugin integrates FancyBox into the native WordPress gallery functions.

Once you insert the WordPress gallery shortcode into your editor, make sure the thumbnails are linked to the page URL rather than an attachment page and you’ll see your thumbnails displayed in a nice lightbox pop up.

LightBox Plus Plugin

Another popular plugin is Lightbox Plus.

Lightbox Plus permits users to view larger versions of images without having to leave the current page. Lightbox is able to add a lightbox to WordPress gallery images, display simple slide shows, video, forms and external content in overlays.

Your images will be automatically scaled to fit the screen.

LightBox Examples

LightBox Image

Image LightBox

LightBox Video

Video LightBox for WordPress

Contact Form LightBox

Contact Form LightBox for WordPress

External Content in LightBox

External Content in LightBox

The FancyBox & LightBox plugins do an amazing job of displaying multi media in a beautiful lightbox.

Premium Lightbox plugin

lightbox plugin for WordPress

Tips & Tricks have created a premium lightbox plugin which offers a more powerful & professionally supported plugin for WordPress.

The WP Lightbox Ultimate plugin can be used to display images, mp3, mp4, flash, YouTube, Vimeo Viddler, video in a lightbox popup.

WP Lightbox can also be used with videos hosted on your Amazon S3 account.

Do you use FancyBox or LightBox for your WordPress media?

Related Code Snippets


Comments

One response to “Display Images, Videos & HTML Using a LightBox or FancyBox Plugin”

  1. bunty jorwal Avatar
    bunty jorwal

    This site is very good.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.