Colorbox - a jQuery lightbox

View Demos

1 2 3 4 5

Released under the MIT License, source on Github (changelog)  

Download

Install via NPM

npm install jquery-colorbox

Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+

• 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.
• Currently in use on a million-plus 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

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

Public Methods

Event Hooks

These event hooks fire at the same time as their corresponding callbacks (i.e. 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);
});