disableLocalStorage
To improve the performance, the lightbox caches detected types in the local storage. To disable it, set the "disableLocalStorage" prop to "true".
<FsLightbox
disableLocalStorage={true}
/>Other props
disableSlideshowLoop Pro
By default, the lightbox won't stop the slideshow at the last slide but let it loop over to the first slide. Set this prop to "true" to disable this behavior.
<FsLightbox
disableSlideshowLoop={true}
/>exitFullscreenOnClose
By default, the lightbox will exit the fullscreen on close. To change it, set the "exitFullscreenOnClose" prop to "false".
<FsLightbox
exitFullscreenOnClose={false}
/>loadOnlyCurrentSource
By default, the lightbox loads 3 stage sources—previous, current, and next—after opening and after a slide change. If the "loadOnlyCurrentSource" prop is set to "true", the lightbox will load only the current source.
<FsLightbox
loadOnlyCurrentSource={true}
/>maxYoutubeVideoDimensions
The lightbox cannot detect maximum sizes of YouTube videos (however, by default it sets them to 1920 × 1080). To change them use the "maxYoutubeVideoDimensions" object prop.
<FsLightbox
maxYoutubeVideoDimensions={{ width: 1920, height: 1080 }}
/>slideDistance
The distance between the slides visible during swiping—x * window.innerWidth (by default, 0.3).
<FsLightbox
slideDistance={0.5}
/>svg Pro
To edit the properties of the toolbar and slide buttons, edit the "svg" prop in an analogous way to the given example (there are four editable props for each button):
<FsLightbox
svg={{
toolbarButtons: {
thumbs: {
class: "btn-thumbs", // A CSS class setting icon's dimensions
viewBox: "0 0 278 278",
d: "M0 0 H119.054 V119.054 H0 V0 z M158.946 0 H278 V119.054 H158.946 V0 z M158.946 158.946 H278 V278 H158.946 V158.946 z M0 158.946 H119.054 V278 H0 V158.946 z",
title: "Preview"
},
zoomIn: {
viewBox: "0 0 17 17"
},
zoomOut: {
class: "btn-zoom-out" // A CSS class setting icon's dimensions
},
slideshow: {
start: {
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,80c-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.904C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728c14.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.816c30.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.096C512,181.088,504.704,138.592,490.24,113.92z M192,352V160l160,96L192,352z"
},
pause: {
viewBox: "0 0 31 31"
}
},
fullscreen: {
enter: {
title: "Fullscreen — Show",
},
exit: {
title: "Fullscreen — Exit"
}
},
close: {
viewBox: "0 0 32 32"
}
},
slideButtons: {
previous: {
d: "M0 0 H119.054 V119.054 H0 V0 z M158.946 0 H278 V119.054 H158.946 V0 z M158.946 158.946 H278 V278 H158.946 V158.946 z M0 158.946 H119.054 V278 H0 V158.946 z",
},
next: {
viewBox: "0 0 17 17"
}
}
}}
/>slideshowTime Pro
When the slideshow is turned on, the time that needs to pass to change the slide to the next one (in milliseconds).
<FsLightbox
slideshowTime={10000}
/>UIFadeOutTime Pro
The time after which the lightbox's UI fades out (in milliseconds). The prop may be set to 0 to disable the fade-out.
<FsLightbox
UIFadeOutTime={10000}
/>zoomIncrement Pro
The value that increases the source's scale on a click zoom (by default, 0.25—that is, the size of the source is increased by 25%).
<FsLightbox
zoomIncrement={0.5}
/>disableSlideSwiping
Disables the horizontal changing of slides through the "swiping" gesture.
<FsLightbox
disableSlideSwiping={true}
/>disableBackgroundClose
Disables the closing of the lightbox when the background is clicked.
<FsLightbox
disableBackgroundClose={true}
/>showThumbsWithCaptions Pro
Preserve the display of captions when thumbs are opened.
<FsLightbox
showThumbsWithCaptions={true}
/>sourceMargin
The lightbox adds vertical margin and, on desktop screens, horizontal margin to sources. The default value is five percent (0.05).
<FsLightbox
sourceMargin={0.01}
/>