.

Colorbox Demonstration

Elastic Transition

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

Fade Transition

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

No Transition + fixed width and height (75% of screen size)

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

Slideshow

Grouped Photo 1

Grouped Photo 2

Grouped Photo 3

Other Content Types

Outside HTML (Ajax)

Flash / Video (Iframe/Direct Link To YouTube)

Flash / Video (Iframe/Direct Link To Vimeo)

Outside Webpage (Iframe)

Inline HTML

Demonstration of using callbacks

Example with alerts. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.

Retina Images

Retina

Non-Retina

This content comes from a hidden element on this page.

The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.

Click me, it will be preserved!

If you try to open a new Colorbox while it is already open, it will update itself with the new content.

Updating Content Example:
Click here to load new content

HELP

The gallery can be navigated using the keyboard:

LEFT/RIGHT ARROWS: Prev/Next
SPACEBAR: Next
ENTER: Start/Stop slideshow
ESCAPE: Close gallery
HOME/END: First/Last image
H - This help panel

Close help
pinlink

HELP

The gallery can be navigated using the keyboard:

LEFT/RIGHT ARROWS: Prev/Next
SPACEBAR: Next
ENTER: Start/Stop slideshow
ESCAPE: Close gallery
HOME/END: First/Last image
H - This help panel

Close help

HELP

The gallery can be navigated using the keyboard:

LEFT/RIGHT ARROWS: Prev/Next
SPACEBAR: Next
ENTER: Start/Stop slideshow
ESCAPE: Close gallery
HOME/END: First/Last image
H - This help panel

Close help
pinlink

HELP

The gallery can be navigated using the keyboard:

LEFT/RIGHT ARROWS: Prev/Next
SPACEBAR: Next
ENTER: Start/Stop slideshow
ESCAPE: Close gallery
HOME/END: First/Last image
H - This help panel

Close help
pinlink

HELP

The gallery can be navigated using the keyboard:

LEFT/RIGHT ARROWS: Prev/Next
SPACEBAR: Next
ENTER: Start/Stop slideshow
ESCAPE: Close gallery
HOME/END: First/Last image
H - This help panel

Close help
pinlink

HELP

The gallery can be navigated using the keyboard:

LEFT/RIGHT ARROWS: Prev/Next
SPACEBAR: Next
ENTER: Start/Stop slideshow
ESCAPE: Close gallery
HOME/END: First/Last image
H - This help panel

Close help
pinlink