Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

Vanilla JS Lightbox Documentation

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

FAQ

A correct URL was passed but the lightbox displays the "Invalid file!" message.

Most likely an external URL without the CORS enabled was used, so the lightbox cannot detect its type automatically. The issue can by solved by manually setting the source's type, or enabling the CORS of the given resource, or putting the file on the local server.

How to pause videos on slide change?

It's possible only in the pro version as the "onSlideChange" event is not provided in the basic one. To pause YouTube videos, you have to append the "enablejsapi=1" parameter to the URL (for example, "https://www.youtube.com/watch?v=3nQNiWdeH2Q" into "https://www.youtube.com/watch?v=3nQNiWdeH2Q&enablejsapi=1"). The following example describes how to pause both HTML and YouTube videos (so you might want to modify it if you are using only HTML or only YouTube videos):

fsLightbox.props.onSlideChange = function (instance) {
var sources = instance.elements.sources;
for (var i = 0; i < sources.length; i++) {
var source = sources[i];
if (!source) {
continue;
}
if (source.tagName === "VIDEO") {
source.pause();
} else if (source.tagName === "IFRAME") {
source.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}',"*");
}
}
};
Look over the Fullscreen Lightbox open source plug-ins.