2/25/12 ColorBo, A jQuer Lightbo

1/6 jacklmoore.com/colorbo/
Jack Moore Twitter Github
About Archive RSS
ColorBo
A lightweight customizable lightbox plugin for jQuery 1.3+
Fork me on GitHub
Vie Demos
1 2 3 4 5
Donload
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.
// Forma:
$(selector).colorbox({key:value, key:value, key:value);
2/25/12 ColorBo, A jQuer Lightbo
2/6 jacklmoore.com/colorbo/
// Eample:
// Image link diplaed a a gop
$('a.gallery').colorbox({rel:'gal');

// Aja
$('a#login').colorbox();

// Called diecl, iho aignmen o an elemen:
$.colorbox({href:"thankyou.html");

// Called diecl ih HTML
$.colorbox({html:"<h1>Welcome</h1>");

// ColoBo can accep a fncion in place of a aic ale:
$("a.gallery").colorbox({rel: 'gal', title: fncion(){
a url = $(hi).attr('href');
en '<a href="' + url + '" target="_blank">Open In New Window</a>';
);
Settings
Propert Default Description
aniion "elaic" The aniion pe. Can be e o "elaic", "fade", o "none".
peed 350 Se he peed of he fade and elaic aniion, in milliecond.
hef fale
Thi can be ed a an alenaie ancho URL o o aociae a URL fo non-
ancho elemen ch a image o fom bon.
$("h1").colorbox({href:"welcome.html");
ile fale Thi can be ed a an ancho ile alenaie fo ColoBo.
el fale
Thi can be ed a an ancho el alenaie fo ColoBo. Thi allo he e o
gop an combinaion of elemen ogehe fo a galle, o o oeide an eiing
el o elemen ae no goped ogehe.
$("a.gallery").colorbox({rel:"group1");
Noe: The ale can alo be e o 'nofollo' o diable goping.
calePhoo e
If e, and if maWidh, maHeigh, inneWidh, inneHeigh, idh, o heigh hae
been defined, ColoBo ill cale phoo o fi ihin he hoe ale.
colling e
If fale, ColoBo ill hide collba fo oefloing conen. Thi cold be ed
on conjncion ih he eie mehod (ee belo) fo a moohe aniion if o
ae appending conen o an alead open inance of ColoBo.
opaci 0.85 The oela opaci leel. Range: 0 o 1.
open fale If e, ColoBo ill immediael open.
If e, foc ill be ened hen ColoBo ei o he elemen i a lanched
2/25/12 ColorBo, A jQuer Lightbo
3/6 jacklmoore.com/colorbo/
returnFocus true from.
fastIframe true
If false, the loading graphic removal and onComplete event will be delayed until
iframe's content has completely loaded.
preloading true
Allows for preloading of 'Next' and 'Previous' content in a group, after the current
content has finished loading. Set to false to disable.
overlayClose true If false, disables closing ColorBox by clicking on the background overlay.
escKey true If false, will disable closing colorbox on 'esc' key press.
arrowKey true
If false, will disable the left and right arrow keys from navigating between the items
in a group.
loop true
If false, will disable the ability to loop back to the beginning of the group when on
the last element.
current
"image
{current
of {total"
Text or HTML for the group counter while viewing a group. {current and {total
are detected and replaced with actual numbers while ColorBox runs.
previous "previous" Text or HTML for the previous button while viewing a group.
next "next" Text or HTML for the next button while viewing a group.
close "close" Text or HTML for the close button. The 'esc' key will also close ColorBox.
data false
For submitting GET or POST values through an ajax request. The data property
will act exactly like jQuery's .load() data argument, as ColorBox uses .load() for
ajax handling.
Content Tpe
iframe false If true, specifies that content should be displayed in an iFrame.
inline false
If true, content from the current document can be displayed by passing the href
property a jQuery selector, or jQuery object.
// Using a selector:
$("#inline").colorbox({inline:re, href:"#myForm");

// Using a jQuer object:
ar $form = $("#myForm");
$("#inline").colorbox({inline:re, href:$form);
html false
For displaying a string of HTML or text.
$.colorbox({html:"<p>Hello</p>");
photo false
If true, this setting forces ColorBox to display a link as a photo. Use this when
automatic photo detection fails (such as using a url like 'photo.php' instead of
'photo.jpg')
ajax
This property isn't actually used as ColorBox assumes all hrefs should be treated as
2/25/12 ColorBo, A jQuer Lightbo
4/6 jacklmoore.com/colorbo/
eihe aja o phoo, nle one of he ohe conen pe ee pecified.
Dimensions
idh fale
Se a fied oal idh. Thi inclde bode and bon. Eample: "100%",
"500p", o 500
heigh fale
Se a fied oal heigh. Thi inclde bode and bon. Eample: "100%",
"500p", o 500
inneWidh fale
Thi i an alenaie o 'idh' ed o e a fied inne idh. Thi eclde
bode and bon. Eample: "50%", "500p", o 500
inneHeigh fale
Thi i an alenaie o 'heigh' ed o e a fied inne heigh. Thi eclde
bode and bon. Eample: "50%", "500p", o 500
iniialWidh 300 Se he iniial idh, pio o an conen being loaded.
iniialHeigh 100 Se he iniial heigh, pio o an conen being loaded.
maWidh fale Se a maimm idh fo loaded conen. Eample: "100%", 500, "500p"
maHeigh fale Se a maimm heigh fo loaded conen. Eample: "100%", 500, "500p"
Slidesho
lideho fale If e, add an aomaic lideho o a conen gop / galle.
lidehoSpeed 2500 Se he peed of he lideho, in milliecond.
lidehoAo e If e, he lideho ill aomaicall a o pla.
lidehoSa
"a
lideho"
Te fo he lideho a bon.
lidehoSop
"op
lideho"
Te fo he lideho op bon
Positioning
fied fale
If e, ColoBo ill be diplaed in a fied poiion ihin he iio' iepo.
Thi i nlike he defal abole poiioning elaie o he docmen.
op fale
Accep a piel o pecen ale (50, "50p", "10%"). Conol ColoBo' eical
poiioning inead of ing he defal poiion of being ceneed in he iepo.
boom fale
Accep a piel o pecen ale (50, "50p", "10%"). Conol ColoBo' eical
poiioning inead of ing he defal poiion of being ceneed in he iepo.
lef fale
Accep a piel o pecen ale (50, "50p", "10%"). Conol ColoBo'
hoional poiioning inead of ing he defal poiion of being ceneed in he
iepo.
igh fale
Accep a piel o pecen ale (50, "50p", "10%"). Conol ColoBo'
hoional poiioning inead of ing he defal poiion of being ceneed in he
iepo.
Callbacks
onOpen fale Callback ha fie igh befoe ColoBo begin o open.
onLoad fale Callback ha fie igh befoe aemping o load he age conen.
onComplee fale Callback ha fie igh afe loaded conen i diplaed.
onCleanp fale Callback ha fie a he a of he cloe poce.
2/25/12 ColorBo, A jQuer Lightbo
5/6 jacklmoore.com/colorbo/
onClosed Ialse Callback that Iires once ColorBox is closed.
Pblic Mehod
$.colorbox()
This method allows you to call ColorBox without having to assign it to an element.
$.colorbox({href:"login.php");
$.colorbox.next()
$.colorbox.prev()
These methods moves to the next and previous items in a group and are the same as
pressing the 'next' or 'previous' buttons.
$.colorbox.close()
This method initiates the close sequence, which does not immediately complete. The
lightbox will be completely closed only when the 'cboxclosed' event / onClosed callback
is Iired.
$.colorbox.element()
This method is used to Ietch the current HTML element that ColorBox is associated with.
Returns a jQuery object containing the element.
ar $element = $.colorbox.element();
$.colorbox.resize()
This allows ColorBox to be resized based on it's own auto-calculations, or to a speciIic
size. This must be called manually aIter ColorBox's content has loaded. The optional
parameters object can accept 'width' or 'innerWidth' and 'height' or 'innerHeight'. Without
speciIying a width or height, ColorBox will attempt to recalculate the height oI it's current
content.
$.colorbox.remove()
Removes all traces oI ColorBox Irom the document. Not the same as $.colorbox.close(),
which tucks colorbox away Ior Iuture use.
Een Hook
These event hooks Iire at the same time as their corresponding callbacks (ie. cboxcomplete & onComplete),
but can be used to make a universal change to ColorBox, while callbacks are only applied to selected elements.
// Eample of ing an een liene and pblic mehod o bild a pimiie lideho:
$(document).bind('cbox_complete', fncion(){
setTimeout($.colorbox.next, 1500);
);
cboxopen triggers when ColorBox is Iirst opened, but aIter a Iew key variable assignments take place.
cboxload triggers at the start oI the phase where content type is determined and loaded.
cboxcomplete triggers when the transition has completed and the newly loaded content has been revealed.
cboxcleanup triggers as the close method begins.
cboxclosed triggers as the close method ends.
2/25/12 ColorBo, A jQuer Lightbo
6/6 jacklmoore.com/colorbo/
He You
Follow me on Twitter, Github, or RSS. Why should you? I'm meticulous and have a lot of free time. Sometimes
good things come out of that.
jQuer Plugins
ColorBox jQuery lightbox. Need the FAQ?
Zoom enlarge images on mouseover.
Autosize auto-sizing for textarea elements.
Monte small carousel animation.
Blend animated background effect.
Latest Posts
Web Development Using Virtual Machines
CSS Ribbon Menu
jQuery Modal Tutorial
jQuery Accordion Tutorial
Fixing IE's Opacity Inheritance
jQuery Tabs Tutorial
HTML5 Placeholder Attribute
NaturalWidth and NaturalHeight in IE
ColorBox with Flickr Feed
ColorBox Beginner's Guide
Threadless reprint of 'Tragedy Struck'
Working with JavaScript click events
JavaScript: working with URLs and GET
Solving IE7 & IE8 PNG Opacity Problems
Handling asynchronous JavaScript callbacks
JavaScript: Slice, Substring, or Substr?
Moving Beyond IE6
Tags
ColorBox x2
CSS x5
Development x1
HTML5 x2
Illustration x1
Internet Explorer x4
JavaScript x8
jQuery x8
jack@colorpowered.com