Fullscreen Lightbox Javascript Fullscreen Lightbox ,React 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 three props: "slide" (integer), "sourceIndex" (integer, slide number minus one), or "source" (string, the source's URL or path itself).

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 the usage of the "slide" prop. The two other props—"sourceIndex" and "source"—are used analogously.

Look over the Fullscreen Lightbox open source plug-ins.