Customization

Theme

If you'd like to change the theme of the lightbox, this can be done by passing a theme name to the theme prop, with the options including: "lightbox", "night", "day"

<SlideshowLightbox theme="lightbox">
...
</SlideshowLightbox>

Full Screen Images

If you'd like the images to take up the screen's full available width and height, simply set thefullScreen prop to true. The default is false.

<SlideshowLightbox fullScreen={true}>
...
</SlideshowLightbox>

Show Controls

If you'd like to remove the controls (in the top-right corner) of the lightbox, this can be done by setting theshowControls prop to false:

<SlideshowLightbox showControls={false}>
...
</SlideshowLightbox>

Lightbox Image Styling

If you'd like to add custom styling to the lightbox's image, custom classname(s) to be passed via the `lightboxImgClass` prop.

<SlideshowLightbox lightboxImgClass={"lightboxImg"} 
... 
</SlideshowLightbox>

You could then select the `img` component within the lightbox with CSS, such as:

.lightboxImg img {
...
}

Background Color

If you'd like to customize the background color of the lightbox, this can be done by passing a color to the color prop, as a RGB, RGBA, HEX or CSS color name value:

<SlideshowLightbox backgroundColor="white">
...
</SlideshowLightbox>

Icon Color

The icon colors can also be specified through the `iconColor` prop, and the color can be a RGB, RGBA, HEX or CSS color name value.

<SlideshowLightbox iconColor="silver">
...
</SlideshowLightbox>

Thumbnail border

Each thumbnail contains a border which can be customized or removed entirely (by setting the border color to transparent). The border can be customized through specifying a color value for the `thumbnailBorder` prop, and the color can be a RGB, RGBA, HEX or CSS color name value.

<SlideshowLightbox thumbnailBorder="silver">
...
</SlideshowLightbox>

Show Thumbnails

If you would like to remove thumbnails entirely from the lightbox, you can do so by setting the `showThumbnails` prop to `false`.

<SlideshowLightbox showThumbnails="false">
...
</SlideshowLightbox>

Show/Hide Certain Icons

If you'd like to show/hide particular icons in the controls at the top of the lightbox, this can be done by toggling the respective values to true/false.

The props are:

• showFullScreenIcon
• showThumbnailIcon
• showSlideshowIcon
• showMagnificationIcons

<SlideshowLightbox showMagnificationIcons={false} showSlideshowIcon={false}>
...
</SlideshowLightbox>

Image Animation

The animation type can be specified through the `imgAnimation` prop, and the two values include:

• imgMotion
• fade

<SlideshowLightbox imgAnimation="fade">
...
</SlideshowLightbox>

Close Lightbox When Outside of Image Is Clicked

If you'd like to close the lightbox when the outside of the image is clicked, this can be done by setting the modalClose prop to clickOutside:

<SlideshowLightbox modalClose="clickOutside">
...
</SlideshowLightbox>

Open

If you'd like to open/close the lightbox (through a custom element, such as via a button), this can be done by toggling the value of the open prop. For a full tutorial, take a look at this guide here.

<SlideshowLightbox open={isOpen}>
...
</SlideshowLightbox>

Starting slide index

The starting slide index the lightbox should open to when the modal is opened/closed. The default is 0. For a full tutorial, take a look at this guide here.

<SlideshowLightbox startingSlideIndex={0}>
...
</SlideshowLightbox>

Disable zooming

By default, image zooming is enabled. To disable the image zoom functionality, set the disableImageZoom prop to true:

<SlideshowLightbox disableImageZoom={true}>
...
</SlideshowLightbox>

Slideshow Interval

When the slideshow is playing, the amount of time between slideshow transitions can be specified through the `slideshowInterval` prop in milliseconds.

<SlideshowLightbox slideshowInterval={1600}>
...
</SlideshowLightbox>

Animate Thumbnails

By default, the thumbnails are animated in and out of the DOM using a fade-in effect. If you would prefer to switch this animation off, this can be done so by setting the `animateThumbnails` prop to `false`.

<SlideshowLightbox animateThumbnails={false}>
...
</SlideshowLightbox>

Rounded Images

Apply rounded effect to the images

<SlideshowLightbox roundedImages={true}>
...
</SlideshowLightbox>

nextArrow

Custom component to be included as the next arrow. If you'd like to render a different arrow to the default, just pass a custom component to the `nextArrow` prop.

<SlideshowLightbox nextArrow={<CustomArrow />}>
...
</SlideshowLightbox>

prevArrow

Custom component to be included for the previous arrow. If you'd like to render a different arrow to the default, just pass a custom component to the `prevArrow` prop.

<SlideshowLightbox prevArrow={<CustomArrow />}>
...
</SlideshowLightbox>

rightArrowClassname

Custom classname for the lightbox's right arrow

<SlideshowLightbox rightArrowClassname="rightArrow">
...
</SlideshowLightbox>

leftArrowClassname

Custom classname for the lightbox's left arrow

<SlideshowLightbox leftArrowClassname="leftArrow">
...
</SlideshowLightbox>

captionStyle

Style object passed to the image caption element

<SlideshowLightbox captionStyle={{color: "silver"}}>
...
</SlideshowLightbox>