Thumbs
Pro featureThumbs 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).
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.
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.
toggler={toggler}
sources={[some sources]}
showThumbsOnMount={true}
/>
Disable thumbs
If you want to disable thumbs completely set disableThumbs prop to true.
toggler={toggler}
sources={[some sources]}
disableThumbs={true}
/>i