# Lightbox

Create a fancy lightbox for images and videos utilizing the Modal component.

## Usage

To apply this component, add the `data-uk-lightbox` attribute to an anchor linking to the image you wish to display. If a title attribute exists it will be displayed as a caption for the lightbox.

### Example

Open lightbox

### Markup

    <a href="my-image.jpg" data-uk-lightbox title="">...</a>

## Groups

You can link multiple images to the same lightbox and switch between them from within the lightbox, thus creating a gallery. Just add the `{group:'my-group'}` option to the data attribute of each item using the same name on all items that you want to group. Make sure to include the CSS from the Slidenav component, so you can navigate between the items.

### Example

### Markup

    <a href="" data-uk-lightbox="{group:'my-group'}">...</a>

## Different content sources

A lightbox is not restricted to images. Other media, like videos, can be displayed inside a lightbox and it will automatically generate the correct output by evaluating your path.

### Example

Image MP4 Vimeo YouTube Iframe

### Content types

If no filename extension is defined in the image path, just add the `data-lightbox-type="image"` attribute. This works for videos as well. The iframe content type will be automatically detected for urls ending in `.html` or `.php`. To force the iframe, add the `data-lightbox-type="iframe"` attribute.

## JavaScript options

Option | Possible value | Default | Description
--- | --- | --- | ---
`group` | string | false | Group name to group elements as a gallery to show
`allowfullscreen` | boolean | true | Whether embedded videos can toggle fullscreen or not (adds the `allowfullscreen` attribute to Iframes)
`duration` | integer | 400 | Animation duration between gallery item change
`keyboard` | boolean | true | Allow keyboard navigation

### Init element manually

    var lightbox = UIkit.lightbox(element, { /* options */ });

### Create dynamic lightbox

                                    var lightbox = UIkit.lightbox.create([
                                        {'source': 'http://url/to/video.mp4', 'type':'video'},
                                        {'source': 'http://url/to/image.jpg', 'type':'image'}
                                    ]);

                                    lightbox.show();

### Events

Name | Parameter | Description
--- | --- | ---
`showitem.uk.lightbox` | event, data | On lightbox show