A lightweight customizable lightbox plugin for jQuery 1.3+

View Demos

1 2 3 4 5

Download

Current version: 1.3.19 ( Released under the MIT License | Github | Changelog ) 
Tested in: Firefox, Safari, Chrome, Internet Explorer 6, 7, 8, 9, Opera 11.

Features

• Supports photos, grouping, slideshow, ajax, inline, and iframed content.
• Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
• Appearance is controlled through CSS so it can be restyled.
• Can be extended with callbacks & event-hooks without altering the source files.
• Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
• Preloads upcoming images in a photo group.
• Well vetted (ColorBox is one of the top 10 jQuery plugins, currently used on tens of thousands of websites).

Instructions & Help

The FAQ has instructions on asking for help, solutions to common problems, and how-to examples.

First-time jQuery users can check out the ColorBox Beginner's Guide. 
Intermediate users can probably glean everything needed by view-source'ing the demo pages.

Usage

ColorBox accepts settings from an object of key/value pairs, and can be assigned to any HTML element.

// Format:
$(selector).colorbox({key:value, key:value, key:value});

// Examples:
// Image links displayed as a group
$('a.gallery').colorbox({rel:'gal'});
 
// Ajax
$('a#login').colorbox();
 
// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});
 
// Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"});
 
// ColorBox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
    var url = $(this).attr('href');
    return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});

Settings

$("h1").colorbox({href:"welcome.html"});

$("a.gallery").colorbox({rel:"group1"});

// Using a selector:
$("#inline").colorbox({inline:true, href:"#myForm"});
 
// Using a jQuery object:
var $form = $("#myForm");
$("#inline").colorbox({inline:true, href:$form});

$.colorbox({html:"<p>Hello</p>"});

Public Methods

$.colorbox({href:"login.php"});

var $element = $.colorbox.element();

Event Hooks

These event hooks fire at the same time as their corresponding callbacks (ie. cbox_complete & onComplete), but can be used to make a universal change to ColorBox, while callbacks are only applied to selected elements.

// Example of using an event listener and public method to build a primitive slideshow:
$(document).bind('cbox_complete', function(){
    setTimeout($.colorbox.next, 1500);
});