frontend-collective / React Image Lightbox
Licence: mit
React lightbox component
Stars: ✭ 956
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Image Lightbox
Silentbox
A lightbox inspired Vue.js component.
Stars: ✭ 196 (-79.5%)
Mutual labels: image, component, lightbox
React Native Scalable Image
React Native Image component which scales width or height automatically to keep the original aspect ratio
Stars: ✭ 241 (-74.79%)
Mutual labels: image, component
Vue Cool Lightbox
Vue.js lightbox inspired by fancybox.
Stars: ✭ 196 (-79.5%)
Mutual labels: image, lightbox
Ngx Gallery
Angular Gallery, Carousel and Lightbox
Stars: ✭ 417 (-56.38%)
Mutual labels: image, lightbox
React Background Slideshow
Sexy tiled background slideshow for React 🔥
Stars: ✭ 98 (-89.75%)
Mutual labels: image, component
Mediumlightbox
Nice and elegant way to add zooming functionality for images, inspired by medium.com
Stars: ✭ 671 (-29.81%)
Mutual labels: image, lightbox
React Native Fit Image
Responsive image component to fit perfectly itself.
Stars: ✭ 539 (-43.62%)
Mutual labels: image, component
Amplify
A tiny script allowing inline image zoom
Stars: ✭ 458 (-52.09%)
Mutual labels: image, lightbox
React Modal Image
A tiny React component providing modal image Lightbox.
Stars: ✭ 97 (-89.85%)
Mutual labels: image, lightbox
Lightbox
🌌 A convenient and easy to use image viewer for your iOS app
Stars: ✭ 1,334 (+39.54%)
Mutual labels: image, lightbox
Croppr.js
A vanilla JavaScript image cropper that's lightweight, awesome, and has absolutely zero dependencies.
Stars: ✭ 294 (-69.25%)
Mutual labels: image, component
React Native Blurhash
🖼️ A library to show colorful blurry placeholders while your content loads.
Stars: ✭ 430 (-55.02%)
Mutual labels: image, component
Glightbox
Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
Stars: ✭ 702 (-26.57%)
Mutual labels: image, lightbox
Vue Picture Input
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more
Stars: ✭ 862 (-9.83%)
Mutual labels: image, component
Ambient
Lightweight ambient light javascript library for HTML image and video elements
Stars: ✭ 20 (-97.91%)
Mutual labels: image
Fabscanpi Build Raspbian
Build Script for FabScanPi Raspbian Images
Stars: ✭ 21 (-97.8%)
Mutual labels: image
Ks Unlimited Marquee
🐞 A unidirectional scrollable React component.
Stars: ✭ 15 (-98.43%)
Mutual labels: component
React Image Lightbox
A flexible lightbox component for displaying images in a React project.
Features
- Keyboard shortcuts (with rate limiting)
- Image Zoom
- Flexible rendering using src values assigned on the fly
- Image preloading for smoother viewing
- Mobile friendly, with pinch to zoom and swipe (Thanks, @webcarrot!)
- No external CSS
Example
import React, { Component } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
const images = [
'//placekitten.com/1500/500',
'//placekitten.com/4000/3000',
'//placekitten.com/800/1200',
'//placekitten.com/1500/1500',
];
export default class LightboxExample extends Component {
constructor(props) {
super(props);
this.state = {
photoIndex: 0,
isOpen: false,
};
}
render() {
const { photoIndex, isOpen } = this.state;
return (
<div>
<button type="button" onClick={() => this.setState({ isOpen: true })}>
Open Lightbox
</button>
{isOpen && (
<Lightbox
mainSrc={images[photoIndex]}
nextSrc={images[(photoIndex + 1) % images.length]}
prevSrc={images[(photoIndex + images.length - 1) % images.length]}
onCloseRequest={() => this.setState({ isOpen: false })}
onMovePrevRequest={() =>
this.setState({
photoIndex: (photoIndex + images.length - 1) % images.length,
})
}
onMoveNextRequest={() =>
this.setState({
photoIndex: (photoIndex + 1) % images.length,
})
}
/>
)}
</div>
);
}
}
Play with the code on the example on CodeSandbox
Options
Property | Type | Description |
---|---|---|
mainSrc (required) |
string | Main display image url |
prevSrc | string | Previous display image url (displayed to the left). If left undefined, onMovePrevRequest will not be called, and the button not displayed |
nextSrc | string | Next display image url (displayed to the right). If left undefined, onMoveNextRequest will not be called, and the button not displayed |
mainSrcThumbnail | string | Thumbnail image url corresponding to props.mainSrc . Displayed as a placeholder while the full-sized image loads. |
prevSrcThumbnail | string | Thumbnail image url corresponding to props.prevSrc . Displayed as a placeholder while the full-sized image loads. |
nextSrcThumbnail | string | Thumbnail image url corresponding to props.nextSrc . Displayed as a placeholder while the full-sized image loads. |
onCloseRequest (required) |
func | Close window event. Should change the parent state such that the lightbox is not rendered |
onMovePrevRequest | func | Move to previous image event. Should change the parent state such that props.prevSrc becomes props.mainSrc , props.mainSrc becomes props.nextSrc , etc. |
onMoveNextRequest | func | Move to next image event. Should change the parent state such that props.nextSrc becomes props.mainSrc , props.mainSrc becomes props.prevSrc , etc. |
onImageLoad | func | Called when an image loads.(imageSrc: string, srcType: string, image: object): void |
onImageLoadError | func | Called when an image fails to load.(imageSrc: string, srcType: string, errorEvent: object): void |
imageLoadErrorMessage | node | What is rendered in place of an image if it fails to load. Centered in the lightbox viewport. Defaults to the string "This image failed to load" . |
onAfterOpen | func | Called after the modal has rendered. |
discourageDownloads | bool | When true , enables download discouragement (preventing [right-click -> Save Image As...]). Defaults to false . |
animationDisabled | bool | When true , image sliding animations are disabled. Defaults to false . |
animationOnKeyInput | bool | When true , sliding animations are enabled on actions performed with keyboard shortcuts. Defaults to false . |
animationDuration | number | Animation duration (ms). Defaults to 300 . |
keyRepeatLimit | number | Required interval of time (ms) between key actions (prevents excessively fast navigation of images). Defaults to 180 . |
keyRepeatKeyupBonus | number | Amount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images). Defaults to 40 . |
imageTitle | node | Image title (Descriptive element above image) |
imageCaption | node | Image caption (Descriptive element below image) |
imageCrossOrigin | string |
crossorigin attribute to append to img elements (MDN documentation) |
toolbarButtons | node[] | Array of custom toolbar buttons |
reactModalStyle | Object | Set z-index style, etc., for the parent react-modal (react-modal style format) |
reactModalProps | Object | Override props set on react-modal (https://github.com/reactjs/react-modal) |
imagePadding | number | Padding (px) between the edge of the window and the lightbox. Defaults to 10 . |
clickOutsideToClose | bool | When true , clicks outside of the image close the lightbox. Defaults to true . |
enableZoom | bool | Set to false to disable zoom functionality and hide zoom buttons. Defaults to true . |
wrapperClassName | string | Class name which will be applied to root element after React Modal |
nextLabel | string |
aria-label set on the 'Next' button. Defaults to 'Next image' . |
prevLabel | string |
aria-label set on the 'Previous' button. Defaults to 'Previous image' . |
zoomInLabel | string |
aria-label set on the 'Zoom In' button. Defaults to 'Zoom in' . |
zoomOutLabel | string |
aria-label set on the 'Zoom Out' button. Defaults to 'Zoom out' . |
closeLabel | string |
aria-label set on the 'Close Lightbox' button. Defaults to 'Close lightbox' . |
Browser Compatibility
Browser | Works? |
---|---|
Chrome | Yes |
Firefox | Yes |
Safari | Yes |
IE 11 | Yes |
Contributing
After cloning the repository and running npm install
inside, you can use the following commands to develop and build the project.
# Starts a webpack dev server that hosts a demo page with the lightbox.
# It uses react-hot-loader so changes are reflected on save.
npm start
# Lints the code with eslint and my custom rules.
yarn run lint
# Lints and builds the code, placing the result in the dist directory.
# This build is necessary to reflect changes if you're
# `npm link`-ed to this repository from another local project.
yarn run build
Pull requests are welcome!
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].