Thumbs

Pro feature

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

React Lightbox Documentation

Learn how to use React version of Fullscreen Lightbox!

Thumbs

Thumbs icons

Show thumbs on mount

Disable thumbs