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

- Dark, full screen
- Nyan

# Examples

Images from Instagrams "The Week on Instagram | 92"

- Example #1: Single Image
- Example #2: Gallery of Images
- Example #3: Single YouTube & Vimeo Video. Forced width
- Example #4: Gallery of YouTube / Vimeo Videos
- Example #5: Mixed gallery
- Example #6: Programatically call
- Example #7: Via `data-remote`
- Example #8: Gallery of different sized images
- Example #9: Images too wide for display
- Example #11: Column wrappers
- Example #12: Global galleries
- Example #13: No-extension images / presume everything is an image
- Example #14: On navigate event example
- Example #15: Hidden elements
- Example #16: Remote content
- Example #17: navigateTo

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