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 lightboxMarkup
<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.
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
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.
JavaScript options
Option | Possible value | Default | Description |
---|---|---|---|
group |
string | false | Group name to group elements as a gallery to show |
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 |