Documentation—Sources | Vanilla JS Fullscreen Lightbox

There are 3 types of sources supported out-of-the-box: images, HTML videos, and YouTube videos. To display such a source, pass its URL or path to the "href" attribute of an anchor element.

Custom sources

To display custom content—such as a Vimeo video, Google map, etc.—you have to pass the id of the custom source with the "#" prefix to the "href" attribute.

<a data-fslightbox="lightbox" href="#vimeo">
	Image
</a>
<iframe
    src="https://player.vimeo.com/video/22439234"
    id="vimeo"
    width="1920px"
    height="1080px"
    frameBorder="0"
    allow="autoplay; fullscreen"
    allowFullScreen
></iframe>

Or, through JavaScript, provide the desired DOM element to the "sources" array prop.

const instance = new FsLightbox();
instance.props.sources = [document.getElementById("vimeo")];

There might be a situation where you want to change the source's look when displayed in the lightbox. To achieve that, you can use the "data-class" attribute. The class will be added to the source in the lightbox:

<a data-fslightbox="lightbox" data-class="fslightbox-source" href="#vimeo">
	Image
</a>

<!-- A custom source on a website -->
<iframe
    src="https://player.vimeo.com/video/22439234"
    id="vimeo"
    frameBorder="0"
    allow="autoplay; fullscreen"
    allowFullScreen
></iframe>

<!-- The custom source in the lightbox -->
<iframe
    src="https://player.vimeo.com/video/22439234"
    id="vimeo"
    class="fslightbox-source"
    frameBorder="0"
    allow="autoplay; fullscreen"
    allowFullScreen
></iframe>

Vanilla JS Lightbox Documentation

Learn how to use the Vanilla JavaScript version of Fullscreen Lightbox.

Sources

Custom sources