Colorbox - a jQuery lightbox
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 and currently in use in over 600,000 websites.
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>';
}});
