Lightbox

Create a responsive lightbox gallery with images and videos.

The lightbox component is fully responsive and supports touch and swipe navigation, as well as mouse drag for desktops. When swiping between slides the animation literally sticks at your fingertip or mouse cursor. Clicking fast on the previous and next navigation, will make animations even accelerate to keep up with your pace. All animations are hardware accelerated for a smoother performance.

Usage

To apply this component, add the uk-lightbox attribute to a container to turn all anchors inside that container into lightbox links.

<div uk-lightbox>
    <a href="image.jpg"></a>
</div>

Alt Attribute

To add an alt attribute to the image in the lightbox, set the data-alt attribute on an anchor.

<div uk-lightbox>
    <a href="image.jpg" data-alt="Image"></a>
</div>

Caption

To display a caption at the bottom of the lightbox, set the data-caption attribute on an anchor.

<div uk-lightbox>
    <a href="image.jpg" data-caption="Caption"></a>
</div>

Animations

By default, the Lightbox gallery uses a slide animation. You can set the animation option to use a different one. Possible values are slide, fade and scale.

<div uk-lightbox="animation: fade">
    <a href="image.jpg"></a>
</div>

Content sources

A lightbox is not restricted to images. Other media, like videos, can be displayed as well. The video will pause whenever it’s not visible and resume once it becomes visible again. To display a poster image for a video, set the data-poster attribute.

<div uk-lightbox>
    <a class="uk-button" href="video.mp4" data-poster="image.jpg"></a>
    <a class="uk-button" href="https://www.youtube.com/watch?v=c2pz2mlSfXA"></a>
    <a class="uk-button" href="https://vimeo.com/1084537"></a>
    <a class="uk-button" href="https://www.google.com/maps"></a>
</div>

Note Use youtube-nocookie.com within the YouTube link and the lightbox will use the domain to embed the YouTube video.

Manual content type

The Lightbox uses the href attribute to figure out the type of the linked content. If no filename extension is defined in the path, just add the data-type attribute to the <a> tag.

Hint YouTube and Vimeo Urls will be handled automatically.

Custom Attributes

You can add custom attributes to lightbox content items by using the data-attrs attribute. The attributes are passed like the usual component options, e.g. data-attrs="width: 1280; height: 720;"

<div uk-lightbox>
    <a class="uk-button" href="https://www.youtube.com/watch?v=c2pz2mlSfXA" data-attrs="width: 1280; height: 720;"></a>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Lightbox

JavaScript

Learn more about JavaScript components.

Initialization

// To apply lightbox to a group of links
UIkit.lightbox(element, options);

// To dynamically initialize the lightbox panel
UIkit.lightboxPanel(panelOptions);

Methods

The following methods are available for the component:

Show

UIkit.lightbox(element).show(index);

Shows the Lightbox’s Panel and item.

Hide

UIkit.lightbox(element).hide();

Hides the Lightbox’s Panel.

Lightbox Panel Options

If you only want to use the lightbox panel directly through the JS API, you can set the following options.

Events

The following events will be triggered on elements with this component attached:

Methods

The following methods are available for the component:

Show

UIkit.lightboxPanel(element).show(index);

Shows the Lightbox Panel and item.

Hide

UIkit.lightboxPanel(element).hide();

Hides the Lightbox Panel.

startAutoplay

UIkit.lightboxPanel(element).startAutoplay();

Starts the Lightbox’s autoplay.

stopAutoplay

UIkit.lightboxPanel(element).stopAutoplay();

Stops the Lightbox’s autoplay.