Gallery that feels native

Plain JavaScript, no dependencies. Point it at your markup or an array of items, from npm or a CDN.

npm install lightgallery

import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';
import 'lightgallery/css/lightgallery-bundle.css';

lightGallery(document.getElementById('gallery'), {
    plugins: [lgZoom, lgThumbnail],
});

A real React component: props, children, refs and callbacks, all typed. Your state stays in React.

npm install @lightgallery/react lightgallery

import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';

<LightGallery plugins={[Zoom, Thumbnail]}>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;

v-model for the open state, slots for captions and controls, Teleport for the overlay.

npm install @lightgallery/vue lightgallery

<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Zoom from '@lightgallery/vue/plugins/zoom';
</script>

<template>
    <LightGallery :plugins="[Zoom, Thumbnail]">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>

Standalone components, signals, zoneless change detection and a CDK overlay, nothing bolted on.

npm install @lightgallery/angular @angular/cdk lightgallery

<lg-gallery [features]="[withZoom(), withThumbnail()]">
    @for (item of items; track item.src) {
        <a [lgGalleryItem]="item">
            <img [src]="item.thumb" [alt]="item.alt" />
        </a>
    }
</lg-gallery>