Lightbox
Create a fancy lightbox for images and videos utilizing the Modal component.
Usage
To apply this component, add the data-f-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-f-lightbox title="Use this" data-title="Or this for captions">...</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-f-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 |
---|---|---|---|
allowfullscreen |
boolean | true | Whether embedded videos can toggle fullscreen or not (adds the allowfullscreen attribute to Iframes) |
videooptions |
object | false | Optional options to add to the video |
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 |
zoom |
boolean | false | Adds modal zoom to mobile lightbox |
iframesize | array | [800,600] | width, height |
containerCls |
string | empty string | add a custom class to the generated modal container |
btnCls |
string | empty string | add a custom class to both navigation buttons (next/prev, if applicable) |
Init element manually
let lightbox = FatKit.lightbox(element, { /* options */ });
Create dynamic lightbox
let lightbox = FatKit.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.f.lightbox |
event, data | On lightbox show |