Bootstrap Lightbox

A simple lightbox plugin based on the bootstrap modal plugin.

Download Bootstrap Lightbox

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>

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.