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}
/>
</>
);
}
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!