Image and video gallery for React
Full featured image and video gallery lightbox component for react.
Installation
Follow the below steps to use lightGallery react component in your application. React component is part of the main lightGallery package on NPM. You can import it using the following way
-
Install lightGallery via NPM
npm install lightgallery
-
Import react component and styles
import LightGallery from 'lightgallery/react';
// import styles
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-thumbnail.css';
// If you want you can use SCSS instead of css
import 'lightgallery/scss/lightgallery.scss';
import 'lightgallery/scss/lg-zoom.scss';
// import plugins if you need
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';
function Gallery() {
const onInit = () => {
console.log('lightGallery has been initialized');
};
return (
<div className="App">
<LightGallery
onInit={onInit}
speed={500}
plugins={[lgThumbnail, lgZoom]}
>
<a href="img/img1.jpg">
<img alt="img1" src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img alt="img2" src="img/thumb2.jpg" />
</a>
...
</LightGallery>
</div>
);
}
Props and methods
All lightGallery settings can be passed to react component as props.
Additionally, you can use lifecycle hook methods listed below to hook into
lightGalley component lifecycle. Almost every method passes a detail object
which holds useful plugin data. Also, you can pass additional classnames to the
lightGallery react wrapper element via elementClassNames prop
usage example
function Gallery() {
const onBeforeSlide = (detail) => {
const { index, prevIndex } = detail;
console.log(index, prevIndex);
};
return (
<div className="App">
<LightGallery
elementClassNames="custom-wrapper-class"
onBeforeSlide={onBeforeSlide}
>
<a href="img/img1.jpg">
<img alt="img1" src="img/thumb1.jpg" />
</a>
...
</LightGallery>
</div>
);
}
Name: onInit
Description: Called only once when lightGallery is initialized
Detail:
| Name | Type | Description |
|---|---|---|
| instance | LightGallery | lightGallery plugin instance |
Name: onBeforeOpen
Description: Called immediately before opening the gallery
Name: onAfterOpen
Description: Called immediately after opening the gallery
Name: onAfterAppendSlide
Description: Called when the slide content has been inserted into it's slide container.
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onAfterAppendSubHtml
Description: Called when the sub-html content (ex : title/ description) has been appended into the slide.
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onSlideItemLoad
Description: Called once the media inside the slide has been completely loaded .
Detail:
| Name | Type | Description |
|---|---|---|
| delay | number | For the first slide, lightGallery adds some delay for displaying the loaded slide item. This delay is required for the transition effect when the slide item is displayed Respect the delay when you use this event |
| index | number | Index of the slide |
| isFirstSlide | boolean |
Name: onHasVideo
Description: Called when lightGallery detects video slide
Detail:
| Name | Type | Description |
|---|---|---|
| hasPoster | boolean | True if video has poster |
| html5Video | VideoSource |
HTML5 video source if available
HTML5 video source = source: { src: string; type: string; }[]; attributes: HTMLVideoElement; |
| index | number | Index of the slide, |
| src | string | Video source |
Name: onBeforeSlide
Description: Called immediately before each slide transition.
Detail:
| Name | Type | Description |
|---|---|---|
| fromThumb | boolean | true if slide function called via thumbnail click |
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
| prevIndex | number | Index of the previous slide |
Name: onAfterSlide
Description: Called immediately after each slide transition.
Detail:
| Name | Type | Description |
|---|---|---|
| fromThumb | boolean | true if slide function called via thumbnail click |
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
| prevIndex | number | Index of the previous slide |
Name: onBeforeNextSlide
Description: Called immediately before each "next" slide transition
Detail:
| Name | Type | Description |
|---|---|---|
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
Name: onBeforePrevSlide
Description: Called immediately before each "prev" slide transition
Detail:
| Name | Type | Description |
|---|---|---|
| fromTouch | boolean | true if slide function called via touch event or mouse drag |
| index | number | Index of the slide |
Name: onPosterClick
Description: Called when the video poster is clicked.
Name: onDragStart
Description: Called when the drag event to move to different slide starts.
Name: onDragMove
Description: Called periodically during the drag operation.
Name: onDragEnd
Description: Called when the user has finished the drag operation
Name: onContainerResize
Description: Called when the lightGallery container has been resized.
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onBeforeClose
Description: Called immediately before the start of the close process.
Name: onAfterClose
Description: Called immediately once lightGallery is closed.
Detail:
| Name | Type | Description |
|---|---|---|
| instance | LightGallery | lightGallery plugin instance |
Name: onRotateLeft
Description: Called when the image is rotated in anticlockwise direction
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onRotateRight
Description: Called when the image is rotated in clockwise direction
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onFlipHorizontal
Description: Called when the image is flipped horizontally
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Name: onFlipVertical
Description: Called when the image is flipped vertically
Detail:
| Name | Type | Description |
|---|---|---|
| index | number | Index of the slide |
Updating slides
lightGallery does not update slides automatically due to performance reasons.
But you can easily update slides whenever needed by calling refresh method.
function App() {
const lightGallery = useRef<any>(null);
const [items, setItems] = useState([
{
id: '1',
size: '1400-800',
src: 'img-1.jpg',
thumb: 'thumb-1.jpg',
},
{
id: '2',
size: '1400-800',
src: 'img-2.jpg',
thumb: 'thumb-2.jpg',
},
]);
const addItem = useCallback(() => {
setItems([
...items,
{
id: '5',
size: '1400-800',
src: 'img-5.jpg',
thumb: 'thumb-5.jpg',
},
{
id: '6',
size: '1400-800',
src: 'img-6.jpg',
thumb: 'thumb-6.jpg',
},
]);
}, []);
const onInit = useCallback((detail) => {
if (detail) {
lightGallery.current = detail.instance;
}
}, []);
const getItems = useCallback(() => {
return items.map((item) => {
return (
<div
key={item.id}
data-lg-size={item.size}
className="gallery-item"
data-src={item.src}
>
<img className="img-responsive" src={item.thumb} />
</div>
);
});
}, [items]);
useEffect(() => {
lightGallery.current.refresh();
}, [items]);
return (
<div className="App">
<button onClick={addItem}>Add new item</button>
<LightGallery
plugins={[lgZoom]}
elementClassNames="custom-class-name"
onInit={onInit}
>
{getItems()}
</LightGallery>
</div>
);
}