Lightweight Customizable Lightbox Plugin - ColorBox

ColorBox is a Lightweight Customizable Lightbox Plugin built with jQuery that allows you to display elements with the lightbox effect on the page. It supports photos, grouping, slideshow, ajax, inline, and iframed content.

Basic Usage:

1. Include jQuery library and ColorBox.js on your web page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>

2. Include jQuery ColorBox CSS

<link rel="stylesheet" href="colorbox.css" />

3. Call the plugin with options. Assign the ColorBox event to elements

<script>
$(document).ready(function(){
    $(".group2").colorbox({rel:'group2', transition:"fade"});
});
</script>

4. Markup

<p><a class="group2" href="1.jpg" title="">Grouped Photo 1</a></p>
<p><a class="group2" href="2.jpg" title="">Grouped Photo 2</a></p>
<p><a class="group2" href="3.jpg" title="">Grouped Photo 3</a></p>

5. Default settings object.

// data sources
html: false,
photo: false,
iframe: false,
inline: false,

// behavior and appearance
transition: "elastic",
speed: 300,
fadeOut: 300,
width: false,
initialWidth: "600",
innerWidth: false,
maxWidth: false,
height: false,
initialHeight: "450",
innerHeight: false,
maxHeight: false,
scalePhotos: true,
scrolling: true,
opacity: 0.9,
preloading: true,
className: false,
overlayClose: true,
escKey: true,
arrowKey: true,
top: false,
bottom: false,
left: false,
right: false,
fixed: false,
data: undefined,
closeButton: true,
fastIframe: true,
open: false,
reposition: true,
loop: true,
slideshow: false,
slideshowAuto: true,
slideshowSpeed: 2500,
slideshowStart: "start slideshow",
slideshowStop: "stop slideshow",
photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i,

// alternate image paths for high-res displays
retinaImage: false,
retinaUrl: false,
retinaSuffix: '@2x.$1',

// internationalization
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
xhrError: "This content failed to load.",
imgError: "This image failed to load.",

// accessbility
returnFocus: true,
trapFocus: true,

// callbacks
onOpen: false,
onLoad: false,
onComplete: false,
onCleanup: false,
onClosed: false,

More Examples:

• Example 1
• Example 2
• Example 3
• Example 4
• Example 5

Change Logs:

v1.6.4(2016-05-11)

• Fixed bug where using the inline property would duplicate target elements, if the selector matched multiple elements.

v1.6.3(2015-07-28)

• Fixed regression that caused error in IE8 when the calculated initial size was negative.

v1.6.2(2015-07-14)

• Fixed iframe attribute name (allowFullScreen to allowFullscreen).

v1.6.1(2015-05-15)

• Replaced the inline onclick handler for cboxPhoto with a namespaced event for easier unbinding. 

v1.6.0(2015-03-04)

• Adding to NPM, merged white-space cleanup & new language file.

v1.5.15(2015-02-26)

• Adding to NPM, merged white-space cleanup & new language file.

v1.5.14(2014-09-10)

• When opening, append Colorbox to the DOM if it was detached for whatever reason.

v1.5.13(2014-08-05)

• Fixed regression introduced with v1.5.12 with legacy versions of jQuery (1.3x-1.6x).

v1.5.12(2014-07-31)

• Allowed setting the overlay opacity via CSS, by setting Colorbox's opacity property to false. 
• Fixed bug where setting opacity to 0 was ignored. 

v1.5.10(2014-06-27)

• Minor misc. tweaks

v1.5.9(2014-04-26)

• Fixed inline content bug when using child selectors.

v1.5.8(2014-04-16)

• Fixed accidental leak of global variable.

v1.5.7(2014-04-15)

• Fix potential error when calling Colorbox directly. References #591
• Potentially worked around browser limitation of reporting that an image height and width is 0 immediately after onload.
• by HazZbroGaminG

v1.5.6(2014-04-04)

• Applied maxWidth and maxHeight to the initialWidth and initialHeight

v1.5.5(2014-03-14)

• Allow setting the overlay opacity through CSS, rather than having to use Colorbox's opacity property.

v1.5.4(2014-03-07)

• Fixed potential issue where IE9+ wouldn't close the modal when clicking on the overlay.
• Added access to settings object in callbacks.

v1.5.2(2014-02-28)

• Added svg to image types regex

v1.5.1(2014-02-28)

• Fixed regression that broke direct calls to Colorbox, ie. $.colorbox(…)
• removed any default margin and padding from Colorbox's iframe.

v1.5.0(2014-02-27)

• Changed when the className is applied: immediately on open, but only updated immediately prior to transition.
• Fixed potential style flash if #cboxLoadedContent is given a background. 
• Misc. code cleanup

v1.4.37(2014-02-12)

• Fixed potential error when resizing

v1.4.35(2014-01-30)

• version update.

v1.4.33(2013-11-01)

• Fixed an issue where private events propagated to the document in versions of jQuery prior to 1.7.
• Fixed a bug where events are propagated to document from $events.

v1.4.32(2013-10-16)

• Updated stylesheets to avoid issue with using `div {max-width:100%}

v1.4.31(2013-9-25)

• Added longdesc and aria-describedby attributes to photos. 
• Used setAttribute to set londesc, so that the value is accessible via DOM Node longDesc property

v1.4.29(2013-9-11)

• add Hebrew translation
• fixed a slideshow regression from 1.4.27

v1.4.28(2013-9-5)

• Fixed a potential issue with using the open property with mixed slideshow and non-slideshow groups

v1.4.27(2013-7-16)

• Fixed a width calculation issue relating to using margin:auto on #cboxLoadedContent.

v1.4.26(2013-6-30)

• Fixed a regression in IE7 and IE8 that was causing an error.

v1.4.25(2013-6-28)

• Use an animation speed of zero between same-sized content (fixed).

v1.4.24(2013-6-25)

• Added closeButton option. Set to false to remove the close button.

v1.4.23(2013-6-24)

• Bugfix loading overlay/graphic append order

 

---

This awesome jQuery plugin is developed by jackmoore. For more Advanced Usages, please check the demo page or visit the official website.