Other props
disableLocalStorage - to improve performance lightbox caches detected types in local storage, if you dont't want that you set this boolean prop to true. It's useful when you are taking sources with different types from same url e.g.
<FsLightbox
toggler={toggler}
sources={['https//videosandimages.s3.com']}
disableLocalStorage={true}
/>
toggler={toggler}
sources={['https//videosandimages.s3.com']}
disableLocalStorage={true}
/>
videosPosters - array with strings, declare videos posters e.g.
<FsLightbox
toggler={toggler}
sources={['images/1.jpg', 'videos/video.mp4']}
videosPosters={[null, 'images/2.jpg']}
/>
toggler={toggler}
sources={['images/1.jpg', 'videos/video.mp4']}
videosPosters={[null, 'images/2.jpg']}
/>
maxYoutubeVideoDimensions - object with width and height number property, declares max dimensions of YouTube videos, if not set dimensions are: width - 1920(px), height - 1080(px)
<FsLightbox
toggler={toggler}
sources={['https://www.youtube.com/watch?v=xshEZzpS4CQ']}
maxYoutubeVideoDimensions={{ width: 1920, height: 1080}}
/>
toggler={toggler}
sources={['https://www.youtube.com/watch?v=xshEZzpS4CQ']}
maxYoutubeVideoDimensions={{ width: 1920, height: 1080}}
/>
openOnMount - boolean, if set to true lightbox will open on mount.
loadOnlyCurrentSource - boolean, by default lightbox at open loads 3 stage sources (previous, current, next). If this prop is set to true lightbox will load only current source.
slideDistance - number, distance between slides (x * window.innerWidth), default - 0.3
<FsLightbox
toggler={toggler}
sources={['source']}
slideDistance={0.5}
/>
toggler={toggler}
sources={['source']}
slideDistance={0.5}
/>
exitFullscreenOnClose - boolean, if set to true lightbox will exit fullscreen on close.
svg Pro - object prop, with it you can edit icons of every button in lightbox.
<FsLightbox
toggler={toggler}
sources={['source']}
svg={{
toolbarButtons: {
thumbs: {
viewBox: '0 0 32 32',
width: '40px',
height: '40px',
d: 'M 6 3 A 1 1 0 0 0 5 4 A 1 1 0 0 0 5 4.0039062',
title: 'Thumbnails'
},
zoomIn: {
width: '40px',
},
zoomOut: {
height: '30px'
},
close: {
height: '32px'
},
fullscreen: {
enter: {
d: 'M121',
},
exit: {
title: 'Fullscreen - exit'
}
},
slideshow: {
start: {
d: 'M123',
},
pause: {
viewBox: '0 0 31 31',
}
}
},
slideButtons: {
previous: {
width: '40px',
},
next: {
title: 'Next'
}
}
}}
/>
toggler={toggler}
sources={['source']}
svg={{
toolbarButtons: {
thumbs: {
viewBox: '0 0 32 32',
width: '40px',
height: '40px',
d: 'M 6 3 A 1 1 0 0 0 5 4 A 1 1 0 0 0 5 4.0039062',
title: 'Thumbnails'
},
zoomIn: {
width: '40px',
},
zoomOut: {
height: '30px'
},
close: {
height: '32px'
},
fullscreen: {
enter: {
d: 'M121',
},
exit: {
title: 'Fullscreen - exit'
}
},
slideshow: {
start: {
d: 'M123',
},
pause: {
viewBox: '0 0 31 31',
}
}
},
slideButtons: {
previous: {
width: '40px',
},
next: {
title: 'Next'
}
}
}}
/>
There are 5 editable properties for each button: viewBox, width, height, d and title. In above example you can see how to edit some properties in every button.
slideshowTime Pro - number prop. With turned on slideshow - time that need to pass to change slide to next (in milliseconds).
UIFadeOutTime Pro - number prop. Time after UI fades out (in milliseconds).