Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue Fullscreen Lightbox Vue

React Lightbox Documentation

Learn how to use the React 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:
<FsLightbox
initialAnimation="example-initial-animation"
/>

Look over the Fullscreen Lightbox open source plug-ins.