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) {
toggler: !lightboxController.toggler,
slide: number

return (
<button onClick={() => openLightboxOnSlide(1)}>
Open the lightbox on the first slide.
<button onClick={() => openLightboxOnSlide(2)}>
Open the lightbox on the second 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.