Import
import {Image} from "lightbox.js-react"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.
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'
import 'lightbox.js-react/dist/index.css'
class Demo extends Component {
render() {
return (
<div>
<Image image={{src: "https://source.unsplash.com/Kk8mEQAoIpI/1600x1200", title: "Cyberpunk"}} />
</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'
import 'lightbox.js-react/dist/index.css'
function Demo() {
return (
<div>
<Image image={{src: "https://source.unsplash.com/Kk8mEQAoIpI/1600x1200", title: "Cyberpunk"}} />
</div>
)
}This will display the following image, along with a lightbox that appears when the image is clicked:
Available Themes
There are 3 themes available, which can be selected via setting the `theme` prop:
- day: A light theme with a white background and gray icons
- night: A dark theme with gray icons
- lightbox: A theme with a semi-transparent gray background
Day theme example
Night theme example
Lightbox theme example
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