How to add Lightbox functionality to WordPress site



What is Lightbox?

Lightbox provides great functionality to the websites. But why should i write on lightbox when we already Wikipedia article about it, here is the important part from that article:

Lightbox is a JavaScript technique used to display large images using modal dialogs. The effect has gained widespread popularity due to its simple yet elegant style and easy implementation.

On a Lightbox-enabled page, a user can click an image to have it magnified in a Lightbox window, which resizes itself according to the size of the image using a gliding animation. Lightbox determines which images will be shown in the modal window through the XHTML “rel” attribute, which is used on an <a> element wrapped around the <img> element. Lightbox also provides a way to attach captions to images and to run a slide show, which can be navigated using the arrow keys.

Lightbox permits users to view larger versions of images without having to leave the current page, and is also able to display simple slideshows. The use of the dark background, which dims the page over which the image has been overlaid, also serves to disable the remainder of the interface.

 

WordPress plugins for Lightbox

There are bunch of lightbox plugins available but none of them seem to work when you really need them. I am saying this for a reason because i have seen it in myself and alot of other people who wanted to have lightbox in their websites and blogs but not one plugin was working for them because there are over hundred plugins and people just install any lightbox plugin out of their frustrations.  I have listed few Lightbox plugins that i have used & loved them over the months and they are the most popular and rated ones in the WordPress plugin directory. You can view them below.

Lightbox Plus

Lightbox Plus permits users to view larger versions of images, simple slide shows, videos and content all in an overlay.

 

Lightbox Plus captures the image title for display in the overlay. Lightbox Plus uses WordPress’s built in jQuery library. Lightbox Plus for WordPress implements ColorBox as a lightbox image overlay tool for WordPress. ColorBox was created by Jack Moore and is licensed under the MIT License.

Visit

 

jQuery Colorbox

Adds Colorbox/Lightbox functionality to images, grouped by post or page. Works for WordPress and NextGEN galleries. Comes with different themes.

jQuery Colorbox features 11 themes from which you can choose. Works out-of-the-box with WordPress Galleries and NextGEN Gallery!

When adding an image to a post or page, usually a thumbnail is inserted and linked to the image in original size. All images in posts and pages can be displayed in a Lightbox/colorbox when the thumbnail is clicked. Images are grouped as galleries when linked in the same post or page. Groups can be displayed in a slideshow within the Lightbox/colorbox. Individual images can be excluded by adding a special CSS class. jQuery Colorbox can also open linked content (external as well as inline) in a Lightbox/Colorbox.

Visit

 

WP jQuery Lightbox

A drop-in replacement for Lightbox 2 and similar plugins, shedding the bulk of Prototype and Scriptaculous. Improved for mobile devices.

This plugin lets you keep the awesome Lightbox 2-functionality, but sheds the bulk of the Prototype Framework and Scriptaculous Effects Library. Warren Krewenki ported Lightbox to jQuery and this plugin is mostly a wrapper to his work: providing localization support, an admin panel for configuration, (optional) auto-boxing of your image links and support for WordPress galleries, including media library titles and captions.

Visit

 

Simple Lightbox

A simple, themeable, and highly customizable Lightbox for WordPress

Simple Lightbox is a very simple and highly customizable lightbox that is easy to add to your WordPress website. It also supports skins, so it can be fully integrated with your site’s theme.

Visit

 

jQuery Lightbox

Used to add the lightbox effect to images on your WordPress blog :) As the name shows, this is just WordPress’s version of the jQuery Lightbox Plugin written by balupton, working perfectly with WordPress 2.2 or up. You will have to manually add the rel=”lightbox” while adding the lightbox in image.

Lightbox Pop

Create simple, non-annoying lightbox, dialog box and quick box popups in your blog.

This plugin allows you to create a lightbox, a dialog box and a quick popup box with custom contents. You can customize the popup display by configuring various settings such as position settings (height, width, top,left), display logic settings (time delay after page load, number of pages to browse, lightbox repeat interval) and style settings(z-index, overlay opacity, color, border etc). You can use the plugin to display any type of contents such as special promotions, subscription forms, social media icons, feedback forms, video presentations and much more.

Visit

 

 

Tutorials on Lightbox without plugins

How to Add Lightbox to WordPress without a Plugin by fearlessflyer.com

Excerpt from the article: This article will walk you through how to add Lightbox into your WordPress themes. I’m also going to assume that you have created WordPress themes before, for you will need to know how to work with template files and such. Ready to get started? Let’s begin.

View Tutorial

 

How To Add A Lightbox To A WordPress Gallery by Richard Gabriel

Excerpt from the article: I put together a little gallery shortcode function using the built-in WordPress gallery shortcode as my starting point. I’m a big fan of PrettyPhoto, so I modified the output of the gallery shortcode to include a rel= attribute for PrettyPhoto galleries.

View Tutorial

 

How to add gallery lightbox without plugin by Andor Nagy

Excerpt from the article: In this tutorial we’ll be learning how to add lightbox to WordPress gallery.

View Tutorial

 

Use jQuery to Add Rel=”Lightbox” to WordPress Galleries by Nathan Swartz

Excerpt from the article: Perhaps at this point WordPress should have some type of support for Lightbox, Thickbox or Shadowbox baked right in – I mean, it’s used natively in the editor, so allowing native WordPress Galleries to automatically take advantage of this seems like it’d be as easy as a setting.

Still, until this is available, here’s a little tutorial on how to get the rel=”lightbox” (or rel=”shadowbox”, class=”thickbox”, whatever your preferred blend.)

View Tutorial

 

Q&A troubleshoot questions

I couldn’t find any thread in forums or question in StackOverflow that discusses the problem of users in general. So if you any Lightbox related question, ask them here.

If you want to contribute to this article in anyway then feel free to let us know.

This Post Has 3 Comments

  1. Masud says:

    This is useful content I was looking for!

  2. wp developer says:

    Great, I was looking for this lightbox tutorial and i would like to install this plugin in my blog .

    Thank you very much.

  3. Jack says:

    How do I add a light box effect to my wordpress.com hosted site?

Leave A Reply