15+ promising jQuery Lightbox-Clones plugins

Lightbox, and the newer Lightbox 2, is a JavaScript application used to display large images using modal dialogs. 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 alt="" /> 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.

The script has gained widespread popularity due to its simple yet elegant style and easy implementation. While it was initially developed from scratch, Lightbox has since been modified to use a number of JavaScript libraries (such as the Prototype Javascript Framework and jQuery for its animations and positioning), to reduce the size of the code. The release of Lightbox encouraged other developers to work on similar projects, resulting in products such as 15+ Promising jQuery Lightbox plugins.

1. FancyBox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
It was built using the jQuery library. Licensed under both MIT and GPL licenses

How to use

1. Make sure you are using valid DOCTYPE, this is required for FancyBox to look and function correctly.
2. Include nessesary JS and CSS files:

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.0.pack.js"></script>
   <!-- Optional - Add transitions as jQuery by default supports only "swing" and "linear" -->
   <script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>
   <!-- Optional - Enable "mouse-wheel" to navigate throught gallery items -->
   <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
   <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.0.css" type="text/css" media="screen">

3. Sample Code:

   $(document).ready(function() {
   $("p#test1 a".fancybox();
   $("p#test2 a".fancybox({ 'hideOnContentClick': true });
   $("p#test3 a".fancybox({
                 'zoomSpeedIn': 0,
                 'zoomSpeedOut': 0,
                 'overlayShow': true
   });
   });
   

2. FancyZoom

This works with any html (images, text, headings, flash). The only caveat is it doesn’t currently work with AJAX. Whatever you want to zoom to must be html already on the page. Below are several examples. Width and height of zoom box are configurable through optional setting or css.
The code below initialized the plugin and add the Zoom Effect to any a tag classed with zoom, and will show content relating to the id referenced in the href of the a tag.

$(document).ready(function() {
$('a.zoom').fancyZoom({scaleImg: true, closeOnClick: true});
});

The sample html code.

<a class="zoom" href="https://www.narga.net/"><img src="path/to/image/sample.gif"></a>

3. prettyPhoto

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.
It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!
This plugin has been tested and is known to work in the following browsers

• Firefox 2.0+
• Safari 3.1.1+
• Opera 9+
• Internet Explorer 6.0+

Include the jQuery library, prettyPhoto javascript and the prettyPhoto CSS in the head of the page(s) where you want to use prettyPhoto.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />

Then, initialize prettyPhoto. Put the following code before the closing tag of your body ()

<script type="text/javascript">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']".prettyPhoto();
	});
</script>

Just add rel=”prettyPhoto” to the link you want prettyPhoto to be enabled on.

4. Slimbox2

Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.
Include the script and CSS in the header of your page, after the inclusion of the jQuery library:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

Add the rel=”lightbox” attribute to the links pointing to your full-sized images. Use the optional title attribute if you want to show a caption:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Slimbox 2 is currently the smallest Lightbox-like script available for the jQuery library.

5. Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4. Allow users to create a customized lightbox that is unique to their project. Tested In: Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.
The colorbox method takes a key/value object and an optional callback.

Format: $('selector').colorbox({key:value, key:value, key:value}, callback);
Example: $('a#login').colorbox({transition:'fade', speed:500});
Example: $('a.gallery').colorbox();
Example: $('button').colorbox({href:"thankyou.html"});

And it can be called directly, without assignment to an element

Example: $.fn.colorbox({href:"thankyou.html"});

ColorBox will accept a function for any of it’s parameters.

<

$("a[rel=’example’]".colorbox({title: function(){
    var url = $(this).attr(‘href’);
    return ‘<a href="’+url+’" target="_blank">Open In New Window</a>’;
}});

6. imgBox

imgBox is a jQuery plugin that implements a smooth zoom effect on images.

What’s So Great About this Plugin?

• Elegant looking, Mac-like effect
• Popup blockers are no problem. The content opens within the active browser window
• Multiple images can be opened at the same time
• Can be customized with settings and CSS
• It’s just 7KB (packed)
• All modern browsers supported, including IE6

First, make sure that there is a XHTML DOCTYPE declaration at the very top of the page then include necessary files.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
<link rel="stylesheet" href="imgbox/imgbox.css" />
<script type="text/javascript">
	$(document).ready(function(){
		$("a.zoom".imgbox();
	});
</script>

Create a link elements. You can set the title using the title attribute:

<a class="zoom" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>

7. Shadowbox

Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
The simplest way to set up Shadowbox is to include the JavaScript and CSS files in the <head> of your document (web page) and then call Shadowbox.init, like this:

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Next you need to tell Shadowbox which links you want it to open. The simplest way to do this is through your HTML markup. If you’re going to take this route, at the very least you must add a rel="shadowbox" attribute to each link. For example, say you have this link to an image on your page:

<a href="myimage.jpg" rel="shadowbox">My Image</a>

8. Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.
Load the dependency files. Make sure the jQuery is loaded first before the facebox plugin.

<script src="jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>

While calling facebox() on any anchor tag will do the trick, it’s easier to give your Faceboxy links a rel=”facebox” and hit them all onLoad.

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox()
})

9. piroBox

piroBox is a versatile gallery plugin, with a choice of three styles (shadow,white or black). You can view your gallery as a slideshow or as single images and when an image is selected will automatically reposition the image in the browser window.
Choose your style (shadow,white or black) and include one of the three .css in your header.

<link href="css_pirobox/shadow/style.css" media="screen" title="shadow" rel="stylesheet" type="text/css" />
<link href="css_pirobox/white/style.css" media="screen" title="white" rel="stylesheet" type="text/css" />
<link href="css_pirobox/black/style.css" media="screen" title="black" rel="stylesheet" type="text/css" />

Include jQuery.js, pirobox.js and pirobox options in your header.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.1_2_min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$().piroBox({
      my_speed: 300, //animation speed
      bg_alpha: 0.5, //background opacity
      radius: 4, //caption rounded corner
      scrollImage : false, // true == image follows the page _|_ false == image remains in the same open position
                           // in some cases of very large images or long description could be useful.
      slideShow : 'true', // true == slideshow on, false == slideshow off
      slideSpeed : 3, //slideshow
      pirobox_next : 'piro_next', // Nav buttons -> piro_next == inside piroBox , piro_next_out == outside piroBox
      pirobox_prev : 'piro_prev', // Nav buttons -> piro_prev == inside piroBox , piro_prev_out == outside piroBox
      close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox
      });
});
</script>

