Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

React Lightbox Documentation

Learn how to use React version of Fullscreen Lightbox!

Control slide number

If you are making gallery it's often useful to open lightbox on specific slide not the first one. There comes three props:

slide: - you can pass here slide number directly: 1 (first slide), 2 (second slide) etc.
sourceIndex: - you can pass here source index that you want to display: 0 (first slide), 1 (second slide) etc.
source - you can pass here full source name that you want to display: 'images/1.jpg' (first slide), 'videos/2.mp4' (second slide) etc.

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 lightbox on first slide.
</button>
<button onClick={() => openLightboxOnSlide(2)}>
Open lightbox on second slide.
</button>
<FsLightbox
toggler={lightboxController.toggler}
sources={[
'image/1.jpg',
'image/2.bmp'
]}
slide={lightboxController.slide}
/>
</>
);
}

In above example we used slide prop. Others (sourceIndex, source) are used similarly. Choose one that suits you best!

Get connected wth us on social networks!