Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

Vanilla JS Lightbox Documentation

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

Animations

Pro feature

There are two animation props: "initialAnimation"—triggered after each source's load, and "slideChangeAnimation"—triggered after a slide change (but not after a slide change through swiping). Their values ought to be CSS classes. Both props can't contain the same CSS class simultaneously (the animations won't work properly).

An example:
CSS:

.example-initial-animation {
animation: initial-animation 2s ease;
}

@keyframes initial-animation {
0% {
transform: rotate(0deg);
}

50% {
transform: rotate(360deg);
}

100% {
transform: rotate(0deg);
}
}
JavaScript:
fsLightboxInstances["gallery"].props.initialAnimation = "example-initial-animation";

Look over the Fullscreen Lightbox open source plug-ins.