lightGallery React

Full featured image and video gallery 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=".." src="img/thumb1.jpg" />
                </a>
                <a href="img/img2.jpg">
                    <img alt=".." 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=".." src="img/thumb1.jpg" />
                </a>
                ...
            </LightGallery>
        </div>
    );
}

Name: onInit

Description: Called only once when lightGallery is initialized

Detail:

NameTypeDescription
instanceLightGallerylightGallery 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:

NameTypeDescription
indexnumberIndex of the slide

Name: onAfterAppendSubHtml

Description: Called when the sub-html content (ex : title/ description) has been appended into the slide.

Detail:

NameTypeDescription
indexnumberIndex of the slide

Name: onSlideItemLoad

Description: Called once the media inside the slide has been completely loaded .

Detail:

NameTypeDescription
delaynumberFirst time when an item is loaded lightGallery adds some delay for showing the completed item to show transition effect on item load Respect the delay when you use this event
indexnumberIndex of the slide

Name: onHasVideo

Description: Called when lightGallery detects video slide

Detail:

NameTypeDescription
hasPosterbooleanTrue if video has poster
html5VideoVideoSourceHTML5 video source if available

HTML5 video source = source: { src: string; type: string; }[]; attributes: HTMLVideoElement;

indexnumberIndex of the slide,
isFirstSlidebooleanTrue for first slide
srcstringVideo source

Name: onBeforeSlide

Description: Called immediately before each slide transition.

Detail:

NameTypeDescription
fromThumbbooleantrue if slide function called via thumbnail click
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide
prevIndexnumberIndex of the previous slide

Name: onAfterSlide

Description: Called immediately after each slide transition.

Detail:

NameTypeDescription
fromThumbbooleantrue if slide function called via thumbnail click
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide
prevIndexnumberIndex of the previous slide

Name: onBeforeNextSlide

Description: Called immediately before each "next" slide transition

Detail:

NameTypeDescription
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex of the slide

Name: onBeforePrevSlide

Description: Called immediately before each "prev" slide transition

Detail:

NameTypeDescription
fromTouchbooleantrue if slide function called via touch event or mouse drag
indexnumberIndex 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 sub-html content (ex : title/ description) has been appended into the slide.

Detail:

NameTypeDescription
indexnumberIndex 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:

NameTypeDescription
instanceLightGallerylightGallery plugin instance

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