Lightbox for Bootstrap 3

Utilizes Bootstraps modal plugin to implement a lightbox gallery - GitHub

Usage

Via data attributes

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

Via Javascript

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

Implementation

Obviously, you need the modal component that comes with Bootstrap, and jQuery. The delegate function used on this page is:

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

If you plan on having galleries, be sure to include the LESS / CSS files.

Options

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

Pass the options to the calling function as an object, or set defaults using $.fn.ekkoLightbox.defaults (excluding modal default options, notable: title, footer, remote)

Name type default description data-*
remote 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 document.body If you have multiple galleries per page, this will restrict the gallery items to the parent that matches this selector. data-parent="any valid selector"
left_arrow_class string .glyphicon .glyphicon-chevron-left The css classes to give to the left arrow
right_arrow_class string .glyphicon .glyphicon-chevron-right The css classes to give to the right arrow
type string Force the lightbox into image/YouTube mode. data-type="(image|youtube|vimeo)"
width (videos only; height is calculated by ratio) integer Force the width data-width="[0-9]+"
always_show_close boolean true Always show the close button, even if no title is present
onNavigate callable false Function call when navigate right or left. First argument is the direction
loadingMessage string Loading... Message injected for loading

Themes

Some quick themes to show how customisation is possible.

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)


Instagram

GOtags.co.uk

This also works with photos: GOtags.co.uk


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

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.

Example #14: On navigate event example

The argument given is the direction of navigation. Open your developer console and use any gallery example.

Example #15: Hidden elements

Facebook style, only show a few images but have a large gallery

Example #16: Remote content

The Bootstrap modal originally allowed for remote loading, but this is to be removed in v4; this functionality demonstrates the work around.

Given a URL, that is not an image or video (including unforced types [see example 13]), load the content using jQuery load(). An image and video is given below as proof gallery.

Open up local Page 1

Open up local Page 2

Open up BBC news

Open up Bootstrap

Example #17: navigateTo

Must be setup programatically to run the setup (view the source of this page)