Image

This component displays a singular image lightbox with a fade-in and fade-out animation. For displaying multiple images in a slideshow format, see the Slideshow Lightboxcomponent instead.

The following features are supported:

Zooming: Users can zoom through the mouse-wheel or single-click on desktop, and pinch-to-zoom on mobile devices.
Panning: Once an image is zoomed into, the image can be panned by dragging the image through the mouse, or if on a mobile device, with a swipe-to-drag motion.
Animations:When the user clicks on an image, a fade-in entry animation is displayed, which allows for a seamless transition effect between the content and the lightbox. A fade-out animation is displayed when the user exits from the lightbox.

Import

import {Image} from "lightbox.js-react"

Usage

To include an image that displays a lightbox when clicked, simply add the following:

<Image image={{src: "https://source.unsplash.com/Kk8mEQAoIpI/1600x1200", title: "Cyberpunk"}} />

This will render an image as shown below. Try clicking it to see the animation in action:

Check out the SlideshowLightbox component to display multiple images in a slideshow format.

Full example

import React, { Component } from 'react'
import {Image} from 'lightbox.js-react'

class Demo extends Component {
    render() {
        return (
          <div>
            <Image image={{src: "", title: "Nature"}} />
          </div>
        )
    }
}

Full example using functional components

Here's an example using a functional component instead:

import React from 'react'
import {Image} from 'lightbox.js-react'
          
function Demo() {
return (
  <div>
  <Image image={{src: "", title: ""}} />
</div>
      )
}

This will display the following image, along with a lightbox that appears when the image is clicked:

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"

<Image theme="night" image={{src: "https://source.unsplash.com/Kk8mEQAoIpI/1600x1200", title: "Cyberpunk"}} />

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:

<Image backgroundColor="rgba(12, 12, 12, 0.8)" ... />

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.

<Image iconColor="rgba(12, 12, 12, 0.8)" ... />

Full Screen

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

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

Lightbox Image Styling

Custom classname(s) to be passed to the lightbox's image wrapper. Just pass your classname(s) to the lightboxImgClass prop.

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

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

.lightboxImg img {
...
}

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:

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

Show/Hide Certain Icons in the Controls

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
showMagnificationIcons

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

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. The only icon that will be displayed is the close icon.

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

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>

Disable Image Zoom

Image zoom is provided by default, but if you'd like to disable the image zoom functionality, then set thedisableImageZoom prop to true.

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

Props

theme: String - The theme to be applied to the lightbox. Options include day, night, lightbox

backgroundColor: String - the background color of the lightbox, as a CSS color name, RGBA value or HEX code

modalClose: String - If set to the "clickOutside", the lightbox will close if the outside of the image is clicked.

iconColor: String - the icon color for the lightbox, as a CSS color name, RGBA value or HEX code

fullScreen: Boolean - Whether to display the image so that it takes up the screen's full width and height

showControls: Boolean - Whether or not to display the controls. Only the close icon will be displayed if set to false. Specific controls can be removed, see below for more information.

showFullScreenIcon: Boolean - Whether or not to display the full-screen icon

showMagnificationIcons: Boolean - If set to false, the magnification icons are hidden

lightboxImgClass: String - Custom classname(s) to be passed to the lightbox image's wrapper element

disableImageZoom: Boolean - If you would like to disable image zoom functionality within the lightbox, set the disableImageZoom prop to true

Slideshow Lightbox

To display multiple images with thumbnails, be sure to check out the SlideshowLightbox component.

Feature Request

Have an idea for a new feature? Be sure to let us know in the official GitHub repository for Lightbox.js!