In the Body, Add class=”pirobox_gall” to any link tag to activate pirobox for a set of images

<a href="image_1.jpg" class="pirobox_gall" title="your title"><img src="thumb_1.jpg" /></a>
<a href="image_2.jpg" class="pirobox_gall" title="your title"><img src="thumb_2.jpg" /></a>
<a href="image_3.jpg" class="pirobox_gall" title="your title"><img src="thumb_3.jpg" /></a>

10. Interface Imagebox

This a jQuery equivalent for Lightbox2. Alternative to image popups that will display images in an overlay. All links that have attribute 'rel' starting with 'imagebox' and link to an image will display the image inside the page. Galleries can by build buy giving the value 'imagebox-galname' to attribute 'rel'. Attribute ‘title’ will be used as caption.
Code sample:

$.ImageBox.init(
	{
		loaderSRC: 'images/imagebox/loading.gif',
		closeHTML: ''
	}
);

11. lightBox

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery’s selector.
Include lightBox plugin:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

You don´t need to modify your HTML markup to use jQuery lightBox plugin. Just use the power and flexibility of jQuery´s selector and create a set of related images.

<a href="image1.jpg" rel="lightbox"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

After it, select the links and call the jQuery lightBox plugin. See some examples:

<script type="text/javascript">
$(function() {
	// Use this example, or...
	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// This, or...
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// This, or...
	$('a.lightbox').lightBox(); // Select all links with lightbox class
	// This, or...
	$('a').lightBox(); // Select all links in the page
	// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

12. NyroModal

Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It’s easy to use and easy to design.
Supported Media: Images, Inline HTML, iFrame, AJAX, Video.
nyroModal(); is the basic function to set the click or submit function. To add the nyroModal functionnality to all links containing in #container, you’ll do:

$('#container a').nyroModal();

13. Picbox

Picbox is a lightweight (around 5KB) javascript image viewer based on the excellent Slimbox by Christophe Beyls, and available using either the Mootools or jQuery frameworks. It features automatic resizing and zooming of large images, allowing them to fit in the browser or be viewed at full size.
Insert the following code into your <head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="js/picbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/picbox.css" type="text/css" media="screen" />

For easy migration from Lightbox/Slimbox, by default the script activated for links with rel=”lightbox” e.g.

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Picbox includes an api and customisation options. Refer to picbox.js in the src/ folder for the full list, including descriptions.

14. CeeBox

An overlay popup script for easily embedding flash video, displaying images, or showing html (either external sites via iframe or content on your own site via AJAX). Tested in Safari(4)/Chrome/FireFox(3.5)/Internet Explorer(6–8)/Opera(10). Note: Mobile Safari has an issue with fixed position.
Link all this javascript up with your site and add

$(document).ready(function(){ $(“your selector here“).ceebox();});

to your global .js file

15. ThickBox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Before you can implement ThickBox make sure the page that invokes ThickBox has a valid DTD. This is required for ThickBox to look and function correctly.

ThickBox requires the jQuery JavaScript library; because of this, you will need to include the jquery.js file in the head element of your web page, followed by the thickbox.js file (NOTE: jquery.js must come first in the source order). Example below:

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

Go to ThickBox Homepage to learn the many different ways to use and invoke ThickBox functionality.
While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives above.