Bootstrap Lightbox

A simple lightbox plugin based on the bootstrap modal plugin.

Download Bootstrap Lightbox

Demo See it in action!

Click the thumbnail below to open the lightbox. This demo includes the optional .lightbox-caption element, which adds an image caption.

<div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
	<div class='lightbox-content'>
		<img src="image.png">
		<div class="lightbox-caption"><p>Your caption here</p></div>
	</div>
</div>

Usage Oooh, what does this button do?

Via data attributes

All you need to do is add data-toggle="lightbox" and href="#lightbox" or data-target="#lightbox" to a link, and set the href so it references the lightbox you want to display.

<a data-toggle="lightbox" href="#demoLightbox">Open Lightbox</a>

Via JavaScript

Open the lightbox with the id myLightbox.

$('#myLightbox').lightbox(options)

Options

Name Type Default Description
backdrop boolean true This adds a modal-backdrop element.
keyboard boolean true Pressing escape closes the lightbox.
show boolean true Shows the lightbox when initialized.
Note: This only applies when using JavaScript to setup the lightbox.