Lightbox for Bootstrap 3

Utilizes Bootstraps modal plugin to implement a lightbox gallery - GitHub

Usage

Obviously, you need the modal component that comes with Bootstrap, and jQuery.

Via data attributes

<a href="someurl" data-toggle="lightbox">Launch modal</a>

Via Javascript

<a href="someurl" id="mylink">Open lightbox</a>
$('#mylink').lightbox(options);

Implementation

As of release v3.0.3a, the main script no longer includes the delegate function:

$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) { event.preventDefault(); return $(this).ekkoLightbox(); });");

Options

Options are passed down to the modal object so you can also use any of the original modal options.

Name type default description data-*
source string If you can't/don't want to set the href property of an element data-remote="http://www...."
gallery string For grouping elements data-gallery="galleryname"
gallery_parent_selector string *:not(.row) If the gallery parent isn't a div, use this. data-parent="any valid selector"
type string Force the lightbox into image/YouTube mode. data-type="(image|youtube|vimeo)"
width * integer Force the width data-width="[0-9]+]"
height * integer Force the height data-height="[0-9]+]"

*: Videos only

Examples

Images from Instagrams "The Week on Instagram | 92"

Example #1: Single Image

Note: uses modal plugin title option via data-title, and the custom footer tag using data-footer

Example #2: Gallery of Images

By default, gallery images must be wrapped in a tag (probably <div>) - which doesn't have the class .row. This is so you can create columns/rows.

A custom selector for the parent can be used, see example #11. Note how the final image is not in the gallery intentionally.

Example #3: Single YouTube / Vimeo Video

YouTube

You can use various YouTube URL formats, the regex used is: /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/

Ghostpoet - Cash and Carry Me Home

Tame Impala - Elephant (using youtu.be link)


Vimeo

You cannot embed Vimeo videos using the standard url (ie http://vimeo.com/80629469); you must link to the embed source (ie player.vimeo.com/video/80629469). This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.

City Lights - from Colin Rich (using embed link)

City Lights - from Colin Rich (with reccommended data-remote setting)


Forcing width

Set the width of the video

Ghostpoet - Cash and Carry Me Home (standard)

Ghostpoet - Cash and Carry Me Home (640 x 360)

Ghostpoet - Cash and Carry Me Home (1280 x 780)

Example #4: Gallery of YouTube Videos

Example #5: Mixed gallery

Example #6: Programatically call

These two examples are opened via the JavaScript at the bottom of the source.

Example #7: Via data-remote

Example #8: Gallery of different sized images

Example #9: Images too wide for display

All examples on this page are this example. Too high images don't count, scrolling works fine with the original modal.

Example #10: Semantic code

So you want to use <figure>

@gregfoster
@littlecoal

Example #11: Column wrappers

This shows that the images do not need to be columns as per the other examples. Use data-parent on the gallery item, or set it via the options.

Example #12: Global galleries

If you're gallery images have different parents you may wish to have all images with the same gallery tag to open regardless of their parent. To do this, set data-parent to the highest element you know of - on this page it is the div.container.

You can also leave the data-parent attribute empty, and it will default to document.body. This example uses a combination of the two.

@gregfoster

Example #13: No-extension images / presume everything is an image

If the images you are linking to have no extension, the lightbox cannot detect that is an image; therefore you need to tell the lightbox what data-type it is.

Click here for an image, but with no extension.

This link is missing the type attribute, and will not work.

This link is linking to a YouTube video, but forcing an image.