Lightbox

Ready Added in 2.0.0

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 gls-lightbox attribute to a container to turn all anchors inside that container into lightbox links.

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

  • <div gls-lightbox>
    <a class="gls-button gls-button-default" href="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg">Open Lightbox</a>
</div>

Alt Attribute

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

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

  • <div gls-lightbox>
    <a class="gls-button gls-button-default" href="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" data-alt="Image">Open Lightbox</a>
</div>

Caption

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

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

  • <div gls-lightbox>
    <a class="gls-button gls-button-default" href="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" data-caption="Caption">Open Lightbox</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 gls-lightbox="animation: fade">
    <a href="image.jpg"></a>
</div>
  • Slide
    Fade
    Scale
  • <div class="gls-h3">Slide</div>
<div class="gls-child-width-1-3@m" gls-grid gls-lightbox="animation: slide">
    <div>
        <a class="gls-inline" href="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" data-caption="Caption 1">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="gls-inline" href="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" data-caption="Caption 2">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="gls-inline" href="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" data-caption="Caption 3">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
</div>

<div class="gls-h3">Fade</div>
<div class="gls-child-width-1-3@m" gls-grid gls-lightbox="animation: fade">
    <div>
        <a class="gls-inline" href="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" data-caption="Caption 1">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="gls-inline" href="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" data-caption="Caption 2">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="gls-inline" href="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" data-caption="Caption 3">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
</div>

<div class="gls-h3">Scale</div>
<div class="gls-child-width-1-3@m" gls-grid gls-lightbox="animation: scale">
    <div>
        <a class="gls-inline" href="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" data-caption="Caption 1">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="gls-inline" href="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" data-caption="Caption 2">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
    <div>
        <a class="gls-inline" href="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" data-caption="Caption 3">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" width="1800" height="1200" alt="">
        </a>
    </div>
</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 gls-lightbox>
    <a class="gls-button" href="video.mp4" data-poster="image.jpg"></a>
    <a class="gls-button" href="https://www.youtube.com/watch?v=YE7VzlLtp-4"></a>
    <a class="gls-button" href="https://vimeo.com/1084537"></a>
    <a class="gls-button" href="https://www.google.com/maps"></a>
</div>

  • <div gls-lightbox>
    <a class="gls-button gls-button-default" href="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" data-caption="Image">Image</a>
    <a class="gls-button gls-button-default" href="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" data-caption="Video">Video</a>
    <a class="gls-button gls-button-default" href="https://www.youtube.com/watch?v=YE7VzlLtp-4" data-caption="YouTube">YouTube</a>
    <a class="gls-button gls-button-default" href="https://vimeo.com/1084537" data-caption="Vimeo">Vimeo</a>
    <a class="gls-button gls-button-default" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938" data-caption="Google Maps" data-type="iframe">Google 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.

Option Description
data-type="image" The content type is an image.
data-type="video" The content type is a video.
data-type="iframe" The content type is a regular website.

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

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

Component options

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

Option Value Default Description
animation String slide Lightbox animation mode: slide, fade or scale.
autoplay Number 0 Lightbox autoplays. (Delay in milliseconds)
autoplay-interval Number 0 The delay between switching slides in autoplay mode.
pause-on-hover Boolean false Pause autoplay mode on hover.
video-autoplay Boolean false Lightbox videos autoplay.
index String, Number 0 Lightbox item to show. 0 based index.
toggle CSS selector a Toggle selector - opens the Lightbox Panel upon click.

JavaScript

Learn more about JavaScript components.

Initialization

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

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

Methods

The following methods are available for the component:

Show

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

Shows the Lightbox’s Panel and item.

Hide

Gloss.lightbox(element).hide();

Hides the Lightbox’s Panel.

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

Option Value Default Description
animation String slide Lightbox animation mode: slide, fade or scale.
autoplay Boolean false Lightbox autoplays.
autoplay-interval Number 7000 The delay between switching slides in autoplay mode.
pause-on-hover Boolean false Pause autoplay mode on hover.
video-autoplay Boolean false Lightbox videos autoplay.
index Number 0 The initial item to show. (zero based)
velocity Number 2 The animation velocity (pixel/ms).
preload Number 1 The number of items to preload. (left and right of the currently active item)
items Array [] An array of items to display, e.g. [{source: 'images/size1.jpg', caption: '900x600'}]
template String Default markup The template string.
delay-controls Number 3000 Delay time before controls fade out in ms.
container String body Define a target container via a selector to specify where the Lightbox should be appended in the DOM.

Events

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

Name Description
beforeshow Fires before the Lightbox is shown.
beforehide Fires before the Lightbox is hidden.
show Fires after the Lightbox is shown.
shown Fires after the Lightbox’s show animation has completed.
hide Fires after the Lightbox’s hide animation has started.
hidden Fires after the Lightbox is hidden.
itemload Fires when an item loads.
beforeitemshow Fires before an item is shown.
itemshow Fires after an item is shown.
itemshown Fires after an item’s show animation has completed.
beforeitemhide Fires before an item is hidden.
itemhide Fires after an item’s hide animation has started.
itemhidden Fires after an item’s hide animation has completed.

Methods

The following methods are available for the component:

Show

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

Shows the Lightbox Panel and item.

Name Type Default Description
index String, Number 0 Lightbox item to show. 0 based index.

Hide

Gloss.lightboxPanel(element).hide();

Hides the Lightbox Panel.

startAutoplay

Gloss.lightboxPanel(element).startAutoplay();

Starts the Lightbox’s autoplay.

stopAutoplay

Gloss.lightboxPanel(element).stopAutoplay();

Stops the Lightbox’s autoplay.