Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

React Lightbox Documentation

Learn how to use React version of Fullscreen Lightbox!

Thumbs of images are created automatically, if you want to set thumbs of other sources or overwrite default ones you need to use thumbs prop (array of urls).

<FsLightbox
toggler={toggler}
sources={[
'images/first.jpg',
'https://www.youtube.com/watch?v=xshEZzpS4CQ',
'videos/video.mp4'
]}
thumbs={[
null,
'images/second.png',
'images/third.jpg'
]}
/>

In above example first source is image so we don't need to set it's thumb (if you want to set different one than image itself - you can, no problem). For the next sources (video and YouTube) we set thumb manually.

Thumbs icons

When displaying videos showing icons on thumbs may improve user experience. To do that you need to use thumbsIcons prop. It's an array of svg's.

<FsLightbox
toggler={toggler}
sources={[
'https://www.youtube.com/watch?v=xshEZzpS4CQ'
]}
customSources={[
null,
<iframe src="https://player.vimeo.com/video/22439234" frameBorder="0"
allow="autoplay; fullscreen" allowFullScreen/>
]}
thumbs={[
'images/youtube-thumb.jpg',
'images/vimeo-thumb.jpg',
]}
thumbsIcons={[
<svg xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" viewBox="0 0 430.118 430.118">
<path d="M367.243,28.754c-59.795-1.951-100.259,31.591-121.447,100.664c10.912-4.494,21.516-6.762,31.858-6.762 c21.804,0,31.455,12.237,28.879,36.776c-1.278,14.86-10.911,36.482-28.879,64.858c-18.039,28.423-31.513,42.61-40.464,42.61 c-11.621,0-22.199-21.958-31.857-65.82c-3.239-12.918-9.031-45.812-17.324-98.765c-7.775-49.046-28.32-71.962-61.727-68.741 C112.15,34.873,90.98,47.815,62.726,72.308C42.113,91.032,21.228,109.761,0,128.471l20.225,26.112 c19.303-13.562,30.595-20.311,33.731-20.311c14.802,0,28.625,23.219,41.488,69.651c11.53,42.644,23.158,85.23,34.744,127.812 c17.256,46.466,38.529,69.708,63.552,69.708c40.473,0,90.028-38.065,148.469-114.223c56.537-72.909,85.725-130.352,87.694-172.341 C432.498,58.764,411.613,30.028,367.243,28.754z"/>
</svg>,
<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 512 512">
<path d="M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80 c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904 C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728 c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816 c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096 C512,181.088,504.704,138.592,490.24,113.92z M192,352V160l160,96L192,352z"/>
</svg>
]}
/>

In above example we displayed YouTube and Vimeo videos, attached thumbs to it and displayed on those thumbs fitting icons.

Show thumbs on mount

If you want to display thumbs on lightbox mount set showThumbsOnMount prop to true.

<FsLightbox
toggler={toggler}
sources={[some sources]}
showThumbsOnMount={true}
/>

Disable thumbs

If you want to disable thumbs completely set disableThumbs prop to true.

<FsLightbox
toggler={toggler}
sources={[some sources]}
disableThumbs={true}
/>i
Get connected wth us on social networks!