Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vanilla JS Lightbox Documentation

Official Fullscreen Lightbox guide!

Sources

There are 3 types of supported sources: images, videos, YouTube videos. Just pass link to href attribute.

<a data-fslightbox="gallery" href="https://i.imgur.com/fsyrScY.jpg">Image</a>
<a data-fslightbox="gallery" href="https://www.youtube.com/watch?v=xshEZzpS4CQ">YouTube video</a>
<a data-fslightbox="gallery" href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">HTML video</a>

Custom sources

To display custom content such as Vimeo videos, Google maps, etc. you need to pass id of custom source with # prefix to 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>

There might be a situation in which you want to change source look when displayed in lightbox. To achieve that you can use data-custom-class attribute. That class will be added to source in lightbox:

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

<!-- Custom source in website code -->
<iframe
src="https://player.vimeo.com/video/22439234"
id="vimeo"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen>
</iframe>

<!-- Custom source in lightbox -->
<iframe
src="https://player.vimeo.com/video/22439234"
id="vimeo"
class="fslightbox-source"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen>
</iframe>
Get connected wth us on social networks!