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.

Control slide number

To open the gallery on a different slide than the first, specify the desired slide by using one of the two props: "slide" (integer) or "sourceIndex" (integer, slide number minus one).

function App() {
const [lightboxController, setLightboxController] = useState({
toggler: false,
slide: 1
});

function openLightboxOnSlide(number) {
setLightboxController({
toggler: !lightboxController.toggler,
slide: number
});
}

return (
<>
<button onClick={() => openLightboxOnSlide(1)}>
Open the lightbox on the first slide.
</button>
<button onClick={() => openLightboxOnSlide(2)}>
Open the lightbox on the second slide.
</button>
<FsLightbox
toggler={lightboxController.toggler}
sources={[
"/Images/1.jpg",
"/Images/2.jpg"
]}
slide={lightboxController.slide}
/>
</>
);
}

In the above example there is presented a usage of the "slide" prop. The other prop—"sourceIndex"—is used analogously.

Look over the Fullscreen Lightbox open source plug-ins.