Image and video gallery for React

Full featured image and video gallery lightbox component for react.

StackBlitz Demo

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.

StackBlitz Demo

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>
    );
}

Edit this page on GitHub