Vanilla JavaScript Fullscreen Lightbox Basic

Description

A vanilla JavaScript plug-in without production dependencies for displaying images, videos, or, through custom sources, anything you want in a clean overlying box.
The project's website: https://fslightbox.com.

Installation

$3

Just before the end of the <body> tag:
``

html

$3


npm install fslightbox


And import it in your project's JavaScript file, for example through the Node.js "require" function:


require("fslightbox")


Basic usage

html

	Open the first slide (an image)

	data-fslightbox="gallery"
	href="https://www.youtube.com/watch?v=xshEZzpS4CQ"
>
	Open the second slide (a YouTube video)

	data-fslightbox="gallery"
	href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
>
	Open the third slide (an HTML video)


	Open the fourth slide (a Vimeo video—a custom source)

	id="vimeo"
	src="https://player.vimeo.com/video/22439234"
	width="1920px"
	height="1080px"
	frameBorder="0"
	allow="autoplay; fullscreen"
	allowFullScreen
>

Documentation

Available at: https://fslightbox.com/javascript/documentation.

Demo

Available at: https://fslightbox.com/javascript.

Browser Compatibility

| Browser | Works? |
| --- | --- |
| Chrome | Yes |
| Firefox | Yes |
| Opera | Yes |
| Safari | Yes |
| Edge | Yes |
| IE 11 | Yes |