NB!: This page is intended to demonstrate that the lightbox works with Bootstrap 3 - the CSS classes for the layout use BS4 so this page won't display correctly.

Use this page only to check the lightbox works with BS3.

# Lightbox for Bootstrap

Utilizes Bootstraps modal plugin to implement a lightbox gallery - GitHub

## Install

Grab the latest CSS / JS files from the CDN: https://cdnjs.com/libraries/ekko-lightbox.

Or, with bower: `bower install ekko-lightbox --save`

Or, download the files directly: https://github.com/ashleydw/lightbox/tree/master/dist

Place this near on your page, probably near the end of the body section:

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

Then simply add `data-toggle` to your anchor tags.

`<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox"> <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid"> </a>`

Obviously, you need Bootstrap. Made for Bootstrap v4 but *should* work with v3.

## 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-*
--- | --- | --- | --- | ---
leftArrow / rightArrow | html | `❮` / `❯` | HTML for the arrows |
width / height | integer |  | Force the width / height | `data-(width|height)="[0-9]+"`
alwaysShowClose | boolean | `false` | Always show the close button, even if no title is present |
loadingMessage | html | A fancy loader | HTML injected for loading |
showArrows | bool | true | Disable the navigation overlay |

`$(this).ekkoLightbox({ alwaysShowClose: true, onShown: function() { console.log('Checking our the events huh?'); }, onNavigate: function(direction, itemIndex) console.log('Navigating '+direction+'. Current item: '+itemIndex); } ... });`

The following options are specified per element.

Name | Description | Example
--- | --- | ---
remote | If you can't/don't want to set the href property of an element | `data-remote="http://www...."`
gallery | For grouping elements | `data-gallery="gallery-name"`
type | Force the lightbox into image/YouTube mode. | `data-type="(image|youtube|vimeo)"`

`<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" data-type="image"> <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid"> </a>`

## Events

Events can be hooked into, set the the same as options above.

Name | Description
--- | ---
onContentLoaded | Fired when content (image/video/remote page etc) has been fully loaded.
onNavigate | Fired before navigating a gallery.
onShow/onShown/onHide/onHidden | Inherited from the bootstrap modal.

## Examples

Thanks to https://unsplash.it/ for the images.

- Single Image
- Image Gallery
- Videos
- Gallery of Videos
- Mixed gallery
- Programmatically call
- Via `data-remote`
- Force type
- Hidden elements
- Remote content

### Single Image

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

``

### Image Gallery

Galleries are created by adding the `data-gallery` attribute.

``

### Videos

#### YouTube

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

Justin Bieber - Love Yourself

Tame Impala - Elephant (using youtu.be link)

Justin Bieber - Love Yourself (suppress related videos with `&rel=0`)

``

#### 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

Taylor Swift - Blank Space (standard)

Taylor Swift - Blank Space (640 x 360)

Taylor Swift - Blank Space (1280 x 780)

``

### Gallery of Videos

``

### Mixed gallery

``

### Programmatically call

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

`` `$('#open-image').click(function (e) { e.preventDefault(); $(this).ekkoLightbox(); }); $('#open-youtube').click(function (e) { e.preventDefault(); $(this).ekkoLightbox(); });`

### Via `data-remote`

Neither of these are `<a />` tags, so both rely on the `data-remote` attribute.

``

### Force type

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.

Current allowed types are: `['image', 'youtube', 'vimeo', 'instagram', 'video', 'url']`

Click here for an image, but with no extension.

This link is missing the type attribute, and will iframe the image.

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

``

### Hidden elements

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

``

### Remote content

Given a URL, that is not an image or video (including unforced types), load the content using an iFrame.

Bootstrap Docs

``