<!-- lightGallery documentation, generated from the same sources as the HTML pages. -->

# JavaScript image gallery, get started

> Install lightGallery with npm or a CDN and build a responsive image and video gallery in a few lines of JavaScript, no dependencies, 15 plugins.

lightGallery is a lightweight, modular, JavaScript library for creating beautiful image & video galleries for the web and the mobile.

Canonical page: https://www.lightgalleryjs.com/docs/getting-started/

## Core features

#### Packages and build

-   One gallery, four packages: `lightgallery` for plain JavaScript and
    TypeScript, plus native [React](/docs/react/), [Vue 3](/docs/vue/) and
    [Angular](/docs/angular/) packages that render their own DOM.
-   A shared [headless core](/docs/headless/) behind every package, so
    settings and behavior are identical in each stack.
-   Zero dependencies, TypeScript types, ES module and UMD builds.
    The core is about 19 KB minified and gzipped; plugins are separate
    entries and cost nothing until you import them.
-   Modular architecture with 15 built-in plugins, and an API for
    [writing your own](/docs/creating-plugins/).
-   Easily customizable via CSS (SCSS) and settings. Multiple instances
    on one page.

#### Layout and performance

-   Fully responsive, with [srcset, sizes and picture
    sources](/docs/responsive-loading/) on every slide.
-   [Justified layout](/docs/justified-layout/) plugin: row-justified
    trigger grids with no layout library in front of the lightbox.
-   [Virtualization](/docs/virtualization/) keeps a small, constant DOM
    for galleries with thousands of slides.
-   [Dynamic mode](/demos/dynamic-mode/) opens a gallery from an array
    of items, and [live updates](/demos/update-slides/) add, edit or
    remove slides while it is open.
-   Inline gallery and carousel modes.
-   Smart preloading of neighboring slides.

#### Interaction

-   Highly optimized for touch devices, with mouse drag on desktops.
-   Gesture physics: every release lands in a spring seeded with your
    gesture's velocity, flings glide, edges resist with friction.
-   Swipe, drag or pinch to close.
-   Zoom in and out, pinch to zoom, double-click or double-tap for actual
    size. Slides [open from the thumbnail's
    position](/demos/zoom-from-origin/) and close back to it.
-   Animated thumbnails, with [thumbnail
    scrubbing](/docs/thumbnail-scrubbing/) to drag through the gallery.
-   20+ hardware-accelerated CSS3 transitions, plus your own easing.
-   Keyboard navigation and full screen support.
-   A toolbar that fits: on narrow screens the lowest-priority buttons
    move into a "More options" menu.
-   [Accessibility](/docs/accessibility/): modal dialog semantics, focus
    trap, screen-reader announcements, reduced-motion support.
-   [Localization and RTL](/docs/localization-rtl/): every label is a
    setting, and the gallery mirrors for right-to-left pages.

#### Media and plugins

-   YouTube, Vimeo, Wistia and HTML5 video, with [video
    facades](/docs/video-facades/) that load the player only on play.
-   HTML iframe support and [mixed content](/demos/mixed-contents/):
    photos, videos, maps and PDFs in one gallery.
-   HTML [captions](/demos/captions/) per slide, with animated and
    relative-position variants.
-   Rotate and flip images.
-   [Sharing](/docs/web-share/) through the native share sheet where it
    exists, social links where it does not.
-   [Deep links](/docs/hash-drivers/) with browser back and forward,
    through the Navigation API or the History API.
-   Autoplay slideshow with a progress bar, pager dots, per-slide
    comments, and a [medium-zoom](/demos/medium-zoom/) plugin for
    in-page image zoom.
-   Inline SVG icons, each [replaceable by name](/docs/custom-icons/).

## Ask your coding agent

Working with a coding agent? Paste the prompt below into it and replace
the first line with the gallery you want. It points the agent at the
markdown version of these docs, so it picks the right package for your
stack and avoids the setup mistakes behind most bug reports.

<div class="agent-prompt">

```text
Add lightGallery to this project: [describe the gallery you want, for
example "a product photo grid that opens a lightbox with thumbnails and
zoom"].

1. Detect the stack and use the matching package:
   - React: @lightgallery/react
   - Vue 3: @lightgallery/vue
   - Angular: @lightgallery/angular
   - Anything else (plain JavaScript, TypeScript, server-rendered HTML):
     lightgallery
2. Before writing code, read the docs index at
   https://www.lightgalleryjs.com/llms.txt and the guide for that stack:
   - React: https://www.lightgalleryjs.com/docs/react/index.md
   - Vue: https://www.lightgalleryjs.com/docs/vue/index.md
   - Angular: https://www.lightgalleryjs.com/docs/angular/index.md
   - Plain JavaScript:
     https://www.lightgalleryjs.com/docs/getting-started/index.md
   Use the install command from that guide exactly. The framework
   packages also need the lightgallery package, which ships the CSS.
3. Import the CSS yourself: lightgallery/css/lightgallery.css plus one
   file per plugin you use, such as lightgallery/css/lg-thumbnail.css.
   The framework packages ship no styles.
4. Plugins are opt-in. Import each one from its plugins/<name> entry and
   add it to the plugins list (in Angular, the features input with
   withThumbnail(), withZoom() and so on). A plugin's settings do
   nothing until the plugin is added. Unless I ask for something else,
   include the zoom and thumbnail plugins and their CSS files.
5. Give every item the full-size image URL, a thumbnail and alt text.
   Set lgSize to "WIDTH-HEIGHT" (data-lg-size in HTML markup) on every
   image item, using the natural size of the full image; read it from
   the image files, the image optimizer or the CMS. Without it the slide
   fades in instead of opening from its thumbnail.
6. Check every option name against
   https://www.lightgalleryjs.com/docs/settings/index.md instead of
   guessing. Commercial projects also need the licenseKey setting.
7. When you are done, run the project's build or type check, open the
   gallery in a browser, and confirm the styles are applied and the
   console shows no errors.
```

</div>

## Installation

lightGallery is available on NPM, Yarn, CDNs, and GitHub. You can use any
of the following methods to download lightGallery

-   [NPM](https://www.npmjs.com/) - NPM is a package manager for the JavaScript
    programming language. You can install `lightgallery` using the following
    command

    ```sh
    npm install lightgallery
    ```

-   [YARN](https://yarnpkg.com/) - Yarn is another popular package manager for
    the JavaScript programming language. If you prefer you can use Yarn instead
    of NPM

    ```sh
    yarn add lightgallery
    ```

-   [GitHub](https://github.com/sachinchoolur/lightGallery/releases) -
    You can also download a release directly from GitHub

-   CDN - If you prefer to use a CDN, you can load files via
    [jsdelivr](https://www.jsdelivr.com/package/npm/lightgallery),
    [cdnjs](https://cdnjs.com/libraries/lightgallery) or
    [unpkg](https://unpkg.com/browse/lightgallery@latest/)

#### Include CSS and Javascript files

First of all, include lightgallery.css in the &lt;head> of the document. If you
want to include any lightGallery plugin such as thumbnails or zoom, you need to
include respective css files as well.

Alternatively you can include `lightgallery-bundle.css` which contains
lightGallery and all plugin styles instead of separate stylesheets.

If you like you can also import scss files instead of css files from the `scss`
folder.

```html
<head>
    <link type="text/css" rel="stylesheet" href="css/lightgallery.css" />

    <!-- lightgallery plugins -->
    <link type="text/css" rel="stylesheet" href="css/lg-zoom.css" />
    <link type="text/css" rel="stylesheet" href="css/lg-thumbnail.css" />


    <!-- OR -->

    <link type="text/css" rel="stylesheet" href="css/lightgallery-bundle.css" />
</head>
```

Then include `lightgallery.umd.js` into your document. If you want to include
any lightgallery plugin you can include it after `lightgallery.umd.js`.

```html
<body>
    ....

    <script src="lightgallery.umd.js"></script>
    <!-- Or use the minified version -->
    <script src="lightgallery.min.js"></script>

    <!-- lightgallery plugins -->
    <script src="plugins/thumbnail/lg-thumbnail.umd.js"></script>
    <script src="plugins/zoom/lg-zoom.umd.js"></script>
</body>
```

lightGallery supports AMD, CommonJS and ES6 modules too.

```javascript
import lightGallery from 'lightgallery';

// Plugins
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'

```

#### The markup

lightGallery does not force you to use any kind of markup. You can use whatever
markup you want. <a href="../../demos/html-markup/">Here</a> you can find
detailed examples of different kinds of markups.

Give each anchor the natural size of its full image via
`data-lg-size="${width}-${height}"`. It drives the
[zoom-from-origin](/docs/settings/#zoomFromOrigin) animation: the slide opens
from the clicked thumbnail and closes back to it. Without the attribute the
slide fades in instead.

```html
<div id="lightgallery">
    <a href="img/img1.jpg" data-lg-size="1600-2400">
        <img alt="img1" src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg" data-lg-size="1024-800">
        <img alt="img2" src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

#### Initialize lightGallery

Finally, you need to initiate the gallery by adding the following code.

```html
<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery'), {
        plugins: [lgZoom, lgThumbnail],
        licenseKey: 'your_license_key',
        speed: 500,
        // ... other settings
    });
</script>
```

#### License Key

You'll receive a license key via email once you purchase a license [More info](https://www.lightgalleryjs.com/docs/settings/#licenseKey)

#### Plugins

As shown above, you need to pass the plugins via settings if you want to use any
lightGallery plugins.

If you are including lightGallery files via script tag, please use the same
plugins names as follows.

`lgZoom`, `lgAutoplay`, `lgComment`, `lgFullscreen`, `lgHash`, `lgJustified`,
`lgPager`, `lgRelativeCaption`, `lgRotate`, `lgShare`, `lgThumbnail`, `lgVideo`,
`lgVimeoThumbnail`, `lgMediumZoom`, `lgOriginCrop`

## Browser support

lightGallery supports current evergreen browsers and iOS Safari: Chrome,
Edge, Firefox and Safari on desktop, Safari on iOS and Chrome on Android.
The builds target ES2017 and run without transpiling or polyfills.

-   **ES module and UMD builds.** Import it in a bundler, load it as a
    native `<script type="module">`, or drop the UMD file into a plain
    `<script>` tag. Nothing is module-only.
-   **Newer APIs are optional.** Features that rely on newer browser
    APIs, such as the native share sheet or observer-based relayout, are
    feature-detected and fall back cleanly where they are missing.

If something misbehaves in a browser you care about, please
[open an issue](https://github.com/sachinchoolur/lightGallery/issues)
with the browser and version.

## License

lightGallery is free and open source under the
[GPLv3](https://github.com/sachinchoolur/lightGallery/blob/HEAD/LICENSE).
Use it in any project, personal or commercial, that is distributed under
GPLv3-compatible terms.

If you want to keep your own source proprietary, choose the
[commercial license](/license/). It covers the same code with every feature
and plugin included, nothing is gated, and it is a one-time payment. The
[license docs](/docs/license/) explain which license applies and how to pass
your key.

## Support

If the gallery misbehaves, the [troubleshooting guide](/docs/troubleshooting/)
covers the symptoms behind most bug reports, with the fix for each package.

If you have any questions, suggestions, feedback, please reach out to [contact@lightgalleryjs.com](mailto:contact@lightgalleryjs.com) or DM me on [X](https://x.com/SachinNeravath)


---

# Settings and options reference

> Every lightGallery option with its type, default value and description, core settings plus all plugin settings, in one reference.

lightGallery comes with a lot of settings, events, and methods to customize the gallery without touching the core code. You can find both lightGallery core settings, and the built in plugin settings here.

Canonical page: https://www.lightgalleryjs.com/docs/settings/

## Passing settings

lightGallery accepts two parameters, an HTML element as the first parameter and
library settings as the second parameter. You need to pass settings only if you
want to modify default behaviors.

```javascript
lightGallery(document.getElementById('gallery-container'), {
    speed: 500,
    mode: 'lg-fade',
    // other settings
});
```

The same names apply in every package. In [React](/docs/react/) and
[Vue](/docs/vue/) each core setting is a prop and each plugin's settings
are one object prop named after the plugin, such as `zoom={{ scale: 1.5 }}`.
In [Angular](/docs/angular/) core settings are signal inputs and plugin
settings go to the plugin's factory, such as `withZoom({ scale: 1.5 })`.

## lightGallery core

lightGallery comes with modular architecture. All the basic functionalities are
available in the core module. You need to include plugins if you need
additional functionalities such as thumbnails, video support, zoom, etc. Here you
can find all lightGallery core settings. If you think something is missing,
please check the respective plugins settings as well.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `addClass` | `string` | `''` | Add custom class for gallery container This can be used to set different style for different galleries |
| `allowMediaOverlap` | `boolean` | `false` | If true, toolbar, captions and thumbnails will not overlap with media element This will not affect thumbnails if animateThumb is false Also, toggle thumbnails button is not displayed if allowMediaOverlap is false Note - Changing the position of the media on every slide transition creates a flickering effect. Therefore, the height of the caption is calculated dynamically, only once based on the first slide caption. if you have dynamic captions for each media, you can provide an appropriate height for the captions via defaultCaptionHeight option |
| `appendCounterTo` | `string` | `'.lg-toolbar'` | Where the counter should be appended |
| `appendSubHtmlTo` | `".lg-sub-html" \| ".lg-item" \| ".lg-outer"` | `'.lg-sub-html'` | control where the sub-html should be appended. If you choose '.lg-outer', you are responsible for placing the div at the right position. '.lg-outer' is useful if you want to show custom HTML outside the normal gallery |
| `ariaAnnouncements` | `boolean` | `true` | Announce slide changes to assistive technology through a dedicated polite live region (strings.slideAnnouncement + the slide caption). While enabled, the counter and caption bar are not separate live regions, the announcer is the single source of slide-change announcements. Set to false to restore the previous behavior (live counter and caption, no announcer). See [Accessibility](https://www.lightgalleryjs.com/docs/accessibility/). _Since V3.0.0._ |
| `ariaDescribedby` | `string` | `''` | aria-describedby attribute for gallery |
| `ariaLabelledby` | `string` | `''` | aria-labelledby attribute for gallery |
| `backdropDuration` | `number` | `300` | Backdrop transition duration. Note - Do not change the value of backdrop via css. |
| `closable` | `boolean` | `true` | If false user won't be able to close the gallery at all This is useful for creating inline galleries. |
| `closeOnTap` | `boolean` | `true` | allows clicks on black area to close gallery. |
| `container` | `null \| string \| HTMLElement \| function` | `''` | Configure where the gallery should be appended. Useful to create inline galleries and more It is an empty string in the default settings and later assigned to document.body to avoid accessing document for SSR |
| `controls` | `boolean` | `true` | If false, prev/next buttons will not be displayed. |
| `counter` | `boolean` | `true` | Whether to show total number of images and index number of currently displayed image. |
| `defaultCaptionHeight` | `number` | `0` | Height of the caption for calculating allowMediaOverlap positions Note - this is only used to find the position of media item if allowMediaOverlap is true. Not for setting height of the captions Set 0 if you want to calculate the height of captions dynamically |
| `direction` | `"ltr" \| "rtl" \| "auto"` | `'ltr'` | Gallery reading direction: keyboard arrows, swipe advance and the slide/thumbnail transforms follow it. Visual mirroring is the opt-in lg-rtl.css layer - load it whenever this resolves to 'rtl'. 'auto' inherits the computed direction of the gallery element; the default stays 'ltr' so upgrades never change behavior on existing pages. See [Localization &amp; RTL](https://www.lightgalleryjs.com/docs/localization-rtl/). _Since V3.0.0._ |
| `download` | `boolean` | `true` | Enable download button. By default download url will be taken from data-src/href attribute but it is supported only in modern browsers. If you want you can provide another url for download via data-download-url. pass false in data-download-url if you want to hide download button for the particular slide. |
| `dynamic` | `boolean` | `false` | lightGallery can be instantiated and launched programmatically by setting this option to true and populating dynamicEl option (see below) with the definitions of images. |
| `dynamicEl` | `GalleryItem[]` | `[]` | An array of objects (src, iframe, subHtml, thumb, poster, responsive, srcset sizes) representing gallery elements. |
| `easing` | `string` | `'ease'` | Slide animation CSS easing property |
| `enableDrag` | `boolean` | `true` | Enables desktop mouse drag support |
| `enableSwipe` | `boolean` | `true` | Enables swipe support for touch devices |
| `escKey` | `boolean` | `true` | Whether the lightGallery could be closed by pressing the "Esc" key. |
| `exThumbImage` | `string` | `''` | Option to fetch different thumbnail image other than first image If you want to use external image for thumbnail, add the path of that image inside "data-" attribute and set value of this option to the name of your custom attribute. |
| `extraProps` | `string[]` | `[]` | Fetch custom properties from the selector this is useful for plugin development By default lightGallery fetches and stores all the props selectors to reduce frequent dom interaction for fetching props every time. If you need any additional data to be fetched and stored in the galleryItems variable, you can do this just by passing the prop names via extraProps |
| `flickVelocity` | `number` | `0.5` | Release velocity (px/ms, measured over the gesture's final ~100ms) at which a short swipe still changes slides, a flick. _Since V3.0.0._ |
| `getCaptionFromTitleOrAlt` | `boolean` | `true` | Option to get captions from alt or title tags. |
| `height` | `string` | `'100%'` | Height of the gallery. example '100%' , '300px' |
| `hideBarsDelay` | `number` | `0` | Delay for hiding gallery controls in ms. Pass `0` if you don't want to hide the controls |
| `hideControlOnEnd` | `boolean` | `false` | If true, prev/next button will be hidden on first/last image. Note - this option will be ignored if `loop` or `slideEndAnimation` is set to true |
| `hideScrollbar` | `boolean` | `false` | Hide scrollbar when gallery is opened _Since V2.5.0._ |
| `icons` | `Partial>` | `{}` | Custom icons: SVG markup per icon name, rendered instead of the built-in SVG icon set, bring your own icons without touching CSS. Omitted names keep the built-in icon. State-pair buttons (maximize/minimize, autoplayPlay/autoplayPause, fullscreen/fullscreenExit) need both names provided; a half-provided pair keeps the built-in pair. Size and color follow the button (1em/currentColor-friendly SVGs recommended). See [Custom icons](https://www.lightgalleryjs.com/docs/custom-icons/). _Since V3.0.0._ |
| `iframeHeight` | `string` | `'100%'` | Set height for iframe. |
| `iframeMaxHeight` | `string` | `'100%'` | Set max height for iframe. |
| `iframeMaxWidth` | `string` | `'100%'` | Set max width for iframe. |
| `iframeWidth` | `string` | `'100%'` | Set width for iframe. |
| `index` | `number` | `0` | specify which slide should load initially |
| `isMobile` | `function` | `undefined` | Function to detect mobile devices |
| `keyPress` | `boolean` | `true` | Enable keyboard navigation |
| `licenseKey` | `string` | `'0000-0000-000-0000'` | License key. lightGallery is free under the GPLv3; projects that keep their source proprietary need a commercial license, and its key arrives by email. Open-source projects can request a key at [contact@lightgalleryjs.com](mailto:contact@lightgalleryjs.com). 0000-0000-000-0000 is a temporary key for evaluation: it does not limit any feature, it only logs a console warning. lightGallery 3 keys start with LIG; a key from v1 or v2 logs a warning asking you to upgrade. See [License](https://www.lightgalleryjs.com/docs/license/). |
| `loadYouTubePoster` | `boolean` | `true` | Automatically load poster image for YouTube videos |
| `loop` | `boolean` | `true` | If false, will disable the ability to loop back to the beginning of the gallery from the last slide. |
| `mobileSettings` | `Partial` | `{ controls: false, showCloseIcon: false, download: false, showGestureButtons: false, }` | Separate settings for mobile devices Note - this is applied only at the time of loading by default controls and close buttons are disabled on mobile devices. use this option if you want to enable them or change any other settings for mobile devices Note - mobileSettings does not merge default values, you need to provide all mobileSettings including default values |
| `mode` | `"lg-slide" \| "lg-fade" \| "lg-zoom-in" \| "lg-zoom-in-big" \| "lg-zoom-out" \| "lg-zoom-out-big" \| "lg-zoom-out-in" \| "lg-zoom-in-out" \| "lg-soft-zoom" \| "lg-scale-up" \| "lg-slide-circular" \| "lg-slide-circular-vertical" \| "lg-slide-vertical" \| "lg-slide-vertical-growth" \| "lg-slide-skew-only" \| "lg-slide-skew-only-rev" \| "lg-slide-skew-only-y" \| "lg-slide-skew-only-y-rev" \| "lg-slide-skew" \| "lg-slide-skew-rev" \| "lg-slide-skew-cross" \| "lg-slide-skew-cross-rev" \| "lg-slide-skew-ver" \| "lg-slide-skew-ver-rev" \| "lg-slide-skew-ver-cross" \| "lg-slide-skew-ver-cross-rev" \| "lg-lollipop" \| "lg-lollipop-rev" \| "lg-rotate" \| "lg-rotate-rev" \| "lg-tube"` | `'lg-slide'` | Type of transition between images. |
| `mousewheel` | `boolean` | `false` | ability to navigate to next/prev slides on mousewheel |
| `nextHtml` | `string` | `''` | Custom html for next control |
| `numberOfSlideItemsInDom` | `number` | `10` | Control how many slide items should be kept in dom at a time To improve performance by reducing number of gallery items in the dom, lightGallery keeps only the lowest possible number of slides in the dom at a time. This has a minimum value of 3 |
| `pinchToClose` | `boolean` | `true` | Pinching down on an un-zoomed image and releasing closes the gallery (iOS Photos). Guarded: a pinch that went past fit zoom at any point is a zoom correction and never closes. Requires closable and the zoom plugin. _Since V3.0.0._ |
| `plugins` | `function[]` | `[]` | The plugins to enable for this gallery, as the constructors exported by each plugin entry, for example [lgZoom, lgThumbnail]. A plugin's settings do nothing until the plugin is listed here. See [Plugins](https://www.lightgalleryjs.com/docs/getting-started/#plugins). |
| `preload` | `number` | `2` | number of preload slides will execute only after the current slide is fully loaded. for example, if you click on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded. |
| `prevHtml` | `string` | `''` | Custom html for prev control |
| `resetScrollPosition` | `boolean` | `true` | Reset to previous scrollPosition when lightGallery is closed By default, lightGallery doesn't hide the scrollbar for a smooth opening transition. If a user changes the scroll position, lightGallery resets it to the previous value _Since V2.5.0._ |
| `selector` | `string \| HTMLCollection[]` | `''` | Custom selector property instead of direct children. Based on your markup structure, you can specify custom selectors to fetch media data for the gallery Pass "this" to select same element You can also pass HTMLCollection directly Example - '.my-selector' \| '#my-selector' \| this \| document.querySelectorAll('.my-selector') |
| `selectWithin` | `string` | `''` | By default the selector element is relative to the current gallery. Instead of that you can tell lightGallery to select element relative to another element. Example - '.my-selector-container' \| '#my-selector-container' In the code this becomes selector = document.querySelector(this.s.selectWithin).querySelectorAll(this.s.selector); |
| `showBarsAfter` | `number` | `10000` | Delay in hiding controls for the first time when gallery is opened |
| `showCloseIcon` | `boolean` | `true` | If false, close button won't be displayed. Useful for creating inline galleries. |
| `showGestureButtons` | `boolean` | `true` | Show the toolbar buttons that repeat a touch gesture. Zoom in, zoom out and actual size do what pinch and double-tap already do. On by default, and turned off on touch devices through mobileSettings. See [showGestureButtons](https://www.lightgalleryjs.com/docs/settings/#showGestureButtons). _Since V3.0.0._ |
| `showMaximizeIcon` | `boolean` | `false` | Show maximize icon. Useful for creating inline galleries. |
| `slideDelay` | `number` | `0` | Delay slide transitions. This is useful if you want to do any action in the current slide before moving to next slide. For example, fading out the captions before going to next slide. `.lg-slide-progress` class name is added to the current slide immediately after calling the slide method. But transition begins only after the delay |
| `slideEndAnimation` | `boolean` | `true` | Enable slideEnd animation |
| `speed` | `number` | `400` | Transition duration (in ms). |
| `startAnimationDuration` | `number` | `400` | Zoom from image animation duration |
| `startClass` | `string` | `'lg-start-zoom'` | Start animation class for the gallery. startClass will be empty if zoomFromOrigin is true. This can be used to change the starting effect when the image is loaded This is also applied when navigating to new slides |
| `strings` | `LightGalleryCoreStrings` | `{ closeGallery: 'Close gallery', toggleMaximize: 'Toggle maximize', previousSlide: 'Previous slide', nextSlide: 'Next slide', download: 'Download', playVideo: 'Play video', mediaLoadingFailed: 'Oops... Failed to load content...', galleryLabel: 'Gallery', slideAnnouncement: 'Image {index} of {total}', moreOptions: 'More options', share: 'Share', toggleThumbnails: 'Toggle thumbnails', toggleAutoplay: 'Toggle Autoplay', toggleFullscreen: 'Toggle Fullscreen', zoomIn: 'Zoom in', zoomOut: 'Zoom out', viewActualSize: 'View actual size', rotateLeft: 'Rotate left', rotateRight: 'Rotate right', flipHorizontal: 'Flip horizontal', flipVertical: 'Flip vertical', toggleComments: 'Toggle Comments', }` | Customize strings. This can be useful if you want to localize the lightGallery strings to other languages. Use your own service to translate the strings and pass it via settings.strings Every core and plugin label lives here; the per-plugin *PluginStrings objects are deprecated. Strings merge per-key over the defaults, override only the keys you need (the old provide-everything requirement is gone). See [Localization &amp; RTL](https://www.lightgalleryjs.com/docs/localization-rtl/). _Since V3.0.0._ |
| `subHtmlSelectorRelative` | `boolean` | `false` | Set to true if the selector in "data-sub-html" should use the current item as its origin. |
| `swipeThreshold` | `number` | `50` | By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image. |
| `swipeToClose` | `boolean` | `true` | allows vertical drag/swipe to close gallery `false` if option `closable` is `false` |
| `toolbarOverflow` | `boolean` | `true` | Keep the toolbar on one row. When the toolbar buttons do not fit beside the counter, the lowest-priority ones move into a "More options" menu. Set to false to let the buttons wrap onto a second row instead. See [toolbarOverflow](https://www.lightgalleryjs.com/docs/settings/#toolbarOverflow). _Since V3.0.0._ |
| `trapFocus` | `boolean` | `true` | Trap focus within the lightGallery _Since V2.5.0._ |
| `videoMaxSize` | `string` | `'1280-720'` | Video max size. This can be over-written by passing specific size via data-lg-size attribute Recommended video resolution and aspect ratios [https://support.google.com/youtube/answer/6375112](https://support.google.com/youtube/answer/6375112) |
| `virtualization` | `VirtualizationSettings` |  | Large-gallery virtualization. Off when undefined, the classic behavior: every thumbnail renders and the mounted-slide window is numberOfSlideItemsInDom. slides overrides the mounted-slide pool size; thumbs turns on thumbnail-strip windowing (only the visible thumbs plus an overscan render, with spacers preserving the strip geometry), a number is the overscan thumb count per side, 'auto' derives one extra viewport per side. The window advances at commit points (release, slide change, resize), never per pointer move. See [Virtualization](https://www.lightgalleryjs.com/docs/virtualization/). _Since V3.0.0._ |
| `width` | `string` | `'100%'` | Width of the gallery. example '100%' , '300px' |
| `zoomFromOrigin` | `boolean` | `true` | Enable zoom from origin effect. You need to know the original image size upfront and provide it via data-lg-size attribute as `data-lg-size="1920-1280"` If you don't know the size of a few images in the list, you can skip the data-lg-size attribute for the particular slides, lightGallery will show the default animation if data-lg-size is not available If you are using responsive images, you can pass a comma separated list of sizes combined with a max-width (up to what size the particular image should be used) example - data-lg-size="240-160-375, 400-267-480, 1600-1067" data-responsive="img-240.jpg 375, img-400.jpg 480" data-src="img-1600.jpg" In the above example, up to 375 width img-240.jpg and lg-size 240-160 will be used. Similarly, up to 480 pixel width size 400-267 and img-400.jpg will be used And above 480, lg-size 1600-1067 and img-1600.jpg will be used When the gallery closes on a slide that has no thumbnail to return to (the trigger is hidden or collapsed, as with the overflow items behind a "+9 photos" tile, it has no data-lg-size, or the gallery is dynamic), the slide shrinks to the centre of the stage and fades out instead of flying to the thumbnail. At the moment, the zoomFromOrigin option is supported only for image slides. The opening flight is skipped if dynamic option is enabled or galleryID found in the URL. startClass will be empty if zoomFromOrigin is true to avoid css conflicts. |

## Zoom plugin

lightGallery zoom plugins enable functionalities like pinch to zoom, double-tap,
or double click to see the actual size, zoom in, zoom out, and more.

> Plugin dependency: include the Zoom plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `actualSize` | `boolean` | `true` | Enable actual size icon. |
| `actualSizeIcons` | `ActualSizeIcons` | `{ zoomIn: 'lg-zoom-in', zoomOut: 'lg-zoom-out', }` | Actual size icons classnames. Specify classnames for both ZoomIn and ZoomOut states You can use actualSizeIcons: { zoomIn: 'lg-actual-size', zoomOut: 'lg-zoom-out' } to show actual size icons instead of zoom in and zoom out icons. |
| `enableZoomAfter` | `number` | `300` | Once the slide transition is completed, how much time the zoom plugin should take to activate Some css styles will be added to the images if zoom is enabled. So it might conflict if you add any custom styles to the images such as the initial transition while opening the gallery. So you can delay adding zoom related styles to the images by changing the value of enableZoomAfter. |
| `infiniteZoom` | `boolean` | `true` | Enable/Disable infinite zoom If you set this to true, you can zoom in more than the original size of the image. |
| `scale` | `number` | `1` | Value by which zoom should be incremented/decremented |
| `showZoomInOutIcons` | `boolean` | `false` | Show zoom in, zoom out icons |
| `zoom` | `boolean` | `true` | Enable/Disable zoom option |
| `zoomPluginStrings` | `Partial` |  | Custom translation strings for aria-labels _Deprecated: Set these labels on the core strings object instead, every user-facing string lives in that one contract. An explicitly set key here still wins (alias)._ |

## Thumbnails plugin

The thumbnails plugin adds the thumbnail strip to your gallery. It supports
animated thumbnails, thumbnail scrubbing, and loads thumbnails for YouTube
videos automatically.

> Plugin dependency: include the Thumbnails plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `alignThumbnails` | `"left" \| "middle" \| "right"` | `'middle'` | Position of thumbnails when the width of all thumbnails combined is less than the gallery's width. |
| `animateThumb` | `boolean` | `true` | Enable thumbnail animation. |
| `appendThumbnailsTo` | `".lg-outer" \| ".lg-components"` | `'.lg-components'` | control where the thumbnails should be appended. By default, thumbnails are appended to '.lg-components' which has inbuilt open close transitions If you don't want initial thumbnails transitions, or want to do more customization, you can append thumbnails to the lightGallery outer div - [Demo](https://www.lightgalleryjs.com/demos/thumbnails/#static-thumbnails) |
| `currentPagerPosition` | `"left" \| "middle" \| "right"` | `'middle'` | Position of selected thumbnail. |
| `enableThumbDrag` | `boolean` | `true` | Enables desktop mouse drag support for thumbnails. |
| `enableThumbSwipe` | `boolean` | `true` | Enables thumbnail touch/swipe support for touch devices |
| `loadYouTubeThumbnail` | `boolean` | `true` | You can automatically load thumbnails for YouTube videos from YouTube by setting loadYouTubeThumbnail true |
| `scrubThumbnails` | `boolean` | `false` | Scrub the gallery with the thumbnail strip: while the strip is dragged (or gliding after a fling), the slide under the strip's travel position becomes current immediately, without slide transitions, the strip works like a scrubber instead of an independent scroll area. The full strip travel spans the whole gallery, so the first and last slides are always reachable. Requires animateThumb; taps still navigate normally. See [Thumbnail scrubbing](https://www.lightgalleryjs.com/docs/thumbnail-scrubbing/). _Since V3.0.0._ |
| `thumbHeight` | `string` | `'80px'` | Height of each thumbnail. |
| `thumbMargin` | `number` | `5` | Spacing between each thumbnail |
| `thumbnail` | `boolean` | `true` | Enable thumbnails for the gallery |
| `thumbnailPluginStrings` | `Partial` |  | Custom translation strings for aria-labels _Deprecated: Set these labels on the core strings object instead, every user-facing string lives in that one contract. An explicitly set key here still wins (alias)._ |
| `thumbnailSwipeThreshold` | `number` | `10` | By setting the thumbnailSwipeThreshold (in px) you can set how far the user must swipe for the next/prev slide. |
| `thumbWidth` | `number` | `100` | Width of each thumbnail. |
| `toggleThumb` | `boolean` | `false` | Enable toggle captions and thumbnails. not applicable if allowMediaOverlap is false |
| `youTubeThumbSize` | `number` | `1` | You can specify the thumbnail size by setting respective number. |

## Justified layout plugin

Justified layout plugin arranges the gallery's trigger thumbnails in rows of
equal height and varying widths that fill the container edge to edge. See the
[justified layout guide](/docs/justified-layout/) for usage across all
frameworks.
<span class="badge rounded-pill bg-danger font-12" title="Available since version 3.0.0">v3.0.0</span>

> Plugin dependency: include the Justified layout plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `justified` | `boolean` | `true` | Enable the justified layout for the gallery's trigger thumbnails: rows of equal height and varying widths that fill the container edge to edge. Inline galleries only, dynamic mode has no trigger grid to lay out. Each box shows as a placeholder and its thumbnail fades in once loaded; put class="lg-justified" on the container markup so nothing shows unorganized before the script runs. See [Justified layout](https://www.lightgalleryjs.com/docs/justified-layout/). _Since V3.0.0._ |
| `justifiedGap` | `number` | `8` | Gap between thumbnails and between rows (px). _Since V3.0.0._ |
| `justifiedLastRow` | `"justify" \| "start" \| "hide"` | `'start'` | Last-row policy: 'justify' scales the leftover row to fill the width like every other row, 'start' keeps the row height aligned to the reading start, 'hide' hides the leftover thumbnails. _Since V3.0.0._ |
| `justifiedMaxScale` | `number` | `1.75` | Row-height clamp as a multiple of justifiedRowHeight, a sparse row never renders taller than this. _Since V3.0.0._ |
| `justifiedReveal` | `"image" \| "row"` | `'row'` | How thumbnails appear as they load: 'row' reveals whole rows top to bottom, each once every thumbnail in it has loaded; 'image' reveals each thumbnail on its own as soon as it has loaded. Until a thumbnail is revealed its box shows as a placeholder. See [Justified layout](https://www.lightgalleryjs.com/docs/justified-layout/). _Since V3.0.0._ |
| `justifiedRowHeight` | `number` | `180` | Row height (px) the layout aims for; actual rows land as close to it as the aspect ratios allow. _Since V3.0.0._ |

## Video plugin

Video plugin is required to display videos in lightGallery. Video plugin
supports YouTube, Vimeo, Wistia and HTML5 videos.

> **Player scripts** - Vimeo and Wistia player control (automatic play and pause, moving to the next slide when a video ends) needs each provider's player script. The plugin loads [player.js](https://github.com/vimeo/player.js/) and the [Wistia player API](https://wistia.com/support/developers/player-api) on demand the first time a video plays, so there is nothing to include yourself.

> Plugin dependency: include the Video plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `autoplayFirstVideo` | `boolean` | `true` | Enable/Disable first video autoplay. Autoplay has to be managed using this setting. Autoplay in PlayerParams doesn't have any effect. |
| `autoplayVideoOnSlide` | `boolean` | `false` | Autoplay video on slide change Make sure you set preload:"none" |
| `gotoNextSlideOnVideoEnd` | `boolean` | `true` | Go to next slide when video is ended Note - this doesn't work with YouTube videos at the moment |
| `videoFacade` | `boolean` | `true` | Render provider video slides (YouTube/Vimeo/Wistia) as lite facades: a poster with a play button, with the provider iframe created only when the user presses play. The facade poster falls back from the item poster to the YouTube thumbnail endpoint (see loadYouTubePoster) to the item thumb; a slide with no resolvable poster keeps the previous eager-iframe behavior. Note autoplayFirstVideo/autoplayVideoOnSlide force an immediate materialize by design. Set false for 2.x eager-iframe behavior on all provider slides. See [Video facades](https://www.lightgalleryjs.com/docs/video-facades/). _Since V3.0.0._ |
| `videojs` | `boolean` | `false` | Enable videojs custom video player **Dependency** - You need to include [videoJs](https://videojs.com/) on your document to enable videojs player |
| `videojsOptions` | `any` | `{}` | Videojs player options |
| `videojsTheme` | `string` | `''` | Class name of the videojs theme You need to include the theme stylesheet on your document. [More info](https://videojs.com/getting-started/#home-page-themes) _Since V2.5.0._ |
| `vimeoPlayerParams` | `PlayerParams` | `false` | Change Vimeo player parameters. You can find the list of vimeo player parameters from the following link [Vimeo player parameters](https://developer.vimeo.com/player/embedding#universal-parameters) |
| `wistiaPlayerParams` | `any` | `false` | Change Wistia player parameters. You can find the list of Wistia player parameters from the following link [Wistia player parameters](https://wistia.com/support/developers/embed-options#using-embed-options) |
| `youTubeNoCookie` | `boolean` | `true` | Embed YouTube videos through the privacy-enhanced youtube-nocookie.com host. Set false to embed through youtube.com instead. Slide URLs that already point at youtube-nocookie.com always keep it. See [Video facades](https://www.lightgalleryjs.com/docs/video-facades/). _Since V3.0.0._ |
| `youTubePlayerParams` | `any` | `false` | Change YouTube player parameters. You can find the list of YouTube player parameters from the following link [YouTube player parameters](https://developers.google.com/youtube/player_parameters) |

## Hash plugin

lightGallery hash plugin lets you provide custom unique URLs for each gallery
image. This link can be used to share media anywhere on the web. It allows you
to navigate to different slides via browser back/forward buttons too.

> Plugin dependency: include the Hash plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `customSlideName` | `boolean` | `false` | Custom slide name to use in the url when hash plugin is enabled |
| `galleryId` | `string` | `'1'` | Unique id for each gallery. It is mandatory when you use hash plugin for multiple galleries on the same page. |
| `hash` | `boolean` | `true` | Enable/Disable hash option |
| `hashDriver` | `HashDriverPreference` | `'auto'` | URL engine behind the hash syncing. 'auto' uses the Navigation API where the browser supports it and falls back to the History API everywhere else; 'history' and 'navigation' force an engine (an unsupported 'navigation' quietly falls back, the enhancement is never load-bearing). The deep-link URL format is identical either way. See [Hash drivers](https://www.lightgalleryjs.com/docs/hash-drivers/). _Since V3.0.0._ |

## Autoplay plugin

lightGallery autoplay plugin supports automatic slideshow which can be stopped
on the first user action. It supports progress bar that indicates the duration
of the current slide. After the last slide the slideshow continues from the
first; see [stopping autoplay at the end](/docs/troubleshooting/#autoplay-restarts-from-the-first-slide-instead-of-stopping).

> Plugin dependency: include the Autoplay plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `appendAutoplayControlsTo` | `string` | `'.lg-toolbar'` | Specify where the autoplay controls should be appended. |
| `autoplay` | `boolean` | `true` | Enable autoplay plugin |
| `autoplayControls` | `boolean` | `true` | Show/hide autoplay controls. |
| `autoplayPluginStrings` | `Partial` |  | Custom translation strings for aria-labels _Deprecated: Set these labels on the core strings object instead, every user-facing string lives in that one contract. An explicitly set key here still wins (alias)._ |
| `forceSlideShowAutoplay` | `boolean` | `false` | If false autoplay will be stopped after first user action |
| `progressBar` | `boolean` | `true` | Show autoplay progressBar |
| `slideShowAutoplay` | `boolean` | `false` | Enable slideshow autoplay |
| `slideShowInterval` | `number` | `5000` | The time (in ms) between each auto transition. The countdown starts once the slide on screen has loaded, so a slow connection never advances past an image before it is visible. |

## Rotate plugin

The rotate plugin adds rotate clockwise, rotate anticlockwise, flip horizontal
and flip vertical, each with a single click.

> Plugin dependency: include the Rotate plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `flipHorizontal` | `boolean` | `true` | Enable flip horizontal. |
| `flipVertical` | `boolean` | `true` | Enable flip vertical. |
| `rotate` | `boolean` | `true` | Enable/Disable rotate option |
| `rotateLeft` | `boolean` | `true` | Enable rotate left. |
| `rotatePluginStrings` | `Partial` |  | Custom translation strings for aria-labels _Deprecated: Set these labels on the core strings object instead, every user-facing string lives in that one contract. An explicitly set key here still wins (alias)._ |
| `rotateRight` | `boolean` | `true` | Enable rotate right. |
| `rotateSpeed` | `number` | `400` | Rotate speed in milliseconds |

## Share plugin

lightGallery share plugin allows you to share your images/videos to social media
platforms such as X (Twitter) or Facebook with unique url. It supports adding your
own social share button too.

> Plugin dependency: include the Share plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `additionalShareOptions` | `ShareOption[]` | `[]` | Array of additional share options This can be used to build additional share options. [Demo](https://www.lightgalleryjs.com/demos/share/) |
| `facebook` | `boolean` | `true` | Enable Facebook share. |
| `facebookDropdownText` | `string` | `'Facebook'` | Facebook dropdown text. |
| `pinterest` | `boolean` | `true` | Enable Pinterest share. |
| `pinterestDropdownText` | `string` | `'Pinterest'` | Pinterest dropdown text. |
| `preferNativeShare` | `boolean` |  | Prefer the OS share sheet (navigator.share) over the dropdown menu when the browser supports it. The share button then opens the native sheet with the slide's URL (per-item shareUrl, falling back to the network share URLs, then the page URL); the dropdown remains as the automatic fallback. URL-sharing only, the image file itself is never attached. Defaults to true on touch devices and false on desktop, where the branded dropdown is kept for consistency. See [Web Share](https://www.lightgalleryjs.com/docs/web-share/). _Since V3.0.0._ |
| `share` | `boolean` | `true` | Enable/Disable share options |
| `sharePluginStrings` | `Partial` |  | Custom translation strings for aria-labels _Deprecated: Set these labels on the core strings object instead, every user-facing string lives in that one contract. An explicitly set key here still wins (alias)._ |
| `twitter` | `boolean` | `true` | Enable Twitter share. |
| `twitterDropdownText` | `string` | `'X'` | Twitter dropdown text. |

## Pager plugin

If you prefer minimal layouts, you can opt pagers plugin instead of thumbnails
using the pager plugin. Pagers create minimal graphics that represent each
slide, and hovering over each pager item, shows the correspondent thumbnails.

> Plugin dependency: include the Pager plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `pager` | `boolean` | `true` | Enable/Disable pager option |

## FullScreen plugin

The fullscreen plugin uses the browser's native fullscreen API. You can toggle
fullscreen with one click.

> Plugin dependency: include the FullScreen plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `fullScreen` | `boolean` | `true` | Enable/Disable fullscreen option |
| `fullscreenPluginStrings` | `Partial` |  | Custom translation strings for aria-labels _Deprecated: Set these labels on the core strings object instead, every user-facing string lives in that one contract. An explicitly set key here still wins (alias)._ |

## Comment box plugin

The comment plugin supports Facebook and Disqus comments out of the box, so
people can comment on slides with their Facebook or Disqus accounts. You can
add your own comment widget as well.

> Plugin dependency: include the Comment box plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `commentBox` | `boolean` | `false` | Enable comment box |
| `commentPluginStrings` | `Partial` |  | Custom translation strings for aria-labels _Deprecated: Set these labels on the core strings object instead, every user-facing string lives in that one contract. An explicitly set key here still wins (alias)._ |
| `commentsMarkup` | `string` | `'Leave a comment.'` | Facebook comments default markup |
| `disqusComments` | `boolean` | `false` | Enable Disqus comment box |
| `disqusConfig` | `function` | `{ title: undefined, language: 'en', }` | Disqus comment config |
| `fbComments` | `boolean` | `false` | Enable Facebook comment box |

## Medium zoom plugin

The medium zoom plugin opens an image in place with a minimal interface, the
zooming experience seen on Medium: no toolbar, no thumbnails, and a click
closes it again.

> Plugin dependency: include the Medium zoom plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `backgroundColor` | `string` | `'#000'` | Background color for the gallery This can be overwritten by passing background color via data-lg-background-color for each item |
| `margin` | `number` | `40` | Space between the gallery outer area and images |
| `mediumZoom` | `boolean` | `true` | Enable/Disable medium like zoom experience |

## Vimeo thumbnails plugin

The Vimeo thumbnails plugin loads thumbnails for Vimeo videos automatically.

> Plugin dependency: include the Vimeo Thumbnails plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `showThumbnailWithPlayButton` | `boolean` | `false` | Show thumbnails with play button |
| `showVimeoThumbnails` | `boolean` | `true` | Auto load thumbnails for Vimeo videos |

## Relative caption plugin

The relative caption plugin places each caption relative to its image instead
of at the bottom of the gallery.

> Plugin dependency: include the Relative caption plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `relativeCaption` | `boolean` | `false` | Enable/Disable relative captions |

## Origin crop plugin

Origin crop plugin flies the zoom-from-origin animation from a cropped
thumbnail's crop, so a cover-fitted grid tile grows into the full photo
instead of being squashed into its box.
<span class="badge rounded-pill bg-danger font-12" title="Available since version 3.0.0">v3.0.0</span>

> Plugin dependency: include the Origin crop plugin to use these options.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `originCrop` | `boolean` | `true` | Enable/Disable the origin crop plugin: zoom-from-origin flights from cropped thumbnails (`object-fit: cover`, `background-size: cover`) start from the part of the image the thumbnail shows, at a uniform scale, and reveal the rest around it. See [Zoom from origin](https://www.lightgalleryjs.com/demos/zoom-from-origin/). _Since V3.0.0._ |


---

# Events

> Every lightGallery event, from open to close, with the detail object each one carries, and how the same events surface as callbacks in React, Vue and Angular.

lightGallery emits several custom events throughout the gallery lifecycle. This can be used to customize the gallery or to add your own features. [Demo](https://www.lightgalleryjs.com/demos/events/)

Canonical page: https://www.lightgalleryjs.com/docs/events/

## Usage example

lightGallery custom events can be attached to the HTML element that you are
using to initialize the gallery. Every custom event holds useful plugin data
that can be used to control or customize lightGallery. Make sure that you attach
event listeners before initializing lightGallery.

```javascript
const lg = document.getElementById('custom-events-demo');

// Perform any action just before opening the gallery
lg.addEventListener('lgBeforeOpen', () => {
    alert('onBeforeOpen');
});

// custom event with useful plugin data
lg.addEventListener('lgBeforeSlide', (event) => {
    const { index, prevIndex } = event.detail;
    console.log(index, prevIndex);
});

lightGallery(lg);
```

The framework packages expose the same events, with the same detail
object as the callback argument, under their own naming rule. In
[React](/docs/react/) each event is a callback prop with an `on` prefix,
`onBeforeSlide={(detail) => …}`. In [Vue](/docs/vue/) it is a kebab-case
emit without the prefix, `@before-slide="onSlide"`. In
[Angular](/docs/angular/) it is an output without the prefix,
`(beforeSlide)="onSlide($event)"`.

## Available custom events

Here you can find the list of available custom events. Most of the events
provide useful lightGallery data via the event detail object. The table in each
event section represents the event detail object.

### `lgInit`

Fired only once when lightGallery is initialized

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `instance` | `LightGallery` | The gallery instance, the same object lightGallery() returns. |

**Example**

```js
const lg = document.getElementById('custom-events-demo');
  // Perform any action on lightGallery initialization.
  // Init event returns the plugin instance that can be used to call any lightGallery public method
  let pluginInstance = null;
  lg.addEventListener('lgInit', (event) => {
     pluginInstance = event.detail.instance;
  });
  lightGallery(lg);
```

See also: [Methods](https://www.lightgalleryjs.com/docs/methods/)
### `lgBeforeOpen`

Fired immediately before opening the gallery
### `lgAfterOpen`

Fired immediately after opening the gallery
### `lgAfterAppendSlide`

Fired when the slide content has been inserted into its slide container.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `lgAfterAppendSubHtml`

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

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `lgSlideItemLoad`

Fired once the media inside the slide has been completely loaded, or has failed to load and the slide shows its error message instead.

**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` | True when the loaded slide is the first one shown after the gallery opened. |
### `lgHasVideo`

Fired 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 |
### `lgBeforeSlide`

Fired 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 |

**Example**

```js
const lg = document.getElementById('custom-events-demo');
  // Perform any action before each slide transition
  lg.addEventListener('lgBeforeSlide', (event) => {
      const { index, prevIndex } = event.detail;
      alert(index, prevIndex);
  });
  lightGallery(lg);
```
### `lgAfterSlide`

Fired 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 |
### `lgBeforeNextSlide`

Fired 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 |
### `lgBeforePrevSlide`

Fired 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 |
### `lgPosterClick`

Fired when the video poster is clicked.
### `lgDragStart`

Fired when the drag event to move to different slide starts.
### `lgDragMove`

Fired periodically during the drag operation.
### `lgDragEnd`

Fired when the user has finished the drag operation
### `lgContainerResize`

Fired when the lightGallery container has been resized.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `lgBeforeClose`

Fired immediately before the start of the close process.
### `lgAfterClose`

Fired immediately once lightGallery is closed.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `instance` | `LightGallery` | The gallery instance, the same object lightGallery() returns. |
### `lgRotateLeft`

Fired when the image is rotated in anticlockwise direction

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `lgRotateRight`

Fired when the image is rotated in clockwise direction

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `lgFlipHorizontal`

Fired when the image is flipped horizontally

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `lgFlipVertical`

Fired when the image is flipped vertically

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |

## More events

These events have no detail interface of their own:

| Event | Fires | Detail |
| --- | --- | --- |
| `lgUpdateSlides` | After the slides change, through `updateSlides()` or `refresh()` | none |
| `lgAutoplayStart` | When the autoplay slideshow starts (autoplay plugin) | `{ index }` |
| `lgAutoplay` | Before autoplay moves to the next slide (autoplay plugin) | `{ index }`, the slide it moves to |
| `lgAutoplayStop` | When the autoplay slideshow stops (autoplay plugin) | `{ index }` |


---

# Methods

> Every public method on a lightGallery instance, with parameters and examples, and the matching handle methods in React, Vue and Angular.

Call methods on the gallery instance to open, close, move between slides or update the gallery from your own code. [Demo](https://www.lightgalleryjs.com/demos/methods/)

Canonical page: https://www.lightgalleryjs.com/docs/methods/

## Access the gallery instance

`lightGallery()` returns the gallery instance. Keep the reference and call
its methods when you need them:

```javascript
const gallery = lightGallery(document.getElementById('lg-method-demo'));

// Go to the third slide. Indexes start from 0.
gallery.slide(2);
```

The `lgInit` event carries the same instance in its detail, which is useful
when another part of your code initializes the gallery:

```javascript
const el = document.getElementById('lg-method-demo');

el.addEventListener('lgInit', (event) => {
    const gallery = event.detail.instance;
    gallery.openGallery(0);
});

lightGallery(el);
```

## In React, Vue and Angular

The framework packages expose the same actions through a handle: a `ref` in
[React](/docs/react/), a template ref in [Vue](/docs/vue/) and a
`#lg="lgGallery"` template reference in [Angular](/docs/angular/).

| Vanilla method | Handle method |
| --- | --- |
| `openGallery(index?)` | `openGallery(index?)` |
| `closeGallery()` | `closeGallery()` |
| `slide(index)` | `goToSlide(index)` |
| `goToNextSlide()` | `nextSlide()` |
| `goToPrevSlide()` | `prevSlide()` |
| `refresh()` | `refresh()` |

`updateSlides()` and `destroy()` have no handle equivalent: rendering a
different `slides` array is the update, and unmounting the component is the
destroy.

## Available public methods

Here you can find the list of available public methods. Not all methods are
exposed, please open an issue if you think you need access to more public
methods.

### `closeGallery()`

Close lightGallery if it is opened.

If closable is false in the settings, you need to pass true via closeGallery method to force close gallery

```js
const plugin = lightGallery();
 plugin.closeGallery();
```

### `destroy()`

Destroy lightGallery. Destroy lightGallery and its plugin instances completely

This method also calls closeGallery function internally. Returns the time it takes to completely close and destroy the instance. In case if you want to re-initialize lightGallery right after destroying it, initialize it only once the destroy process is completed. You can use refresh method most of the time.

```js
const plugin = lightGallery();
 plugin.destroy();
```

### `goToNextSlide()`

Go to next slide

```js
const plugin = lightGallery();
 plugin.goToNextSlide();
```

### `goToPrevSlide()`

Go to previous slide

```js
const plugin = lightGallery({});
 plugin.goToPrevSlide();
```

### `openGallery()`

Open lightGallery. Open gallery with specific slide by passing index of the slide as parameter.

```js
const $dynamicGallery = document.getElementById('dynamic-gallery-demo');
const dynamicGallery = lightGallery($dynamicGallery, {
    dynamic: true,
    dynamicEl: [
        {
             src: 'img/1.jpg',
             thumb: 'img/thumb-1.jpg',
             subHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>',
        },
        ...
    ],
});
$dynamicGallery.addEventListener('click', function () {
    // Starts with third item.(Optional).
    // This is useful if you want use dynamic mode with
    // custom thumbnails (thumbnails outside gallery),
    dynamicGallery.openGallery(2);
});
```

### `refresh()`

Refresh lightGallery with new set of children.

This is useful to update the gallery when the child elements are changed without calling destroy method. If you are using dynamic mode, you can pass the modified array of dynamicEl as the first parameter to refresh the dynamic gallery

```js
const plugin = lightGallery();
 // Delete or add children, then call
 plugin.refresh();
```

### `slide()`

Goto a specific slide.

```js
const plugin = lightGallery();
 // to go to 3rd slide
 plugin.slide(2);
```

### `updateSlides()`

Update slides dynamically. Add, edit or delete slides dynamically when lightGallery is opened. Modify the current gallery items and pass it via updateSlides method

```js
const plugin = lightGallery();

// Adding slides dynamically
let galleryItems = [
// Access existing lightGallery items
// galleryItems are automatically generated internally from the gallery HTML markup
// or directly from galleryItems when dynamic gallery is used
  ...plugin.galleryItems,
    ...[
      {
        src: 'img/img-1.png',
          thumb: 'img/thumb1.png',
        },
    ],
  ];
  plugin.updateSlides(
    galleryItems,
    plugin.index,
  );

// Remove slides dynamically
galleryItems = JSON.parse(
  JSON.stringify(plugin.galleryItems),
);
galleryItems.shift();
plugin.updateSlides(galleryItems, 1);
```


---

# Dynamic variables

> Every field a lightGallery item can carry in dynamic mode, from src and thumb to captions, video, download and share URLs, with the matching data attributes.

In dynamic mode you build the gallery from data instead of markup: set the dynamic option and pass an array of item objects as dynamicEl. The fields below are the ones each item can carry. [Demo](https://www.lightgalleryjs.com/demos/dynamic-mode/)

Canonical page: https://www.lightgalleryjs.com/docs/dynamic-variables/

## Passing items

Each item is a plain object. Only `src` is required; the other fields
switch on captions, video, downloads and sharing per slide.

```javascript
const gallery = lightGallery(document.getElementById('dynamic-gallery'), {
    dynamic: true,
    dynamicEl: [
        {
            src: 'img/1.jpg',
            thumb: 'img/thumb-1.jpg',
            subHtml: '<h4>Image 1</h4><p>Description of image 1.</p>',
        },
        {
            src: 'img/2.jpg',
            thumb: 'img/thumb-2.jpg',
            subHtml: '<h4>Image 2</h4>',
        },
    ],
});

// Open at the second slide.
gallery.openGallery(1);
```

A dynamic gallery has no trigger markup, so the zoom-from-origin animation
needs two things from you: the media size on the item as `lgSize`, and the
element the slide should grow out of as the second argument of
`openGallery`:

```javascript
const gallery = lightGallery(document.getElementById('dynamic-gallery'), {
    dynamic: true,
    dynamicEl: [
        { src: 'img/1.jpg', thumb: 'img/thumb-1.jpg', lgSize: '1600-1067' },
    ],
});

document.getElementById('cover').addEventListener('click', () => {
    gallery.openGallery(0, document.getElementById('cover'));
});
```

A `data-lg-size` attribute on that element works too and takes
precedence. Without a size or an element, the slide uses the default
opening animation.

In [React](/docs/react/), [Vue](/docs/vue/) and [Angular](/docs/angular/)
the same fields describe an item or an entry of the `slides` array, with
`caption` in place of `subHtml`.

## Available fields

Every field has an HTML attribute twin for galleries built from markup; the
[attributes page](/docs/attributes/) lists those.

| Property | Type | Description |
| --- | --- | --- |
| `__slideVideoInfo` | `VideoInfo` |  |
| `alt` | `string` | alt attribute for the image |
| `disqusIdentifier` | `string` | Disqus page identifier Please refer official [disqus documentation](https://help.disqus.com/en/articles/1717084-javascript-configuration-variables) for more info |
| `disqusUrl` | `string` | Disqus page url Please refer official [disqus documentation](https://help.disqus.com/en/articles/1717084-javascript-configuration-variables) for more info |
| `download` | `string \| boolean` | Name of the file after it is downloaded. The HTML value of the download attribute. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.). [More info](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download) |
| `downloadUrl` | `string \| boolean` | Download url for your image/video. Pass false if you want to disable the download button. |
| `facebookShareUrl` | `string` | Facebook share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL is taken. |
| `fbHtml` | `string` | Facebook comments body html Please refer [facebook official documentation](https://developers.facebook.com/docs/plugins/comments/#comments-plugin) for generating the HTML markup |
| `iframe` | `boolean` | Set true is you want to open your url in an iframe |
| `iframeTitle` | `string` | Title for iframe |
| `lgSize` | `string` | Original size of the media as "WIDTH-HEIGHT", for example 1600-1067. Drives the zoom-from-origin opening and closing animation and the size of video slides. In a gallery built from markup it is read from the item element. In dynamic mode set it on the item and pass the element the slide should grow out of as the second argument of openGallery; a data-lg-size attribute on that element still wins. |
| `pinterestShareUrl` | `string` | Pinterest share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken. Note?: Pinterest requires absolute URL |
| `pinterestText` | `string` | Description for Pinterest post. |
| `poster` | `string` | Poster url |
| `responsive` | `string` | List of images and viewport's max width separated by comma. Ex?: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757. |
| `shareUrl` | `string` | Canonical share URL for the native share sheet (Web Share API). Specify only if you want a separate URL for the specific slide. Falls back to the network-specific share URLs, then the current browser URL. |
| `sizes` | `string` | srcset sizes attribute for the main image |
| `slideName` | `string` | Custom slide name to use in the url when hash plugin is enabled |
| `sources` | `ImageSources[]` | Source attributes for the [picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attributes) element |
| `src` | `string` | url of the media |
| `srcset` | `string` | srcset attribute values for the main image |
| `subHtml` | `string` | Caption for the slide You can either pass the HTML markup or the ID or class name of the element which contains the captions |
| `subHtmlUrl` | `string` | url of the file which contain the sub html. Note - Does not support Internet Explorer browser |
| `thumb` | `string` | Thumbnail url By default lightGallery uses the image inside gallery selector as thumbnail. But, If you want to use external image for thumbnail, pass the thumbnail url via any data attribute and pass the attribute name via exThumbImage option |
| `title` | `string` | Title attribute for the image or video. With the getCaptionFromTitleOrAlt setting, it is used as the caption when subHtml is not set. |
| `tweetText` | `string` | Tweet text |
| `twitterShareUrl` | `string` | Twitter share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken. |
| `video` | `VideoSource` | Video source |
| `width` | `string` | Actual size of the image in px. This is used in zoom plugin to see the actual size of the image when double-tapped on the image. |


---

# Attributes

> Every HTML attribute lightGallery reads from your gallery markup: the image, thumbnail, size, caption, video, download and share attributes.

When you build a gallery from markup, lightGallery reads everything it needs from attributes on each item. This page lists all of them.

Canonical page: https://www.lightgalleryjs.com/docs/attributes/

## Where attributes go

Attributes sit on the item element, usually an anchor whose `href` is the
full-size image and whose child image is the thumbnail:

```html
<div id="gallery">
    <a
        href="img/1.jpg"
        data-lg-size="1600-1067"
        data-sub-html="<h4>Mountains</h4>"
        data-download-url="img/1-original.jpg"
    >
        <img src="img/thumb-1.jpg" alt="Mountains" />
    </a>
</div>
```

In the [React](/docs/react/), [Vue](/docs/vue/) and
[Angular](/docs/angular/) packages the same information is passed as item
fields instead; the [dynamic variables page](/docs/dynamic-variables/)
lists those.

## External thumbnails

By default the image inside the item is the thumbnail. To read the
thumbnail URL from an attribute instead, set the `exThumbImage` setting
to the attribute's name, such as `data-external-thumb-image`; that
attribute is read from the item element rather than becoming a field of
the item.

## Available attributes

| Attribute | Type | Description |
| --- | --- | --- |
| `data-__slide-video-info` | `VideoInfo` |  |
| `data-alt` | `string` | alt attribute for the image |
| `data-disqus-identifier` | `string` | Disqus page identifier Please refer official [disqus documentation](https://help.disqus.com/en/articles/1717084-javascript-configuration-variables) for more info |
| `data-disqus-url` | `string` | Disqus page url Please refer official [disqus documentation](https://help.disqus.com/en/articles/1717084-javascript-configuration-variables) for more info |
| `data-download` | `string \| boolean` | Name of the file after it is downloaded. The HTML value of the download attribute. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.). [More info](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download) |
| `data-download-url` | `string \| boolean` | Download url for your image/video. Pass false if you want to disable the download button. |
| `data-facebook-share-url` | `string` | Facebook share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL is taken. |
| `data-fb-html` | `string` | Facebook comments body html Please refer [facebook official documentation](https://developers.facebook.com/docs/plugins/comments/#comments-plugin) for generating the HTML markup |
| `data-iframe` | `boolean` | Set true is you want to open your url in an iframe |
| `data-iframe-title` | `string` | Title for iframe |
| `data-lg-size` | `string` | Original size of the media as "WIDTH-HEIGHT", for example 1600-1067. Drives the zoom-from-origin opening and closing animation and the size of video slides. In a gallery built from markup it is read from the item element. In dynamic mode set it on the item and pass the element the slide should grow out of as the second argument of openGallery; a data-lg-size attribute on that element still wins. |
| `data-pinterest-share-url` | `string` | Pinterest share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken. Note?: Pinterest requires absolute URL |
| `data-pinterest-text` | `string` | Description for Pinterest post. |
| `data-poster` | `string` | Poster url |
| `data-responsive` | `string` | List of images and viewport's max width separated by comma. Ex?: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757. |
| `data-share-url` | `string` | Canonical share URL for the native share sheet (Web Share API). Specify only if you want a separate URL for the specific slide. Falls back to the network-specific share URLs, then the current browser URL. |
| `data-sizes` | `string` | srcset sizes attribute for the main image |
| `data-slide-name` | `string` | Custom slide name to use in the url when hash plugin is enabled |
| `data-sources` | `ImageSources[]` | Source attributes for the [picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attributes) element |
| `data-src` | `string` | url of the media |
| `data-srcset` | `string` | srcset attribute values for the main image |
| `data-sub-html` | `string` | Caption for the slide You can either pass the HTML markup or the ID or class name of the element which contains the captions |
| `data-sub-html-url` | `string` | url of the file which contain the sub html. Note - Does not support Internet Explorer browser |
| `data-thumb` | `string` | Thumbnail url By default lightGallery uses the image inside gallery selector as thumbnail. But, If you want to use external image for thumbnail, pass the thumbnail url via any data attribute and pass the attribute name via exThumbImage option |
| `data-title` | `string` | Title attribute for the image or video. With the getCaptionFromTitleOrAlt setting, it is used as the caption when subHtml is not set. |
| `data-tweet-text` | `string` | Tweet text |
| `data-twitter-share-url` | `string` | Twitter share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken. |
| `data-video` | `VideoSource` | Video source |
| `data-width` | `string` | Actual size of the image in px. This is used in zoom plugin to see the actual size of the image when double-tapped on the image. |


---

# Image and video gallery for React

> Native React image and video gallery component, thumbnails, pinch zoom, YouTube and Vimeo support, SSR-safe, fully typed, no jQuery.

Full featured image and video gallery lightbox component for React.

Canonical page: https://www.lightgalleryjs.com/docs/react-image-video-gallery/

lightGallery 3 ships **`@lightgallery/react`**, a native React component,
not a wrapper. React renders every node, in the trigger grid and in the
lightbox, so there is no second runtime mutating your DOM and no jQuery
anywhere. State and gallery logic come from the shared headless core, which
is why behavior is identical across the vanilla, React, Vue and Angular
packages.

## Install

```bash
npm install @lightgallery/react lightgallery
```

The React package ships no CSS of its own, stylesheets come from the
`lightgallery` package:

```tsx
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';
```

## A gallery in one component

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

const items = [
    {
        src: 'img/1-1600.jpg',
        thumb: 'img/1-240.jpg',
        alt: 'Mountains',
        lgSize: '1600-1067',
        caption: <h4>Mountains</h4>,
    },
];

export function Gallery() {
    return (
        <LightGallery plugins={[Thumbnail, Zoom]} zoom={{ scale: 1.5 }}>
            {items.map((item) => (
                <LightGalleryItem key={item.src} item={item} href={item.src}>
                    <img src={item.thumb} alt={item.alt} />
                </LightGalleryItem>
            ))}
        </LightGallery>
    );
}
```

Prefer to own the state? Pass `slides` with `open`/`index` and drive it from
your own UI. Both modes are documented in the
[React package docs](/docs/react/).

## What you get

-   **All 14 plugins** as tree-shakable imports, thumbnails, zoom, video,
    autoplay, fullscreen, hash deep links, pager, share, rotate, comments,
    medium-style zoom, relative captions, Vimeo thumbnails and origin crop,
    plus the justified layout.
-   **Settings and events as props**: core settings keep their documented
    names, per-plugin settings are one object prop per plugin
    (`zoom={{ scale: 1.5 }}`), and lifecycle events are typed callbacks
    (`onBeforeSlide`, `onAfterSlide`, …).
-   **TypeScript throughout**, including `GalleryItem` for slide data and a
    `LightGalleryRefHandle` for imperative control.
-   **SSR-safe by construction**, works in the Next.js App Router without a
    `dynamic(() => …, { ssr: false })` wrapper; trigger markup
    server-renders, so galleries stay crawlable.
-   **Accessibility**: dialog semantics, focus trap and restore, keyboard
    operable thumbnails and pager, `prefers-reduced-motion` support.

## Next steps

-   [React package docs](/docs/react/), the full prop surface, plugins,
    SSR and accessibility notes.
-   [React image gallery demo](/demos/react-image-gallery/) and
    [React video gallery demo](/demos/react-video-gallery/), live galleries
    with the code behind them.
-   [React carousel demo](/demos/react-carousel/), the inline variant that
    expands into the lightbox.
-   [Settings reference](/docs/settings/), every setting, shared by all
    four packages.

> **Using the 2.x wrapper?** The old `lightgallery/react` component is
> documented in the [2.x React archive](/docs/v2/react/), and the
> [migration guide](/docs/migration/) covers the move to the native package.


---

# Image and video gallery for Vue

> Native Vue 3 image and video gallery component, v-model, scoped slots, Teleport, thumbnails, pinch zoom and Nuxt SSR support.

Full featured image and video gallery component for Vue.

Canonical page: https://www.lightgalleryjs.com/docs/vue-image-video-gallery/

lightGallery 3 ships **`@lightgallery/vue`**, a native Vue 3 component, not
a wrapper. Every node is rendered by Vue, with `v-model` for the open state
and the index, typed emits, scoped slots and a Teleport overlay. State and
gallery logic come from the shared headless core, so behavior matches the
vanilla, React and Angular packages exactly.

## Install

```bash
npm install @lightgallery/vue lightgallery
```

Peer range is `vue >=3.4`. Import the stylesheets globally, they ship from
the `lightgallery` package and are shared by every binding:

```ts
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';
```

## A gallery in one SFC

```vue
<script setup lang="ts">
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Zoom from '@lightgallery/vue/plugins/zoom';

const items: LgGalleryItem[] = [
    {
        src: 'img/1-1600.jpg',
        thumb: 'img/1-240.jpg',
        alt: 'Mountains',
        lgSize: '1600-1067',
        caption: 'Mountains',
    },
];
</script>

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

Prefer to own the state? Pass `:slides` with `v-model:open` and
`v-model:index`. Both modes are documented in the
[Vue package docs](/docs/vue/).

## What you get

-   **All 14 plugins** as tree-shakable subpaths, thumbnails, zoom, video,
    autoplay, fullscreen, hash deep links, pager, share, rotate, comments,
    medium-style zoom, relative captions, Vimeo thumbnails and origin crop,
    plus the justified layout.
-   **Idiomatic Vue API**: settings are same-named props (`:speed`,
    `:loop`, `:caption-position`), per-plugin settings are one object prop
    per plugin, events are kebab-case emits (`@after-slide`), and the
    gallery chrome comes from named scoped slots (`#caption`, `#counter`,
    `#prev-button`, `#next-button`).
-   **Typed end to end**, including `LgGalleryItem` for slide data and a
    template-ref handle for imperative control.
-   **Nuxt-ready**: entries import without browser globals and the overlay
    never server-renders, so no `` wrapper and no hydration
    mismatch.
-   **Accessibility**: dialog semantics, focus trap and restore, keyboard
    operable thumbnails and pager, `prefers-reduced-motion` support; axe
    reports zero violations.

## Next steps

-   [Vue package docs](/docs/vue/), the full prop surface, all plugins,
    SSR and accessibility notes.
-   [Vue image gallery demo](/demos/vue-image-gallery/) and
    [Vue video gallery demo](/demos/vue-video-gallery/), live galleries
    with the code behind them.
-   [Settings reference](/docs/settings/), every setting, shared by all
    four packages.

> **Using the 2.x wrapper?** The old `lightgallery/vue` component is
> documented in the [2.x Vue archive](/docs/v2/vue/), and the
> [migration guide](/docs/migration/) covers the move to the native package.


---

# lightGallery facts and figures

> The numbers behind lightGallery: bundle sizes for the core, every plugin and the framework packages, dependencies, supported browsers and framework versions, media types, accessibility, license and prices.

One page of checkable facts: how big lightGallery is, what it depends on, what it runs in, what it plays, and what it costs. Sizes are measured from the build this site was made with.

Canonical page: https://www.lightgalleryjs.com/docs/facts/

lightGallery is an open-source JavaScript lightbox and gallery for images
and video, with native React, Vue and Angular packages built on one
shared core, no dependencies, and every feature outside the core shipped
as an opt-in plugin. This page is the reference for the numbers; the
figures that come from the build are measured when the site is built, so
they match the version in the heading below.

## What is the current version?

| | |
| --- | --- |
| Version |  |
| First 3.0 release | 9 October 2026 |
| Packages | `lightgallery`, `@lightgallery/headless`, `@lightgallery/react`, `@lightgallery/vue`, `@lightgallery/angular` |
| Versioning | The five packages always ship together under one version number |
| Started | 2014, as a jQuery plugin; dependency-free since version 2 |
| Language | TypeScript, with type declarations in every package |

## How big is lightGallery?

The core is the lightbox itself. Thumbnails, zoom, video and the rest
are plugins with their own entry points, so a gallery pays only for the
features it imports. A typical image gallery with thumbnails and zoom is
the core plus two plugins, about 30 KB of JavaScript gzipped.

## What does it depend on?

| Package | Runtime dependencies |
| --- | --- |
| `lightgallery` | None |
| `@lightgallery/headless` | None |
| `@lightgallery/react` | `@lightgallery/headless` |
| `@lightgallery/vue` | `@lightgallery/headless` |
| `@lightgallery/angular` | `@lightgallery/headless`, `tslib`, and the Angular CDK as a peer |

jQuery is not required anywhere. The stylesheets come from the
`lightgallery` package and are shared by every binding.

## Which frameworks and versions does it support?

| Package | Framework range | Server rendering |
| --- | --- | --- |
| `lightgallery` | Plain JavaScript or TypeScript, ES module and UMD builds, CDN script tags | Markup renders on the server; the gallery initialises in the browser |
| `@lightgallery/react` | React 18 and 19 | Yes: trigger grids render on the server, the lightbox mounts after hydration, no dynamic import needed |
| `@lightgallery/vue` | Vue 3.4 and later | Yes, including Nuxt |
| `@lightgallery/angular` | Angular 21 and 22, standalone components, signal inputs, zoneless | Yes, including Angular SSR with hydration |
| `@lightgallery/headless` | Any framework: the state machine, settings, gesture, zoom and thumbnail maths with no DOM | Not applicable |

Node 18 or later is required for the build tooling; the browser bundles
have no Node requirement.

## Which browsers does it run in?

Current evergreen browsers: Chrome, Edge, Firefox and Safari on desktop,
Safari on iOS and Chrome on Android. The builds target ES2017 and run
without transpiling or polyfills. Internet Explorer is not supported.

## What media does it show?

| Type | How |
| --- | --- |
| Images | `src`, `srcset` and `sizes`, and `<picture>` sources for art direction and format negotiation |
| YouTube, Vimeo and Wistia | By URL. Provider slides load as a poster facade; the provider iframe is created only when the visitor presses play. YouTube uses the privacy-enhanced no-cookie host by default |
| HTML5 video | MP4, WebM and other formats the browser plays, with poster images |
| Iframes | Any page, map or PDF viewer |
| Inline HTML | Any markup, as a slide |
| Dynamic content | Slides built from a JavaScript array, added and removed while the gallery is open |

## How much of the API is there?

| | Count |
| --- | --- |
| Settings | 158, across the core and 15 plugins |
| Events | 22 |
| Methods | 8 |
| Plugins | 15 |
| Slide transitions | 20 and more, switched with one setting |

The [settings](/docs/settings/), [events](/docs/events/) and
[methods](/docs/methods/) references are generated from the source, and
the same data is served as JSON at `/api/settings.json`,
`/api/events.json` and `/api/methods.json`.

## Is it accessible?

The open gallery is a modal dialog with `role="dialog"` and
`aria-modal`, focus moves into it on open, Tab is trapped while it is
open and focus returns to the trigger on close. Slide changes are
announced to screen readers, the controls are labelled and translatable,
and `prefers-reduced-motion` disables the animations. All four packages
run axe checks against WCAG 2.0 and 2.1 A and AA rules in continuous
integration. The [accessibility page](/docs/accessibility/) has the full
contract.

## Is lightGallery free?

Yes. lightGallery is free and open source under the GPLv3, for personal
and commercial projects alike, as long as the project is distributed
under GPLv3-compatible terms.

## How much does the commercial license cost?

A project that keeps its source proprietary needs a commercial license.
It is a one-time payment, the code and every plugin are the same, and
there are no feature gates.

| License | Price (USD, one-time) | Covers |
| --- | --- | --- |
| Hobby | 48 | One developer, one product, not for a product that is sold |
| Team | 118 | Up to eight developers, up to five products, products for sale allowed |
| Organization | 188 | Unlimited developers and products, products for sale allowed |
| Extended | 239 | Unlimited developers, one product that itself produces copies, such as an SDK, site builder, theme or template |

Open-source projects under a GPLv3-compatible license can request a free
key. The [license page](/license/) has the purchase links and the full
terms.

## Does a version 2 license cover version 3?

No. A license covers every release within the major version it was
bought for, so a 2.x license covers all 2.x releases and version 3 needs
a new license. Licenses bought in the six months before the 3.0 release
can be exchanged by email. Version 3 keys start with `LIG`; an older key
keeps the gallery working and logs a console warning.

## How widely is it used?

| | Figure |
| --- | --- |
| npm downloads of `lightgallery` | About 90,000 a week in October 2026 |
| GitHub | About 7,000 stars |
| CDN | Served by jsDelivr, cdnjs and unpkg |

## Where do I get it?

| | |
| --- | --- |
| npm | `npm install lightgallery`, or the framework package plus `lightgallery` for the stylesheets |
| CDN | `https://cdn.jsdelivr.net/npm/lightgallery@3/lightgallery.min.js` and `/css/lightgallery.css`, the same paths on cdnjs and unpkg; `@3` follows the latest 3.x release |
| Source | [github.com/sachinchoolur/lightGallery](https://github.com/sachinchoolur/lightGallery) |
| For coding agents | [llms.txt](/llms.txt), a markdown twin of every docs page at its URL plus `index.md`, and the [agent skill](https://github.com/sachinchoolur/lightGallery/tree/main/skills/lightgallery) |

The [getting started guide](/docs/getting-started/) takes it from here.


---

# Image and video gallery for Angular

> Native Angular image and video gallery component, standalone, signal inputs, zoneless, CDK overlay, thumbnails, pinch zoom and SSR support.

Full featured image and video lightbox gallery component for Angular.

Canonical page: https://www.lightgalleryjs.com/docs/angular-image-video-gallery/

lightGallery 3 ships **`@lightgallery/angular`**, a native Angular
component, not a wrapper. It is a standalone component with signal inputs
and outputs, zoneless change detection and CDK overlay/a11y, published in
Angular Package Format with one secondary entry point per feature. State and
gallery logic come from the shared headless core, so behavior matches the
vanilla, React and Vue packages exactly.

## Install

```bash
npm install @lightgallery/angular @angular/cdk lightgallery
```

Peer ranges are `@angular/core`, `@angular/common`, `@angular/platform-browser`
and `@angular/cdk` `>=21 <23`. There is no `zone.js` in the package. Import
the stylesheets in your root stylesheet, or add the same paths to the
`styles` array in `angular.json`:

```css
/* src/styles.css */
@import 'lightgallery/css/lightgallery.css';
@import 'lightgallery/css/lg-thumbnail.css';
@import 'lightgallery/css/lg-zoom.css';
```

## A gallery in one component

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [href]="item.src" [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withThumbnail({ thumbWidth: 120 }), withZoom({ scale: 1.5 })];

    items: LgGalleryItem[] = [
        {
            src: 'img/1-1600.jpg',
            thumb: 'img/1-240.jpg',
            alt: 'Mountains',
            lgSize: '1600-1067',
            caption: 'Mountains',
        },
    ];
}
```

Prefer to own the state? Pass `[slides]` with `[open]`/`(closed)` and
`[(index)]`. Both modes are documented in the
[Angular package docs](/docs/angular/).

## What you get

-   **All 14 features** as tree-shakable entry points with `with()`
    factories, thumbnails, zoom, video, autoplay, fullscreen, hash deep
    links, pager, share, rotate, comments, medium-style zoom, relative
    captions, Vimeo thumbnails and origin crop, plus the justified layout.
-   **Idiomatic Angular API**: settings are same-named signal inputs
    (`[speed]`, `[loop]`, `[captionPosition]`), events are outputs without
    the `on` prefix (`(afterSlide)`), and the gallery chrome comes from
    `ng-template` directives (`lgCaption`, `lgCounter`, `lgPrevButton`,
    `lgNextButton`).
-   **Zoneless-ready** and fully typed, including `LgGalleryItem` for slide
    data and an `exportAs` handle for imperative control.
-   **SSR-safe**: entry points import cleanly in bare Node and the overlay
    mounts after hydration, so trigger markup server-renders and galleries
    stay crawlable.
-   **Accessibility**: dialog semantics via CDK, focus trap and restore,
    keyboard operable thumbnails and pager, `prefers-reduced-motion`
    support.

## Next steps

-   [Angular package docs](/docs/angular/), the full input surface, all
    features, SSR and accessibility notes.
-   [Angular image gallery demo](/demos/angular-image-gallery/) and
    [Angular video gallery demo](/demos/angular-video-gallery/), live
    galleries with the code behind them.
-   [Settings reference](/docs/settings/), every setting, shared by all
    four packages.

> **Using the 2.x wrapper?** The old `lightgallery/angular` component is
> documented in the [2.x Angular archive](/docs/v2/angular/), and the
> [migration guide](/docs/migration/) covers the move to the native package.


---

# lightGallery license

> lightGallery is free and open source under the GPLv3. The commercial license is for projects that keep their source proprietary: same code, every plugin, one-time payment.

Which license applies to your project, how to pass your license key, and what the temporary key does. Plans and pricing are on the [license page](https://www.lightgalleryjs.com/license/).

Canonical page: https://www.lightgalleryjs.com/docs/license/

## Open source license

lightGallery is released under the
[GNU General Public License v3](https://www.gnu.org/licenses/gpl-3.0.html).
It is free to use in any project, personal or commercial, as long as that
project is distributed under GPLv3-compatible terms. The
[GPL FAQ](https://www.gnu.org/licenses/gpl-faq.html) explains what that means
for your own code.

Open-source projects can request a license key at
[contact@lightgalleryjs.com](mailto:contact@lightgalleryjs.com) so the
gallery runs without the console notice.

## Commercial license

If you would rather keep your own source proprietary, the commercial license
is for you. It covers the same code, with every feature and official plugin
included; nothing is gated behind it. Plans are one-time payments, priced by
team size, and come with a license key by email. See
[plans and pricing](/license/).

## Extended commercial license

If you want to include lightGallery as part of a software development kit
(SDK), web application builder or website builder, downloadable or
installable products like WordPress themes, HTML templates, or something
that produces copies that each use lightGallery, you need the Extended
Commercial license.

## Frequently asked

**Is lightGallery free?** Yes. Under the GPLv3 every package and every
plugin is free, for personal and commercial projects alike, when your project
is distributed under GPLv3-compatible terms.

**When do I need a commercial license?** When you keep your source
proprietary, so releasing it under GPLv3-compatible terms is not an option.
The kind of project does not decide this; the terms your own code ships
under do.

**Does the commercial license add features?** No. Both licenses cover the
same code. The license key only turns off the console notice.

**Can I try it before buying?** Yes. The temporary key below runs every
feature and plugin; it only logs a console warning that it is not for
production use.

**I ship a theme, template or site builder. Which license?** Products that
produce copies, each using lightGallery, need the Extended Commercial
license.

## License key

Pass your key with the [`licenseKey`](/docs/settings/#licenseKey) setting:

```js
lightGallery(document.getElementById('lightgallery'), {
    licenseKey: 'your_license_key',
});
```

-   **Commercial licenses** come with a key by email once you purchase.
    lightGallery 3 keys start with `LIG`.
-   **Upgrading from v1 or v2?** Those keys don't start with `LIG` and
    aren't valid for lightGallery 3. The gallery keeps working and logs a
    console warning asking you to upgrade; see the
    [upgrade note on the license page](/license/).
-   **Open source projects** under a GPLv3-compatible license can get a key
    at [contact@lightgalleryjs.com](mailto:contact@lightgalleryjs.com).
-   **Trying it out?** Use `0000-0000-000-0000` as a temporary key. It
    doesn't limit anything: every feature and plugin works exactly as it
    does with a purchased key. The only difference is a console warning
    that the key is not for production use, so if you see an error, it
    comes from something else, not from licensing.

### One key for every gallery on the page

With several galleries on a page, set the key once with `setLicenseKey`
before creating them. A gallery's own `licenseKey` still wins, and each
license message is logged once per page, not once per gallery.

```js
// Vanilla JavaScript (script tag: window.lightGallery.setLicenseKey)
import lightGallery from 'lightgallery';

lightGallery.setLicenseKey('your_license_key');
```

```ts
// React, Vue or Angular: once at app start, for example in main.ts
import { setLicenseKey } from '@lightgallery/react'; // or /vue, /angular

setLicenseKey('your_license_key');
```

The temporary key is also the default, so a gallery without a
`licenseKey` shows the same warning. An empty `licenseKey` logs a console
error pointing here instead; the gallery still runs.


---

# Migrating to lightGallery 3

> Upgrade guide for lightGallery 3, changed defaults and settings for vanilla users, and wrapper-to-native tables for React, Vue and Angular.

What changes when you upgrade, framework by framework. Vanilla galleries keep working as documented; the framework wrappers are replaced by native packages.

Canonical page: https://www.lightgalleryjs.com/docs/migration/

lightGallery 3 restructures the project around a framework-free core plus
native packages for React, Vue and Angular. The vanilla library keeps its
runtime and its API; the framework wrappers, which embedded that runtime
and mirrored its DOM, are replaced by components that render natively.

| You were using | You now install |
| --- | --- |
| `lightgallery` | `lightgallery` (unchanged) |
| `lightgallery/react` | [`@lightgallery/react`](/docs/react/) |
| `lightgallery/vue` | [`@lightgallery/vue`](/docs/vue/) |
| `lightgallery/angular` | [`@lightgallery/angular`](/docs/angular/) |

## Vanilla JavaScript

Version 3 is a complete rewrite, but the API is unchanged. The upgrade is
packaging, a handful of new settings, a few changed defaults and four
removals.

-   **Imports are unchanged**, `import lightGallery from 'lightgallery'`,
    plugins from `lightgallery/plugins/<name>`, CSS from
    `lightgallery/css/<name>.css`. The package now has proper export maps,
    so bundlers and Node resolve subpaths without deep-path workarounds.
    The CDN paths are unchanged too: the package root is still the build
    folder, so `css/lightgallery.css` and `plugins/zoom/lg-zoom.umd.js` are
    where 2.x had them on jsDelivr, unpkg and cdnjs.
-   **The icon font is gone.** Controls render inline SVG icons, and the
    `fonts/lg.*` files and their `@font-face` rule no longer ship. If you
    self-hosted the font or restyled icons through font glyphs on
    `.lg-icon`, replace them with [custom icons](/docs/custom-icons/).
-   **No Internet Explorer.** The ES module and UMD builds target ES2017
    for current evergreen browsers and iOS Safari, with no ES5 build (the
    ES module keeps its historical `*.es5.js` file name). See
    [browser support](/docs/getting-started/#browser-support); v2 remains
    available for IE.
-   **`supportLegacyBrowser` is gone.** It only hooked up a polyfill
    for `srcset` and `<picture>`, which every supported browser handles
    natively. Remove the setting from your options; TypeScript
    reports it as an unknown property. The `CustomEvent` and
    `Element.matches` polyfills the library used to install on the page
    are removed with it.
-   **The share dropdown has no overlay.** It dismisses like the
    toolbar's More options menu: on a press anywhere outside it, on
    Escape and when focus tabs out of it. The `.lg-dropdown-overlay`
    element that dimmed the gallery behind it is not rendered, so drop
    any CSS that targeted it. See
    [Web Share](/docs/web-share/#dismissing-the-dropdown).
-   **New settings keep the 2.x behavior by default**, except the ones
    listed under [changed defaults](#changed-defaults) below:
    [`strings`](/docs/localization-rtl/) and
    [`direction`](/docs/localization-rtl/),
    [`virtualization`](/docs/virtualization/),
    [`hashDriver`](/docs/hash-drivers/),
    [`videoFacade`](/docs/video-facades/),
    [`preferNativeShare`](/docs/web-share/),
    the [justified layout](/docs/justified-layout/) plugin,
    `ariaAnnouncements`, `flickVelocity` and `pinchToClose`.

### Changed defaults

| Setting | 2.x | 3.0 | Effect |
| --- | --- | --- | --- |
| `videoFacade` | n/a (eager iframe) | `true` | Provider video slides render a poster with a play button; the iframe mounts on play. Set `false` for the old behavior |
| `youTubeNoCookie` | n/a (`youtube.com`) | `true` | YouTube embeds go through `youtube-nocookie.com`. URLs that already point there always keep it |
| `preferNativeShare` | n/a | touch: `true`, desktop: `false` | On touch devices the share button opens the system share sheet, with the branded dropdown as the fallback |
| `hashDriver` | n/a (History API) | `'auto'` | Deep links use the Navigation API where the browser has it, History everywhere else. Force the old engine with `'history'` |
| `toolbarOverflow` | n/a (buttons wrap) | `true` | When the toolbar buttons do not fit beside the counter, the lowest-priority ones move into a "More options" menu. Set `false` to let them wrap onto a second row as before |
| `showGestureButtons` | n/a (always shown) | desktop: `true`, touch: `false` | Touch devices leave out the zoom in, zoom out and actual-size buttons, since pinch and double-tap do the same. Set `mobileSettings: { showGestureButtons: true }` to show them |

`direction` stays `'ltr'`, so nothing mirrors until you opt in with
`'rtl'` or `'auto'`.

### Strings are unified

Every user-facing label, core controls *and* plugin buttons, now lives in
one `strings` object:

```js
lightGallery(el, {
    plugins: [lgZoom, lgThumbnail],
    strings: {
        closeGallery: 'Galerie schließen',
        nextSlide: 'Nächstes Bild',
        zoomIn: 'Vergrößern',
        toggleThumbnails: 'Miniaturen umschalten',
    },
});
```

The seven per-plugin objects still work and are **deprecated**:
`autoplayPluginStrings`, `commentPluginStrings`, `fullscreenPluginStrings`,
`rotatePluginStrings`, `sharePluginStrings`, `thumbnailPluginStrings` and
`zoomPluginStrings`. A legacy key you set explicitly still wins over the
`strings` default, so mixed configurations keep working while you move
across. The full key list is in the
[localization guide](/docs/localization-rtl/).

## License keys

lightGallery 3 keys start with `LIG`. A v1 or v2 key is not valid for
version 3: the gallery keeps working and logs a console warning asking
you to upgrade. The [upgrade note on the license page](/license/)
explains how to get a v3 key, and the [license docs](/docs/license/)
cover open-source use and the temporary key for evaluation.

## React

The 2.x component wrapped the vanilla runtime; `@lightgallery/react` renders
every node itself. The archived wrapper docs stay at
[/docs/v2/react/](/docs/v2/react/).

```bash
npm install @lightgallery/react lightgallery
```

Keep `lightgallery` installed, the CSS still ships from it, unchanged.

| 2.x wrapper | 3.0 native package |
| --- | --- |
| `import LightGallery from 'lightgallery/react'` | `import { LightGallery } from '@lightgallery/react'` |
| Anchor children scraped for `data-*` attributes | `<LightGalleryItem item={item}>` children, or a `slides` array |
| `dynamic` + `dynamicEl={items}` | `slides={items}` |
| `elementClassNames` | `className` |
| `onInit={({ instance }) => …}` then calling methods on `instance` | `ref` handle: `gallery.current.openGallery(0)` |
| Plugin settings flat on the component (`thumbWidth={130}`) | One object prop per plugin (`thumbnail={{ thumbWidth: 130 }}`) |
| `subHtml` HTML strings | `caption` React nodes (`captionHtml` for raw HTML) |
| `plugins={[lgThumbnail]}` from `lightgallery/plugins/*` | `plugins={[Thumbnail]}` from `@lightgallery/react/plugins/*` |

Lifecycle callbacks keep their documented names (`onBeforeSlide`,
`onAfterSlide`, `onSlideItemLoad`, …) and their detail payloads. Slide data
uses the same field names, with `size` renamed to `lgSize`.

Two behaviors are worth knowing about:

-   **Controlled mode is available**: `open`, `index`, `onClose` and
    `onIndexChange` let React own the state, the wrapper had no equivalent.
-   **Updating slides needs no `refresh()`**: rendering different children
    or a different `slides` array is the update. The `refresh()` method
    remains on the handle for API parity.

## Vue

The 2.x wrapper is documented at [/docs/v2/vue/](/docs/v2/vue/).
`@lightgallery/vue` needs `vue >=3.4`.

```bash
npm install @lightgallery/vue lightgallery
```

| 2.x wrapper | 3.0 native package |
| --- | --- |
| `import Lightgallery from 'lightgallery/vue'` | `import { LightGallery, LgItem } from '@lightgallery/vue'` |
| Anchor children with `data-*` attributes | `<LgItem :item="item">` children, or a `:slides` array |
| `:settings="{ speed: 500, plugins }"`, one settings object | Core settings as individual props (`:speed="500"`), `:plugins` on its own |
| `:onBeforeSlide="handler"` props | Kebab-case emits: `@before-slide`, `@after-slide`, … |
| Plugin settings inside `settings` | One object prop per plugin (`:zoom="{ scale: 1.5 }"`) |
| `subHtml` HTML strings | `caption` values, or the `#caption` scoped slot |

`v-model:open` and `v-model:index` are new, as are the `#caption`,
`#counter`, `#prev-button` and `#next-button` scoped slots and the
template-ref handle (`openGallery`, `closeGallery`, `goToSlide`,
`nextSlide`, `prevSlide`, `refresh`).

## Angular

The 2.x wrapper is documented at [/docs/v2/angular/](/docs/v2/angular/).
`@lightgallery/angular` requires `@angular/core`, `@angular/common`,
`@angular/platform-browser` and `@angular/cdk` `>=21 <23`, and runs without `zone.js`.

```bash
npm install @lightgallery/angular @angular/cdk lightgallery
```

| 2.x wrapper | 3.0 native package |
| --- | --- |
| `LightgalleryModule` from `lightgallery/angular` | Standalone `LgGalleryComponent` + `LgGalleryItemDirective` in `imports` |
| `<lightgallery [settings]="settings">` | `<lg-gallery>` with same-named signal inputs (`[speed]`, `[loop]`, …) |
| `settings.plugins: [lgZoom]` | `[features]="[withZoom()]"` from `@lightgallery/angular/plugins/zoom` |
| `settings.dynamicEl` | `[slides]`, or `[lgGalleryItem]` triggers |
| `[onBeforeSlide]="handler"` inputs | `(beforeSlide)` outputs, no `on` prefix |
| `subHtml` HTML strings | `caption` values, or the `lgCaption` `ng-template` |

Two-way `[(index)]`, `[open]`/`(closed)`, the `ng-template` slots and the
`#lg="lgGallery"` handle are new.

## Behavior parity

All four packages share the same headless core, so settings, gesture
thresholds and plugin semantics match everywhere. If a gallery behaves
differently after migrating, that is a bug worth
[reporting](https://github.com/sachinchoolur/lightGallery/issues), please
include which package and which setting.


---

# Troubleshooting

> Fixes for the lightGallery problems behind most bug reports: missing styles, plugins that do nothing, empty slides, videos that will not play, Next.js errors, license warnings and import errors after upgrading, for vanilla JavaScript, React, Vue and Angular.

Symptom by symptom, the cause and the fix, in every package. Three mistakes account for most reports: the CSS is not imported, the plugin is not registered, or the selector does not match your markup.

Canonical page: https://www.lightgalleryjs.com/docs/troubleshooting/

Each section below is one symptom. The answer comes first, then the fix
for each package. If your problem is not here, the
[Discussions board](https://github.com/sachinchoolur/lightGallery/discussions)
and the [issue tracker](https://github.com/sachinchoolur/lightGallery/issues)
are the next stop; a minimal reproduction on StackBlitz gets the fastest
answer, and every [demo page](/demos/) has an "Open in StackBlitz" button
to start from.

## The gallery opens but has no styles

The stylesheet is not loaded. lightGallery ships its CSS as separate files
and none of the packages injects styles for you, so the slides render as a
plain list of images and the page behind keeps scrolling. Import
`lightgallery/css/lightgallery.css` plus one file per plugin, or
`lightgallery/css/lightgallery-bundle.css` for everything.

```js
// Vanilla JavaScript, bundler
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';
```

```html
<!-- Vanilla JavaScript, script tags -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@3/css/lightgallery-bundle.css" />
```

```tsx
// React (Next.js: app/layout.tsx or any server component)
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
```

```js
// Vue with Nuxt: nuxt.config
export default {
    css: ['lightgallery/css/lightgallery.css', 'lightgallery/css/lg-thumbnail.css'],
};
```

```json
// Angular: angular.json, under "styles"
["lightgallery/css/lightgallery.css", "lightgallery/css/lg-thumbnail.css"]
```

The framework packages depend on `lightgallery` only for these CSS files,
which is why `lightgallery` is installed next to `@lightgallery/react`,
`@lightgallery/vue` and `@lightgallery/angular`.

## Thumbnails, zoom, video or another plugin does nothing

The plugin is not registered. A feature exists only when its plugin is
passed to the gallery; its settings are ignored otherwise, silently. Pass
the plugin and import its CSS file.

```js
// Vanilla JavaScript
import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';

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

```tsx
// React
import { LightGallery } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';

<LightGallery plugins={[Thumbnail, Zoom]} thumbnail={{ animateThumb: true }} />;
```

```vue
<!-- Vue -->
<script setup lang="ts">
import { LightGallery } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Zoom from '@lightgallery/vue/plugins/zoom';

const plugins = [Thumbnail, Zoom];
</script>

<template>
    <LightGallery :plugins="plugins" :thumbnail="{ animateThumb: true }" />
</template>
```

```ts
// Angular
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

// In the component: features = [withThumbnail({ animateThumb: true }), withZoom()];
// In the template: <lg-gallery [features]="features">
```

With script tags, load `lightgallery.umd.js` first and each plugin file
after it; the plugins register themselves as `lgThumbnail`, `lgZoom` and
so on, and you still pass them in `plugins: []`.

## "data-src is not provided on slide item" or the gallery opens empty

The selector does not match your markup. By default lightGallery treats the
direct children of the element you pass as the slides, and each slide needs
an `href` or `data-src` pointing at the full-size media. If the links sit
deeper in the markup, or the element holds other children, set
[`selector`](/docs/settings/#selector) to the links:

```js
lightGallery(document.getElementById('gallery'), {
    selector: 'a',
});
```

The [attributes reference](/docs/attributes/) lists everything lightGallery
reads from a slide. In React, Vue and Angular the slides come from the
`slides` array or from trigger elements (`<LightGalleryItem>` in React,
`<LgItem>` in Vue, `[lgGalleryItem]` in Angular), so this warning means an
item without `src`.

## The slide fades in instead of zooming from its thumbnail

The item has no size. The zoom-from-origin animation needs the natural
size of the full image as `data-lg-size="WIDTH-HEIGHT"` (or `lgSize` on a
slide object in the framework packages), for example `1600-1067`. Without
it, or with a size that does not match the image, the gallery falls back to
a fade. Your image pipeline usually knows the dimensions; emit them into the
markup, as described in [getting started](/docs/getting-started/).

## Two galleries open, or clicks are handled twice

The same element is initialised twice. Each `lightGallery()` call creates a
new instance with its own click handlers, so a second call on the same
element opens two galleries. The usual causes are a script included twice,
an initialiser that runs on every render or route change, and hot module
reload during development.

- Keep the returned instance and reuse it. Call `refresh()` when the slides
  change and `destroy()` before you really need a new instance.
- In React, Vue and Angular use the component and never call
  `lightGallery()` yourself. The component owns the instance lifecycle,
  including React Strict Mode's double-invoked effects.

## Slides added or removed after init do not show up

The gallery does not watch the DOM. After you add, remove or reorder the
slide elements, call [`refresh()`](/docs/methods/#refresh); in dynamic mode
pass the new array of items to `refresh(items)` or use
[`updateSlides(items, index)`](/docs/methods/#updateSlides) while the
gallery is open.

```js
const gallery = lightGallery(document.getElementById('gallery'));

// Later, after the markup changed:
gallery.refresh();
```

In React, Vue and Angular, rendering a different `slides` array (or
different trigger children) is the update; the handle also exposes
`refresh()`. See the [update slides demo](/demos/update-slides/).

## YouTube, Vimeo or HTML5 videos do not play

Check these in order:

1. The video plugin is registered (`lightgallery/plugins/video`, or the
   `video` subpath of your framework package) and `lg-video.css` is
   imported. Without the plugin a video URL is treated as an image and
   fails to load.
2. Provider videos use the page URL in `href` (or `src`): a YouTube,
   Vimeo or Wistia link, not an embed snippet. By default the slide shows a
   poster and loads the player when the user presses play; see
   [video facades](/docs/video-facades/) if you expect the player
   immediately.
3. HTML5 videos take a JSON object in `data-video` (or the `video` field of
   a slide object) with `source`, `attributes` and an optional `tracks`
   list, and no `src`. The [video gallery demo](/demos/video-gallery/)
   shows the exact shape for every package.
4. A console error that names videojs, player.js or Wistia means that
   player script is not on the page. The video plugin controls those
   players, it does not bundle them.

## The gallery appears behind a modal, header or cookie banner

Something on the page has a higher stacking order. The gallery overlay
(`.lg-outer`) sits at `z-index: 1050` and the backdrop just below it, which
is lower than some modal and toast libraries. Raise it in your stylesheet:

```css
.lg-backdrop,
.lg-outer {
    z-index: 2000;
}
```

If you build the styles from `scss/`, set `$zindex-outer` and
`$zindex-backdrop` instead.

## Controls or the close button are missing on phones

That is the default on small screens. [`mobileSettings`](/docs/settings/#mobileSettings)
hides the arrows, the close icon and the download button below the desktop
breakpoint so gestures have the space. Turn them back on:

```js
lightGallery(document.getElementById('gallery'), {
    mobileSettings: { controls: true, showCloseIcon: true, download: true },
});
```

## The console warns about the license key

Nothing is limited. The message tells you which case you are in:

- "please provide a valid license key": no key was set and the gallery is
  running with no key at all. Pass [`licenseKey`](/docs/settings/#licenseKey)
  or call `setLicenseKey()` once for the page.
- "license key is not valid for production use": you are using the
  temporary key `0000-0000-000-0000`. It is meant for development and
  evaluation; use your purchased key in production.
- "this license key is for v1 or v2 and is not valid for v3": lightGallery 3
  keys start with `LIG`. See the [upgrade note](/license/).

The [license page](/docs/license/) explains which license applies to your
project. Open source projects under a GPLv3-compatible license can request
a key by email.

## Next.js: "Cannot read properties of null (reading 'removeChild')", "useRef is not a function" or hydration warnings

These come from running the gallery during server rendering or from the
retired React wrapper. With `@lightgallery/react`:

- Put the gallery in a client component (`'use client'` at the top of the
  file). No `dynamic(() => …, { ssr: false })` wrapper is needed.
- Import the CSS in `app/layout.tsx` or another server component.
- Do not call the vanilla `lightGallery()` in a `useEffect` next to the
  component; one or the other, never both.

```tsx
'use client';

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

export function Gallery() {
    return (
        <LightGallery plugins={[Zoom]}>
            <LightGalleryItem src="/photos/1.jpg" lgSize="1600-1067">
                <img src="/photos/1-thumb.jpg" alt="One" />
            </LightGalleryItem>
        </LightGallery>
    );
}
```

The overlay never server-renders, in any of the packages, so Nuxt pages do
not need `<ClientOnly>` and Angular SSR has nothing to hydrate; see the
[React](/docs/react/#ssr--nextjs), [Vue](/docs/vue/#ssr--nuxt) and
[Angular](/docs/angular/#ssr--hydration) guides.

## Autoplay restarts from the first slide instead of stopping

That is the autoplay plugin's default: after the last slide it continues
from the first, whatever `loop` says. To stop at the end, watch the
[`lgAfterSlide`](/docs/events/#lgAfterSlide) event and stop the slideshow (or close the
gallery) when the last index is reached:

```js
import lightGallery from 'lightgallery';
import lgAutoplay from 'lightgallery/plugins/autoplay';

const el = document.getElementById('gallery');
const gallery = lightGallery(el, {
    plugins: [lgAutoplay],
    autoplay: { slideShowAutoplay: true, slideShowInterval: 3000 },
});

el.addEventListener('lgAfterSlide', (event) => {
    if (event.detail.index === gallery.galleryItems.length - 1) {
        // Plugin instances live on `gallery.plugins`.
        gallery.plugins.find((p) => p.stopAutoPlay)?.stopAutoPlay();
    }
});
```

The same event is `onAfterSlide` in React, `@after-slide` in Vue and
`(afterSlide)` in Angular; the slideshow also stops on the first user
interaction unless `forceSlideShowAutoplay` is set.

## I want custom HTML in a slide

Slides hold media: an image, a video or an iframe. For arbitrary content,
either render it as a page and open it as an
[iframe slide](/demos/iframe/) (`data-iframe="true"` with the URL in
`data-src`), or put the markup in the caption with `data-sub-html`, which
accepts HTML or a selector of an element on the page, as shown in the
[captions demo](/demos/captions/). The framework packages offer the
`caption` slot for the same purpose.

## Import errors after upgrading to version 3

`lightgallery/react`, `lightgallery/vue` and the Angular `LightgalleryModule`
were the version 2 wrappers and are gone. A bundler reports
`ERR_PACKAGE_PATH_NOT_EXPORTED` or "module not found" for those paths.
Install the native package for your stack and follow the
[migration guide](/docs/migration/), which maps every wrapper prop to its
version 3 equivalent:

```bash
npm install @lightgallery/react lightgallery
```

The vanilla `lightgallery` API itself did not change; only the framework
wrappers were replaced.

## TypeScript cannot find types for a plugin import

`lightgallery/plugins/zoom` and the other plugin subpaths resolve through
the package `exports` map, which TypeScript reads with
`"moduleResolution": "bundler"` (or `"node16"` / `"nodenext"`) in
`tsconfig.json`. The legacy `"node"` resolution ignores `exports` and
reports that the module has no declaration file. Switch the setting; the
code does not change.

## Still stuck?

Open a [Discussion](https://github.com/sachinchoolur/lightGallery/discussions)
with the package and version (`npm ls lightgallery @lightgallery/react`),
the console output and a StackBlitz reproduction. Bugs with a reproduction
go to the [issue tracker](https://github.com/sachinchoolur/lightGallery/issues).
If you work with a coding agent, the
[agent prompt](/docs/getting-started/#ask-your-coding-agent) points it at
the markdown version of these docs, this page included.


---

# Creating plugins

> How lightGallery plugins work and how to write your own: the plugin contract, settings, events, styles, and how a plugin is built and shipped.

Everything outside the core is a plugin: thumbnails, zoom, video, autoplay and the rest. The same contract is open to you.

Canonical page: https://www.lightgalleryjs.com/docs/creating-plugins/

This page covers plugins for the vanilla `lightgallery` package. The
native packages have their own plugin shapes that fit their frameworks:
React and Vue plugins are objects with render slots and a hook, and
Angular plugins are `withName()` feature functions. Each package exports
the types for writing one, `LgPlugin`, `LgPluginSlots` and
`PluginContext` in [React](/docs/react/), `LgVuePlugin`, `LgPluginSlots`
and `LgPluginContext` in [Vue](/docs/vue/), `LgFeature` and
`LgPluginContext` in [Angular](/docs/angular/), and its built-in plugins
are the reference implementations. Logic that has no DOM (math, state,
URL handling) belongs in [`@lightgallery/headless`](/docs/headless/) so
every package can share it.

## The contract

A plugin is a class. lightGallery constructs it with the gallery instance
and its DOM utility, then calls a few well-known methods at the right
moments:

| Method | When it runs |
| --- | --- |
| `constructor(instance, $LG)` | Once, while the gallery is being set up. Store the instance and merge your defaults with the user's settings. Do not touch the DOM yet. |
| `init()` | After the gallery structure exists and every plugin is constructed. Add your UI, subscribe to events. |
| `closeGallery()` | Optional. Each time the gallery closes. Pause timers, reset state. |
| `destroy()` | When the gallery is destroyed. Remove your UI and listeners. |

Pass the class in the `plugins` setting and lightGallery does the rest:

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

## A complete plugin

A small but real one: a toolbar button that shows the slide position and
keeps it current as the user navigates.

```ts
// lg-counter.ts
import { lGEvents } from '../../lg-events';
import { LgQuery } from '../../lgQuery';
import { LightGallery } from '../../lightgallery';
import { CounterSettings, counterSettings } from './lg-counter-settings';

export default class Counter {
    core: LightGallery;
    settings: CounterSettings;
    private $LG: LgQuery;

    constructor(instance: LightGallery, $LG: LgQuery) {
        this.core = instance;
        this.$LG = $LG;
        // Plugin defaults first, then whatever the user passed.
        this.settings = { ...counterSettings, ...this.core.settings };
    }

    init(): void {
        if (!this.settings.counter) {
            return;
        }
        this.core.$toolbar.append(
            `<button type="button" class="lg-icon lg-counter-btn" aria-live="polite">${this.label()}</button>`,
        );
        // Namespace your listeners so `destroy()` can remove only yours.
        this.core.LGel.on(`${lGEvents.afterSlide}.counter`, () => {
            this.core.outer.find('.lg-counter-btn').html(this.label());
        });
    }

    label(): string {
        const template = this.settings.counterTemplate;
        return template
            .replace('{index}', String(this.core.index + 1))
            .replace('{total}', String(this.core.galleryItems.length));
    }

    closeGallery(): void {
        // Nothing to pause here; this is where a timer plugin would stop.
    }

    destroy(): void {
        this.core.LGel.off('.counter');
        this.core.outer.find('.lg-counter-btn').remove();
    }
}
```

The settings live in their own file, typed and with defaults:

```ts
// lg-counter-settings.ts
export interface CounterSettings {
    /** Enable the counter plugin. */
    counter: boolean;
    /** `{index}` and `{total}` are replaced with the slide position. */
    counterTemplate: string;
}

export const counterSettings: CounterSettings = {
    counter: true,
    counterTemplate: '{index} of {total}',
};
```

What the plugin has access to:

-   **`this.core`**, the gallery instance: `index`, `galleryItems`,
    `settings`, `outer` (the `.lg-outer` element), `$toolbar`,
    `$content`, and every public [method](/docs/methods/).
-   **`this.core.LGel`**, the element the gallery was initialized on. All
    [events](/docs/events/) fire on it; subscribe with a namespace
    (`${lGEvents.afterSlide}.counter`) so you can `off('.counter')` later.
-   **`this.$LG`**, a tiny DOM utility (`find`, `on`, `off`, `addClass`,
    `html`, `css`, …) so plugins need no dependencies.

## Settings, strings and icons

-   Merge your defaults under the user's settings as in the example;
    lightGallery does not merge plugin settings for you.
-   Labels that users may want to translate belong in `strings`. Read them
    from `this.core.settings.strings` so one localized object covers the
    core and every plugin.
-   The built-in plugins register their SVG artwork with
    `this.core.registerDefaultIcons(...)` so the [`icons`](/docs/custom-icons/)
    setting can replace it by name. A plugin outside this repository draws
    its own buttons; put the SVG in your markup and keep it
    `currentColor`-friendly so it follows the toolbar's colors.

## Styles

Plugin styles are separate files, so consumers pay only for what they
use. In this repository a plugin's stylesheet is `src/scss/lg-<name>.scss`
and ships as `lightgallery/css/lg-<name>.css`. Outside the repository,
ship a CSS file next to your plugin and document the import the same way.

## Using a plugin outside this repository

You do not need lightGallery's build system. Write the class in your own
project, type it against the package, and pass it in `plugins`:

```ts
import type { LightGallery } from 'lightgallery';

export default class Ping {
    core: LightGallery;
    constructor(instance: LightGallery) {
        this.core = instance;
    }
    init(): void {
        console.log('gallery ready', this.core.galleryItems.length);
    }
    destroy(): void {}
}
```

## Adding a plugin to this repository

If you are contributing a plugin to lightGallery itself, the build picks
it up from one registry:

1.  Create `src/plugins/<name>/lg-<name>.ts` and
    `src/plugins/<name>/lg-<name>-settings.ts` (and `src/scss/lg-<name>.scss`
    if it needs styles).
2.  Register the entry in `plugins-config-rollup.json`:

```json
{
    "name": "counter",
    "folder": "plugins/counter/",
    "fileName": "lg-counter"
}
```

3.  Add the settings type to `LightGalleryAllSettings` and `MobileSettings`
    in `src/lg-settings.ts`, so `plugins: [...]` users get typed settings.
4.  Add the package stub `packages/plugins/<name>/package.json` (copy an
    existing one) and the `./plugins/<name>` entry in the root
    `package.json` `exports` map. Both point at the files the build emits.
5.  Try it in the vanilla dev rig: import it in `dev-vanilla/main.ts` and run
    `npx vite --config dev-vanilla/vite.config.ts`.
6.  `npm run build` produces `dist/plugins/<name>/` with ES, UMD and
    minified bundles plus types; `npm test` runs the suites in `test/`.

Then mirror it: a plugin in the vanilla package should exist in the React,
Vue and Angular packages too, with the same settings and behavior.


---

# @lightgallery/headless

> Framework-free lightGallery core: state machine, gesture math and plugin logic shared by every v3 binding.

Framework-free lightGallery core: state machine, gesture math and plugin logic shared by every v3 binding.

Canonical page: https://www.lightgalleryjs.com/docs/headless/

`@lightgallery/headless` is the framework-free core of lightGallery 3:
everything a gallery needs to decide, with none of the rendering. It holds
the state machine, settings resolution, gesture verdicts, spring physics,
zoom and thumbnail math, the justified layout, responsive image selection,
video URL builders, share links and URL drivers. It has no DOM and no
framework; its TypeScript config excludes the DOM library, so `window`
and `document` do not even type-check inside it.

The vanilla `lightgallery` package, [`@lightgallery/react`](/docs/react/),
[`@lightgallery/vue`](/docs/vue/) and
[`@lightgallery/angular`](/docs/angular/) are all renderers over this
core. That is why a swipe threshold, a zoom clamp or a setting behaves
the same in every package: it is the same code.

## Who it is for

If you use one of the four packages you never install this one; each
depends on it. Install it directly to build a binding for another
framework, a web component, or a custom gallery UI on the same
foundation.

```bash
npm install @lightgallery/headless
```

## What it exports

| Area | Exports | Notes |
| --- | --- | --- |
| State | `createGalleryState`, `galleryReducer`, `clampIndex` | Pure reducer over `OPEN`, `CLOSE`, `NEXT`, `PREV`, `GO_TO` and the load and transition actions |
| Settings | `resolveSettings`, `coreSettingsDefaults` | Merges user settings, mobile settings and `strings` over the defaults |
| Items | `getSlideType` | Image, video, iframe or inline, from an item's fields |
| Slide windowing | `getSlideIndexesInDom`, `getPreloadIndexes`, `getSlidePoolIndexes` | Which slides to mount and preload, including virtualization |
| Gestures | `getSwipeAxis`, `getSwipeReleaseVerdict`, `getHorizontalDragTransforms`, `getVerticalDragEffects`, `shouldCloseOnVerticalDrag`, `getEdgeFrictionedDelta`, `upsertPointer`, `removePointer` | Axis lock, flick detection, boundary friction, drag to close |
| Physics | `stepSpring`, `isSpringSettled`, `project`, `getWindowedVelocity`, `pushVelocitySample` | Damped spring, momentum projection, windowed release velocity |
| Zoom | `getPinchScale`, `getPinchPan`, `getPointZoomPan`, `clampScale`, `clampPan`, `getPanBounds`, `shouldCloseOnPinch`, `getActualSizeScale` | Focal-point pinch, pan bounds with friction, pinch to close |
| Thumbnails | `getThumbWindow`, `getThumbCorridorWindow`, `getActiveThumbTranslate`, `clampThumbTranslate`, `getElasticThumbTranslate`, `getScrubThumbIndex`, `getScrubThumbTranslate` | Strip windowing, centering, elastic edges, scrubbing |
| Layout | `getJustifiedLayout`, `getJustifiedRows` | Row-justified box layout for trigger grids |
| Responsive | `parseSrcset`, `resolveImageSource`, `resolveSizes`, `matchesMedia`, `awaitDecode` | `srcset` and `sizes` selection, decode gating |
| Origin animation | `getOriginTransform`, `fitImageSize`, `parseImageSize` | Open-from-trigger transforms |
| Origin crop | `getOriginWindow`, `getOriginCropFlight`, `parseObjectFit`, `parseBackgroundFit`, `parseCssPosition` | The origin crop plugin's flight from a cropped thumbnail |
| Toolbar | `getToolbarOverflow`, `getToolbarItemPriority` | Which buttons move into the overflow menu |
| Video | `getVideoInfo`, `getYouTubeEmbedUrl`, `getVimeoEmbedUrl`, `getWistiaEmbedUrl`, `getYouTubePosterUrl`, `getFacadePoster` | Provider detection, embed URLs, facade posters |
| Share | `getSharePayload`, `canNativeShare`, `getXShareLink`, `getFacebookShareLink`, `getPinterestShareLink` | Web Share payload and social fallbacks |
| URL drivers | `createHashDriver`, `createHistoryHashDriver`, `createNavigationHashDriver` | One interface over hash, history and the Navigation API |
| Plugin slices | `initialZoomSlice`, `applyZoom`, `initialRotateSlice`, `rotateLeft`, `rotateRight`, `flipHorizontal`, `flipVertical`, `initialAutoplaySlice` | Per-plugin state reducers |
| Accessibility | `formatSlideAnnouncement` | Live-region text from a template string |
| Icons | `coreDefaultIcons`, `zoomDefaultIcons`, …, `LgIconName` | The built-in inline SVG icon sets, grouped by feature |
| License | `setLicenseKey`, `checkLicenseKey` | The license check every package shares |
| Events | `createEmitter` | A typed emitter for renderers |

Each module is independent and the package has no side effects; import
only what your renderer needs.

## Example

```ts
import {
    createGalleryState,
    galleryReducer,
    getSlideIndexesInDom,
    resolveSettings,
} from '@lightgallery/headless';

const settings = resolveSettings({ loop: true, speed: 400 });

let state = createGalleryState({ slidesCount: 5, loop: settings.loop });
state = galleryReducer(state, { type: 'OPEN', index: 2 });
state = galleryReducer(state, { type: 'NEXT' });

// Which slides to keep mounted right now: the current slide, its
// neighbours, and the previous slide so an outgoing transition can finish.
const mounted = getSlideIndexesInDom(
    state.currentIndex,
    state.previousIndex,
    state.slidesCount,
    settings.numberOfSlideItemsInDom,
    settings.loop,
);
```

Every function is pure. A renderer wraps the reducer in its own
reactivity, a reducer hook in React, a store in Vue, a signal in Angular,
and owns every DOM concern: measuring, painting, pointer events and
focus.

## Related

- [Creating plugins](/docs/creating-plugins/) for the plugin surface
  the renderers expose.
- The [React](/docs/react/), [Vue](/docs/vue/) and
  [Angular](/docs/angular/) guides, each a renderer over this package.

## License

Free and open source under the GPLv3, like every lightGallery package. If
your project keeps its source proprietary, a [commercial license](/license/)
covers it: same code, nothing gated.


---

# @lightgallery/react

> A native React lightGallery component. React renders the triggers and the lightbox, with no wrapper and no second runtime touching your DOM.

A native React lightGallery component. React renders the triggers and the lightbox, with no wrapper and no second runtime touching your DOM.

Canonical page: https://www.lightgalleryjs.com/docs/react/

`@lightgallery/react` is a native React component, not a wrapper around
the vanilla script. React renders every node, in the trigger grid and in
the lightbox, so nothing else mutates your DOM and the gallery behaves
like the rest of your tree: props in, callbacks out. Styling reuses the
published `lightgallery/css/*` files, so the lightbox looks exactly like
the vanilla one.

## Install & styles

```bash
npm install @lightgallery/react lightgallery
```

Peer range: React 18 or 19 (`react` and `react-dom`).

```tsx
// CSS is a consumer import, the React package ships no CSS.
import 'lightgallery/css/lightgallery.css';
// Per-plugin styles as needed:
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';
```

## Uncontrolled (thumbnail grid)

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

const items = [
    {
        src: 'img/1-1600.jpg',
        thumb: 'img/1-240.jpg',
        alt: 'Mountains',
        lgSize: '1600-1067', // natural size, enables the zoom-from-origin open animation
        caption: <h4>Mountains</h4>,
    },
];

export function Gallery() {
    return (
        <LightGallery plugins={[Thumbnail, Zoom]} zoom={{ scale: 1.5 }}>
            {items.map((item) => (
                <LightGalleryItem key={item.src} item={item} href={item.src}>
                    <img src={item.thumb} alt={item.alt} />
                </LightGalleryItem>
            ))}
        </LightGallery>
    );
}
```

## Controlled

Pass `slides` instead of children and the component renders no triggers;
you own `open` and `index` and open the gallery from anything you like.

```tsx
import { useState } from 'react';
import { LightGallery } from '@lightgallery/react';

const items = [
    { src: 'img/1-1600.jpg', thumb: 'img/1-240.jpg', alt: 'Mountains' },
    { src: 'img/2-1600.jpg', thumb: 'img/2-240.jpg', alt: 'Forest' },
];

export function Gallery() {
    const [open, setOpen] = useState(false);
    const [index, setIndex] = useState(0);

    return (
        <>
            <button onClick={() => setOpen(true)}>Open gallery</button>
            <LightGallery
                slides={items}
                open={open}
                onClose={() => setOpen(false)}
                index={index}
                onIndexChange={setIndex}
            />
        </>
    );
}
```

## Imperative

A `ref` exposes `openGallery(index?)`, `closeGallery()`,
`goToSlide(index)`, `nextSlide()`, `prevSlide()` and `refresh()`.

```tsx
import { useRef } from 'react';
import { LightGallery, type LightGalleryRefHandle } from '@lightgallery/react';

const items = [
    { src: 'img/1-1600.jpg', thumb: 'img/1-240.jpg', alt: 'Mountains' },
    { src: 'img/2-1600.jpg', thumb: 'img/2-240.jpg', alt: 'Forest' },
];

export function Gallery() {
    const gallery = useRef<LightGalleryRefHandle>(null);

    return (
        <>
            <button onClick={() => gallery.current?.openGallery(1)}>
                Open at slide 2
            </button>
            <LightGallery ref={gallery} slides={items} />
        </>
    );
}
```

## Settings, events and render slots

Settings are flat props with the vanilla names (`mode`, `speed`, `loop`,
`captionPosition`, …); the [settings reference](/docs/settings/) lists
every one. Per-plugin settings are a prop named after the plugin
(`zoom={{ scale: 1.5 }}`), typed via module augmentation from each plugin
entry. Lifecycle callbacks use the documented [event names](/docs/events/)
with an `on` prefix (`onBeforeSlide`, `onAfterSlide`, `onSlideItemLoad`,
…).

The `render` prop swaps parts of the chrome for your own components:
`caption(item, index)`, `counter(current, total)`, `prevButton()`,
`nextButton()` and `icon(name)`, which replaces a
[control icon](/docs/custom-icons/) by name. An inline gallery mounts into
an element you pass as `container`.

## SSR / Next.js

The gallery is SSR-safe by construction: every entry point imports cleanly
in bare Node (ESM and CJS), and `renderToString` emits nothing for the
gallery itself, the portal mounts client-side after hydration. Trigger
children (`<LightGalleryItem>`) server-render as static markup, so grids
are crawlable.

With the Next.js App Router the component must live in a client component:

```tsx
'use client';

import { LightGallery, LightGalleryItem } from '@lightgallery/react';
// ... as above
```

Import the CSS in your root layout (or any server component):

```tsx
// app/layout.tsx
import 'lightgallery/css/lightgallery.css';
```

No `dynamic(() => …, { ssr: false })` wrapper is needed. The
[Next.js image gallery demo](/demos/nextjs-image-gallery/) walks through
an App Router page with `next/image` thumbnails.

## Accessibility

The open gallery is a modal dialog (`role="dialog"`, `aria-modal`, an
accessible name). Focus moves into the gallery on open, Tab is trapped
while it is open and focus returns to the trigger on close. Thumbnails and
pager dots are keyboard-operable, and `prefers-reduced-motion` disables
the animations. The open gallery passes axe WCAG A/AA checks in CI. The
[accessibility page](/docs/accessibility/) covers the live region, the
labels and the settings involved.

## Keyboard bindings

| Key | Action |
|---|---|
| `Esc` | close (`escKey`) |
| `←` / `→` | previous / next slide (`keyPress`) |
| `Tab` / `Shift+Tab` | cycle focus within the gallery (`trapFocus`) |
| `Enter` / `Space` | activate focused thumbnail / pager dot |

## Plugins

All 14 plugins ship as subpath imports, plus the justified layout; pass them via `plugins={[]}`
and configure each with the prop named after it. Import the matching
`lightgallery/css/lg-*.css` where one exists.

| Plugin | Import | Key options (prop of the same name) |
|---|---|---|
| Thumbnail | `@lightgallery/react/plugins/thumbnail` | `thumbWidth`, `thumbHeight`, `thumbMargin`, `animateThumb`, `toggleThumb` |
| Zoom | `@lightgallery/react/plugins/zoom` | `scale`, `actualSize`, `showZoomInOutIcons`, `infiniteZoom`, `enableZoomAfter` |
| Video | `@lightgallery/react/plugins/video` | `autoplayFirstVideo`, `autoplayVideoOnSlide`, `youTubePlayerParams`, `vimeoPlayerParams`, `gotoNextSlideOnVideoEnd` |
| Autoplay | `@lightgallery/react/plugins/autoplay` | `slideShowAutoplay`, `slideShowInterval`, `progressBar`, `forceSlideShowAutoplay` |
| Fullscreen | `@lightgallery/react/plugins/fullscreen` | `fullScreen` |
| Hash | `@lightgallery/react/plugins/hash` | `galleryId`, `customSlideName` |
| Pager | `@lightgallery/react/plugins/pager` | `pager` |
| Share | `@lightgallery/react/plugins/share` | `facebook`, `twitter`, `pinterest`, `additionalShareOptions` (typed objects) |
| Rotate | `@lightgallery/react/plugins/rotate` | `rotateSpeed`, `rotateLeft/Right`, `flipHorizontal/Vertical` |
| Comment | `@lightgallery/react/plugins/comment` | `commentBox`, `renderComments(item)` render prop |
| MediumZoom | `@lightgallery/react/plugins/mediumZoom` | `margin`, `backgroundColor` (+ per-item `lgBackgroundColor`) |
| RelativeCaption | `@lightgallery/react/plugins/relativeCaption` | `relativeCaption` |
| VimeoThumbnail | `@lightgallery/react/plugins/vimeoThumbnail` | `showVimeoThumbnails`, `showThumbnailWithPlayButton` |
| OriginCrop | `@lightgallery/react/plugins/originCrop` | `originCrop`: flies a cropped thumbnail from its crop ([zoom from origin](/demos/zoom-from-origin/)) |
| Justified | `@lightgallery/react/plugins/justified` | Not a plugin: the `<JustifiedGrid>` component wraps the triggers, with `rowHeight`, `gap`, `lastRow` ([justified layout](/docs/justified-layout/)) |

Order matters for slide wrappers: put `Zoom` before `Rotate` so zoom stays
the outermost transform.

## Migrating from the 2.x React wrapper

Coming from `lightgallery/react`, the wrapper that shipped inside the
vanilla 2.x package? The full list is in the
[migration guide](/docs/migration/#react); the key changes:

- Items are data: `dynamic`/`dynamicEl` and every DOM-scraping option
  (`selector`, `extraProps`, `exThumbImage`, …) are gone, pass `slides`
  or wrap thumbnails in `<LightGalleryItem item={…}>`.
- HTML-string options became typed render props: `subHtml` →
  `item.caption` (ReactNode) or `item.captionHtml` (explicit raw HTML);
  `nextHtml`/`prevHtml`/`appendCounterTo` → the `render` prop slots.
- `appendSubHtmlTo` → `captionPosition: 'bar' | 'slide' | 'outer'`;
  `addClass` → `className`; `index` → controlled `index`/`onIndexChange`
  or `defaultIndex`.
- Plugins are modules, not constructors: `plugins={[Zoom]}` with settings
  as a `zoom={{ … }}` prop instead of flat settings keys.
- Events keep their documented `onXxx` names and payloads; `updateSlides`
  is gone (changing `slides` is the update). The `videojs` option was
  dropped, bring custom players through a plugin `slideRenderer`.

## Next steps

- [React image gallery](/demos/react-image-gallery/),
  [video gallery](/demos/react-video-gallery/),
  [carousel](/demos/react-carousel/) and
  [video carousel](/demos/react-video-carousel/) demos, each with the
  code behind it.
- Features that work the same in every package:
  [justified layout](/docs/justified-layout/),
  [virtualization](/docs/virtualization/),
  [thumbnail scrubbing](/docs/thumbnail-scrubbing/),
  [video facades](/docs/video-facades/),
  [custom icons](/docs/custom-icons/),
  [localization and RTL](/docs/localization-rtl/) and
  [responsive loading](/docs/responsive-loading/).
- The [settings reference](/docs/settings/), every setting is a prop of
  the same name, and the [events](/docs/events/) list, each one an
  `on*` callback here.

## License

Free and open source under the GPLv3, like every lightGallery package. If
your project keeps its source proprietary, a [commercial license](/license/)
covers it: same code, nothing gated. Use `0000-0000-000-0000` as a temporary
`licenseKey` for evaluation.


---

# @lightgallery/vue

> A native Vue 3 lightGallery component. Vue renders the triggers and the lightbox, with v-model, typed emits, scoped slots and a subpath per plugin.

A native Vue 3 lightGallery component. Vue renders the triggers and the lightbox, with v-model, typed emits, scoped slots and a subpath per plugin.

Canonical page: https://www.lightgalleryjs.com/docs/vue/

`@lightgallery/vue` is a native Vue 3 component, not a wrapper around the
vanilla script. Vue renders every node, in the trigger grid and in the
lightbox, so nothing else mutates your DOM. You get `<script setup>` SFCs,
`v-model` for the open state and index, typed emits, scoped slots, a
Teleport overlay and a tree-shakable subpath per plugin. Styling reuses
the published `lightgallery/css/*` files, so the lightbox looks exactly
like the vanilla one.

## Install

```bash
npm install @lightgallery/vue lightgallery
```

Peer range: `vue >=3.4` (uses `defineModel`).

```ts
// Global styles (main.ts or your root stylesheet):
import 'lightgallery/css/lightgallery.css';
// plus the CSS of each plugin you use, e.g.:
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';
```

## Quick start, uncontrolled

Thumbnails on the page open the lightbox; mount order defines slide order.

```vue
<script setup lang="ts">
import {
    LightGallery,
    LgItem,
    type LgGalleryItem,
    type SlideEventDetail,
} from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Zoom from '@lightgallery/vue/plugins/zoom';

const plugins = [Thumbnail, Zoom];
const items: LgGalleryItem[] = [
    {
        src: 'img/1.jpg',
        thumb: 'img/1-t.jpg',
        alt: '…',
        caption: '…',
        lgSize: '1600-1067', // natural size, enables the zoom-from-origin open animation
    },
];

function onSlide({ index }: SlideEventDetail) {
    console.log('slide', index);
}
</script>

<template>
    <LightGallery
        :plugins="plugins"
        :thumbnail="{ thumbWidth: 120 }"
        @after-slide="onSlide"
    >
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

## Controlled

Pass `:slides` instead of `<LgItem>` children and the component renders no
triggers; `v-model:open` and `v-model:index` give you the state.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { LightGallery, type LgGalleryItem } from '@lightgallery/vue';

const open = ref(false);
const index = ref(0);
const items: LgGalleryItem[] = [
    { src: 'img/1.jpg', thumb: 'img/1-t.jpg', alt: 'Mountains' },
    { src: 'img/2.jpg', thumb: 'img/2-t.jpg', alt: 'Forest' },
];
</script>

<template>
    <button @click="open = true">Open gallery</button>
    <LightGallery :slides="items" v-model:open="open" v-model:index="index" />
</template>
```

## Imperative

A template ref exposes `openGallery(index?)`, `closeGallery()`,
`goToSlide(index)`, `nextSlide()`, `prevSlide()` and `refresh()`.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { LightGallery, type LgGalleryItem } from '@lightgallery/vue';

const gallery = ref<InstanceType<typeof LightGallery> | null>(null);
const items: LgGalleryItem[] = [
    { src: 'img/1.jpg', thumb: 'img/1-t.jpg', alt: 'Mountains' },
    { src: 'img/2.jpg', thumb: 'img/2-t.jpg', alt: 'Forest' },
];
</script>

<template>
    <button @click="gallery?.openGallery(1)">Open at slide 2</button>
    <LightGallery ref="gallery" :slides="items" />
</template>
```

## Settings, events and slots

Settings are same-named props (`:mode`, `:speed`, `:loop`,
`:caption-position`, …); the [settings reference](/docs/settings/) lists
every one. Events are kebab-case emits of the documented
[event names](/docs/events/) without the `on` prefix (`@before-open`,
`@after-slide`, `@slide-item-load`, …).

Scoped slots swap parts of the chrome for your own markup: `#caption`
(`{ item, index }`), `#counter` (`{ current, total }`), `#prev-button`,
`#next-button` and, with the comment plugin, `#comments` (`{ item, index }`).
The `:icons` prop replaces any [control icon](/docs/custom-icons/) by
name. An inline gallery mounts into the element you pass as `:container`.

## Plugins (all 14, plus the justified layout)

Each plugin is its own tree-shakable subpath
`@lightgallery/vue/plugins/<name>` exporting a plugin object for the
`:plugins` prop. Per-plugin settings go on a same-named gallery prop
(e.g. `:zoom="{ scale: 1.5 }"`). A multi-word plugin name works in either
spelling, `:medium-zoom="{ margin: 24 }"` or `:mediumZoom`:

| Plugin | Subpath | Key options (prop of the same name) |
|---|---|---|
| thumbnail | `plugins/thumbnail` | `thumbWidth`, `thumbHeight`, `thumbMargin`, `animateThumb`, `toggleThumb` |
| zoom | `plugins/zoom` | `scale`, `actualSize`, `showZoomInOutIcons`, `infiniteZoom`, `enableZoomAfter` |
| video | `plugins/video` | `autoplayFirstVideo`, `autoplayVideoOnSlide`, `youTubePlayerParams`, `vimeoPlayerParams`, `gotoNextSlideOnVideoEnd` |
| autoplay | `plugins/autoplay` | `slideShowAutoplay`, `slideShowInterval`, `progressBar`, `forceSlideShowAutoplay` |
| fullscreen | `plugins/fullscreen` | `fullScreen` |
| hash | `plugins/hash` | `galleryId`, `customSlideName` |
| pager | `plugins/pager` | `pager` |
| share | `plugins/share` | `facebook`, `twitter`, `pinterest`, `additionalShareOptions` (typed objects) |
| rotate | `plugins/rotate` | `rotateSpeed`, `rotateLeft/Right`, `flipHorizontal/Vertical` |
| comment | `plugins/comment` | `commentBox`; the comment body comes from the `#comments` slot |
| mediumZoom | `plugins/mediumZoom` | `margin`, `backgroundColor` (+ per-item `lgBackgroundColor`) |
| relativeCaption | `plugins/relativeCaption` | `relativeCaption` (presets `captionPosition: 'slide'`) |
| vimeoThumbnail | `plugins/vimeoThumbnail` | `showVimeoThumbnails`, `showThumbnailWithPlayButton` |
| originCrop | `plugins/originCrop` | `originCrop`: flies a cropped thumbnail from its crop ([zoom from origin](/demos/zoom-from-origin/)) |
| justified | `plugins/justified` | Not a plugin: the `<JustifiedGrid>` component wraps the triggers, with `row-height`, `gap`, `last-row` ([justified layout](/docs/justified-layout/)) |

Plugins compose per gallery instance, two galleries on one page can have
different plugin sets. Order matters for slide wrappers: put `Zoom` before
`Rotate` so zoom stays the outermost transform.

## SSR / Nuxt

- Server-safe: every entry imports without browser globals, and the closed
  gallery server-renders only your trigger markup. The lightbox overlay
  **never server-renders** (even with `open` true at first render), the
  `<Teleport>` mounts client-side only, so there is no teleport buffer to
  wire up and no hydration mismatch surface.
- In Nuxt, use the component directly in server-rendered pages, no
  `<ClientOnly>` wrapper needed. Deep-link flows (hash plugin) run after
  hydration.
- Import the CSS globally (`nuxt.config` `css: ['lightgallery/css/...']`).

## Accessibility

The open gallery is a modal dialog (`role="dialog"`, `aria-modal`, an
accessible name, with an `:aria-labelledby` override). Focus moves in on
open, Tab and Shift+Tab are trapped while it is open and focus returns to
the trigger on close. Every button is labelled, thumbnails and pager dots
are keyboard-operable, and `prefers-reduced-motion` disables the
animations. The open gallery passes axe WCAG A/AA checks in CI. The
[accessibility page](/docs/accessibility/) covers the live region, the
labels and the settings involved.

## Migrating from the legacy `lightgallery/vue` wrapper

Coming from `lightgallery/vue`, the wrapper that shipped inside the
vanilla 2.x package? The full list is in the
[migration guide](/docs/migration/#vue); the key changes:

- `dynamicEl` → `:slides` (typed `LgGalleryItem[]`), or `<LgItem>` trigger
  components for uncontrolled galleries.
- `onAfterSlide` etc. → kebab-case emits without the prefix:
  `@after-slide`.
- `appendSubHtmlTo` → `captionPosition: 'bar' | 'slide' | 'outer'`;
  `subHtml` strings → `caption` (plain string), the `#caption` slot, or the
  explicit raw-HTML `captionHtml` opt-in.
- Plugin constructor arrays → plugin objects on `:plugins`, options via
  same-named gallery props.
- Dropped (2.x DOM-scraping/HTML-string era): `selector`, `extraProps`,
  `getCaptionFromTitleOrAlt`, `nextHtml`/`prevHtml`, `appendCounterTo`,
  `videojs`.

## Next steps

- [Vue image gallery](/demos/vue-image-gallery/) and
  [video gallery](/demos/vue-video-gallery/) demos, each with the code
  behind it.
- Features that work the same in every package:
  [justified layout](/docs/justified-layout/),
  [virtualization](/docs/virtualization/),
  [thumbnail scrubbing](/docs/thumbnail-scrubbing/),
  [video facades](/docs/video-facades/),
  [custom icons](/docs/custom-icons/),
  [localization and RTL](/docs/localization-rtl/) and
  [responsive loading](/docs/responsive-loading/).
- The [settings reference](/docs/settings/), every setting is a prop of
  the same name, and the [events](/docs/events/) list, each one a
  kebab-case emit here.

## License

Free and open source under the GPLv3, like every lightGallery package. If
your project keeps its source proprietary, a [commercial license](/license/)
covers it: same code, nothing gated. Use `0000-0000-000-0000` as a temporary
`licenseKey` for evaluation.


---

# @lightgallery/angular

> A native Angular lightGallery component. Angular renders the triggers and the lightbox, with standalone components, signal inputs and outputs and zoneless change detection.

A native Angular lightGallery component. Angular renders the triggers and the lightbox, with standalone components, signal inputs and outputs and zoneless change detection.

Canonical page: https://www.lightgalleryjs.com/docs/angular/

`@lightgallery/angular` is a native Angular component, not a wrapper
around the vanilla script. Angular renders every node, in the trigger grid
and in the lightbox, so nothing else mutates your DOM. You get standalone
components, signal inputs and outputs, zoneless change detection, CDK
overlay and a11y, and a secondary entry point per plugin in Angular
Package Format. Styling reuses the published `lightgallery/css/*` files,
so the lightbox looks exactly like the vanilla one.

## Install

```bash
npm install @lightgallery/angular @angular/cdk lightgallery
```

Peer ranges: `@angular/core`, `@angular/common`, `@angular/platform-browser`
and `@angular/cdk` `>=21 <23`. There is no `zone.js` in the package.

The stylesheets ship from the `lightgallery` package. Import them in your
root stylesheet, or add the same paths to the `styles` array in
`angular.json`:

```css
/* src/styles.css */
@import 'lightgallery/css/lightgallery.css';
/* plus the CSS of each feature you use, e.g.: */
@import 'lightgallery/css/lg-thumbnail.css';
@import 'lightgallery/css/lg-zoom.css';
```

## Quick start, uncontrolled

Thumbnails on the page open the lightbox; mount order defines slide order.

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
    type SlideEventDetail,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features" (afterSlide)="onSlide($event)">
            @for (item of items; track item.src) {
                <a [href]="item.src" [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withThumbnail({ thumbWidth: 120 }), withZoom()];
    items: LgGalleryItem[] = [
        {
            src: 'img/1.jpg',
            thumb: 'img/1-t.jpg',
            alt: 'Mountains',
            caption: 'Mountains',
            lgSize: '1600-1067', // natural size, enables the zoom-from-origin open animation
        },
    ];

    onSlide(event: SlideEventDetail): void {
        console.log(event.index, event.prevIndex);
    }
}
```

## Controlled

Pass `[slides]` instead of `[lgGalleryItem]` children and the component
renders no triggers; `[open]` with `(closed)` and the two-way `[(index)]`
give you the state.

```ts
import { Component, signal } from '@angular/core';
import { LgGalleryComponent, type LgGalleryItem } from '@lightgallery/angular';

@Component({
    imports: [LgGalleryComponent],
    template: `
        <button (click)="open.set(true)">Open gallery</button>
        <lg-gallery
            [slides]="items"
            [open]="open()"
            (closed)="open.set(false)"
            [(index)]="index"
        />
    `,
})
export class Gallery {
    open = signal(false);
    index = signal(0);
    items: LgGalleryItem[] = [
        { src: 'img/1.jpg', thumb: 'img/1-t.jpg', alt: 'Mountains' },
        { src: 'img/2.jpg', thumb: 'img/2-t.jpg', alt: 'Forest' },
    ];
}
```

## Imperative

A template reference (`#lg="lgGallery"`) exposes `openGallery(index?)`,
`closeGallery()`, `goToSlide(index)`, `nextSlide()`, `prevSlide()` and
`refresh()`.

```ts
import { Component } from '@angular/core';
import { LgGalleryComponent, type LgGalleryItem } from '@lightgallery/angular';

@Component({
    imports: [LgGalleryComponent],
    template: `
        <button (click)="lg.openGallery(1)">Open at slide 2</button>
        <lg-gallery #lg="lgGallery" [slides]="items" />
    `,
})
export class Gallery {
    items: LgGalleryItem[] = [
        { src: 'img/1.jpg', thumb: 'img/1-t.jpg', alt: 'Mountains' },
        { src: 'img/2.jpg', thumb: 'img/2-t.jpg', alt: 'Forest' },
    ];
}
```

## Settings, events and slots

Settings are same-named signal inputs (`[mode]`, `[speed]`, `[loop]`,
`[captionPosition]`, …); the [settings reference](/docs/settings/) lists
every one. Events are outputs of the documented
[event names](/docs/events/) without the `on` prefix (`(beforeOpen)`,
`(afterSlide)`, `(slideItemLoad)`, …).

Templates swap parts of the chrome for your own markup. Each is an
`ng-template` carrying one of the directives `lgCaption`
(`let-item let-index="index"`), `lgCounter` (`let-current let-total="total"`),
`lgPrevButton` or `lgNextButton`, placed inside `<lg-gallery>`:

```html
<lg-gallery [slides]="items">
    <ng-template lgCaption let-item let-index="index">
        <h4>{{ item?.caption }}</h4>
        <p>Slide {{ index + 1 }}</p>
    </ng-template>
</lg-gallery>
```

An `lgIcon` template replaces any [control icon](/docs/custom-icons/) by
name. An inline gallery mounts into the element you pass as `[container]`.

## Features (all 14, plus the justified layout)

Each feature is its own tree-shakable entry point
`@lightgallery/angular/plugins/<name>` exposing a `with<Name>(options?)`
factory for the `[features]` input:

| Feature | Import | Key options (passed to the factory) |
|---|---|---|
| thumbnail | `withThumbnail()` | `thumbWidth`, `thumbHeight`, `thumbMargin`, `animateThumb`, `toggleThumb` |
| zoom | `withZoom()` | `scale`, `actualSize`, `showZoomInOutIcons`, `infiniteZoom`, `enableZoomAfter` |
| video | `withVideo()` | `autoplayFirstVideo`, `autoplayVideoOnSlide`, `youTubePlayerParams`, `vimeoPlayerParams`, `gotoNextSlideOnVideoEnd` |
| autoplay | `withAutoplay()` | `slideShowAutoplay`, `slideShowInterval`, `progressBar`, `forceSlideShowAutoplay` |
| fullscreen | `withFullscreen()` | `fullScreen` |
| hash | `withHash()` | `galleryId`, `customSlideName` |
| pager | `withPager()` | `pager` |
| share | `withShare()` | `facebook`, `twitter`, `pinterest`, `additionalShareOptions` (typed objects) |
| rotate | `withRotate()` | `rotateSpeed`, `rotateLeft/Right`, `flipHorizontal/Vertical` |
| comment | `withComment()` | `commentBox`, `commentsTemplate: TemplateRef` |
| mediumZoom | `withMediumZoom()` | `margin`, `backgroundColor` (+ per-item `lgBackgroundColor`) |
| relativeCaption | `withRelativeCaption()` | `relativeCaption` (presets `captionPosition: 'slide'`) |
| vimeoThumbnail | `withVimeoThumbnail()` | `showVimeoThumbnails`, `showThumbnailWithPlayButton` |
| originCrop | `withOriginCrop()` | `originCrop`: flies a cropped thumbnail from its crop ([zoom from origin](/demos/zoom-from-origin/)) |
| justified | `LgJustifiedGridComponent` | Not a feature: the `<lg-justified-grid>` component wraps the triggers, with `rowHeight`, `gap`, `lastRow` ([justified layout](/docs/justified-layout/)) |

Features compose per gallery instance, two galleries on one page can have
different feature sets. Order matters for slide wrappers: put `withZoom()`
before `withRotate()` so zoom stays the outermost transform.

## SSR / hydration

- Server-safe and zoneless: with `@angular/ssr` the page server-renders
  your trigger markup as static HTML; the lightbox overlay **never
  server-renders** (even with `[open]` true at bootstrap), so there is
  nothing to hydrate-mismatch. The overlay is created on open, in the
  browser only.
- Deep links (hash feature) resolve after hydration, in the browser only.

## Accessibility

The open gallery is a modal dialog (`role="dialog"`, `aria-modal`, an
accessible name). The CDK focus trap moves focus in on open, keeps Tab
inside while it is open and returns focus to the trigger on close. Every
button is labelled, thumbnails and pager dots are keyboard-operable, and
`prefers-reduced-motion` disables the animations. The open gallery passes
axe WCAG A/AA checks in CI. The [accessibility page](/docs/accessibility/)
covers the live region, the labels and the settings involved.

## Migrating from the legacy `lightgallery` Angular wrapper

Coming from `lightgallery/angular`, the wrapper that shipped inside the
vanilla 2.x package? The full list is in the
[migration guide](/docs/migration/#angular); the key changes:

- `dynamicEl` → `[slides]` (typed `LgGalleryItem[]`), or `[lgGalleryItem]`
  trigger directives for uncontrolled galleries.
- `onAfterSlide` etc. → outputs without the prefix: `(afterSlide)`.
- `appendSubHtmlTo` → `captionPosition: 'bar' | 'slide' | 'outer'`;
  `subHtml` strings → `caption` (plain string), an `lgCaption` template, or
  the explicit raw-HTML `captionHtml` opt-in (Angular-sanitized).
- Plugin constructor arrays → `with*()` feature values on `[features]`.
- Dropped (2.x DOM-scraping/HTML-string era): `selector`, `extraProps`,
  `getCaptionFromTitleOrAlt`, `nextHtml`/`prevHtml`, `appendCounterTo`,
  `videojs`.

## Next steps

- [Angular image gallery](/demos/angular-image-gallery/) and
  [video gallery](/demos/angular-video-gallery/) demos, each with the
  code behind it.
- Features that work the same in every package:
  [justified layout](/docs/justified-layout/),
  [virtualization](/docs/virtualization/),
  [thumbnail scrubbing](/docs/thumbnail-scrubbing/),
  [video facades](/docs/video-facades/),
  [custom icons](/docs/custom-icons/),
  [localization and RTL](/docs/localization-rtl/) and
  [responsive loading](/docs/responsive-loading/).
- The [settings reference](/docs/settings/), every setting is an input
  of the same name, and the [events](/docs/events/) list, each one an
  output here.

## License

Free and open source under the GPLv3, like every lightGallery package. If
your project keeps its source proprietary, a [commercial license](/license/)
covers it: same code, nothing gated. Use `0000-0000-000-0000` as a temporary
`licenseKey` for evaluation.


---

# Justified layout

> Lay gallery thumbnails out in justified rows, equal heights, varying widths, filling the container edge to edge, in vanilla JavaScript, React, Vue and Angular.

Justified thumbnail rows for every lightGallery package, no extra dependencies.

Canonical page: https://www.lightgalleryjs.com/docs/justified-layout/

lightGallery v3 ships a **justified layout** for the trigger
thumbnails: rows of equal height and varying widths that fill the
container edge to edge, like the photo grids on popular photography
sites. The row math lives in
[`@lightgallery/headless`](/docs/headless/) and is shared by all
four packages, so the same options produce the same grid everywhere. The
[justified layout demo](/demos/justified-layout/) shows it running with
the code for each stack.

How it works, in every package:

-   **Aspect ratios** come from the trigger's `data-lg-size`
    attribute, then the thumbnail's `width`/`height` attributes, then
    the loaded image's natural size (one relayout when the last
    unknown resolves). Provide `data-lg-size` for a layout with zero
    reflows.
-   The grid **reflows on container resize** (one `ResizeObserver`),
    mirrors automatically under **RTL**, and writes a precise `sizes`
    attribute on thumbnails that carry `srcset`.
-   `lastRow` controls the leftover row: `'start'` (default) keeps it
    at the natural height aligned to the reading start, `'justify'`
    stretches it edge to edge, `'hide'` hides the leftover
    thumbnails.
-   `maxScale` clamps how tall a sparse row may grow, as a multiple
    of the target row height.

All packages share one stylesheet, it is not part of the bundle, so
galleries that do not use the layout pay zero bytes:

```js
import 'lightgallery/css/lg-justified.css';
```

## How the grid loads

A justified grid cannot be positioned until the script has measured
the container, so the stylesheet keeps the thumbnails out of flow and
invisible until the layout has run. Nothing is ever seen unorganised,
and an oversized thumbnail cannot widen the page in the meantime.

Put the container class in your **markup**, not just in the script.
The plugin adds it too, but only once it runs, and the flash you are
avoiding happens before that:

```html
<div id="gallery" class="lg-justified">
    <a href="full-1.jpg" data-lg-size="1600-1067">
        <img src="thumb-1.jpg" alt="" />
    </a>
</div>
```

Once the layout has positioned a trigger, its box shows immediately as
a placeholder and the thumbnail fades in on top when it has loaded, so
the rows fill in as the images arrive. `justifiedReveal` picks the
order:

-   `'row'` (default) reveals whole rows top to bottom, each once
    every thumbnail in it has loaded.
-   `'image'` reveals each thumbnail on its own, as soon as it has
    loaded.

Two details worth knowing. Before the layout runs the container has no
height, so content below it shifts down when the rows appear; give the
container a `min-height` if that matters on your page. And the
placeholder and fade only apply to grids lightGallery lays out, so
your own layout code using the same class names is left alone.

## Vanilla JavaScript

The layout ships as a regular plugin. Adding it to `plugins` lays the
gallery's inline triggers out; dynamic galleries (no trigger grid) are
left untouched. The grid follows `refresh()` and `updateSlides()`, so
adding or removing triggers relays the rows out automatically.

```js
import lightGallery from 'lightgallery';
import lgJustified from 'lightgallery/plugins/justified';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-justified.css';

lightGallery(document.getElementById('gallery'), {
    plugins: [lgJustified, lgThumbnail, lgZoom],
    justifiedRowHeight: 180,
    justifiedGap: 8,
    justifiedLastRow: 'start',
});
```

| Setting | Default | Description |
| --- | --- | --- |
| `justified` | `true` | Enable the layout (the plugin must be in `plugins`) |
| `justifiedRowHeight` | `180` | Row height (px) the layout aims for |
| `justifiedGap` | `8` | Gap between thumbnails and between rows (px) |
| `justifiedLastRow` | `'start'` | Leftover-row policy: `'justify'`, `'start'` or `'hide'` |
| `justifiedMaxScale` | `1.75` | Row-height clamp as a multiple of `justifiedRowHeight` |
| `justifiedReveal` | `'row'` | Reveal order as thumbnails load: `'row'` or `'image'` |

The [settings reference](/docs/settings/#justified-layout-plugin) carries
the generated descriptions for the same six settings.

## React

Wrap the `LightGalleryItem` triggers in the `JustifiedGrid` component.
The rendered markup stays unpositioned until the first client-side
measure, so SSR output is hydration-safe.

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

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-justified.css';

<LightGallery plugins={[Thumbnail, Zoom]}>
    <JustifiedGrid rowHeight={180} gap={8}>
        {items.map((item) => (
            <LightGalleryItem
                key={item.src}
                item={item}
                data-lg-size={item.lgSize}
            >
                <img src={item.thumb} alt={item.alt} />
            </LightGalleryItem>
        ))}
    </JustifiedGrid>
</LightGallery>;
```

## Vue

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

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-justified.css';
</script>

<template>
    <LightGallery :plugins="[Thumbnail, Zoom]">
        <JustifiedGrid :row-height="180" :gap="8">
            <LgItem
                v-for="item of items"
                :key="item.src"
                :item="item"
                :data-lg-size="item.lgSize"
            >
                <img :src="item.thumb" :alt="item.alt" />
            </LgItem>
        </JustifiedGrid>
    </LightGallery>
</template>
```

## Angular

```ts
import { LgJustifiedGridComponent } from '@lightgallery/angular/plugins/justified';

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-justified.css';
```

```html
<lg-gallery [features]="features">
    <lg-justified-grid [rowHeight]="180" [gap]="8">
        @for (item of items; track item.src) {
            <a [lgGalleryItem]="item" [attr.data-lg-size]="item.lgSize">
                <img [src]="item.thumb" [alt]="item.alt" />
            </a>
        }
    </lg-justified-grid>
</lg-gallery>
```

## Component props (React, Vue, Angular)

The three framework components share one prop surface:

| Prop | Default | Description |
| --- | --- | --- |
| `rowHeight` | `180` | Row height (px) the layout aims for |
| `gap` | `8` | Gap between thumbnails and between rows (px) |
| `lastRow` | `'start'` | Leftover-row policy: `'justify'`, `'start'` or `'hide'` |
| `maxScale` | `1.75` | Row-height clamp as a multiple of `rowHeight` |
| `reveal` | `'row'` | Reveal order as thumbnails load: `'row'` or `'image'` |
| `direction` | `'auto'` | Reading direction; `'auto'` inherits the nearest ancestor `dir` attribute |

## Standalone grids

The row math itself is a pure function you can use without a gallery:

```js
import { getJustifiedLayout } from '@lightgallery/headless';

const { boxes, containerHeight } = getJustifiedLayout({
    ratios: [1.5, 0.66, 1.5, 1],
    containerWidth: 960,
    targetRowHeight: 180,
    gap: 8,
    lastRow: 'justify',
});
// boxes: [{ top, start, width, height }, ...] in reading order.
```

`start` offsets are logical, measured from the reading-start edge, so the same output positions a grid in LTR and RTL.


---

# Localization & RTL

> Localize every lightGallery label from one strings object and mirror the gallery for right-to-left pages, in vanilla JavaScript, React, Vue and Angular.

One strings contract for every label, and an opt-in RTL layer that mirrors the whole gallery.

Canonical page: https://www.lightgalleryjs.com/docs/localization-rtl/

## The `strings` object

Every user-facing label in lightGallery v3, core controls **and**
plugin buttons, lives in a single `strings` setting. Pass a partial
object; the keys you provide merge over the English defaults. The same
contract works in all four packages, and the
[settings reference](/docs/settings/#strings) carries the generated
description.

```js
lightGallery(el, {
    plugins: [lgThumbnail, lgZoom],
    strings: {
        closeGallery: 'Galerie schließen',
        previousSlide: 'Vorheriges Bild',
        nextSlide: 'Nächstes Bild',
        zoomIn: 'Vergrößern',
        zoomOut: 'Verkleinern',
        slideAnnouncement: 'Bild {index} von {total}',
    },
});
```

```tsx
<LightGallery
    slides={slides}
    strings={{ closeGallery: 'Galerie schließen' }}
/>
```

```vue
<LightGallery
    :slides="slides"
    :strings="{ closeGallery: 'Galerie schließen' }"
/>
```

```html
<lg-gallery
    [slides]="slides"
    [strings]="{ closeGallery: 'Galerie schließen' }"
/>
```

### Core keys

| Key | Default |
| --- | --- |
| `closeGallery` | `'Close gallery'` |
| `toggleMaximize` | `'Toggle maximize'` |
| `previousSlide` | `'Previous slide'` |
| `nextSlide` | `'Next slide'` |
| `download` | `'Download'` |
| `playVideo` | `'Play video'` |
| `mediaLoadingFailed` | `'Oops... Failed to load content...'` |
| `galleryLabel` | `'Gallery'` |
| `slideAnnouncement` | `'Image {index} of {total}'` |
| `moreOptions` | `'More options'` |

`galleryLabel` names the gallery dialog for assistive technology when
`ariaLabelledby` is not set. `slideAnnouncement` is announced politely
on every slide change, `{index}` and `{total}` are replaced with the
1-based position and the slide count, and the slide caption, when
present, is appended.

### Plugin labels

Plugin buttons read from the same object, no per-plugin
configuration needed:

| Key | Default | Plugin |
| --- | --- | --- |
| `share` | `'Share'` | Share |
| `toggleThumbnails` | `'Toggle thumbnails'` | Thumbnail |
| `toggleAutoplay` | `'Toggle Autoplay'` | Autoplay |
| `toggleFullscreen` | `'Toggle Fullscreen'` | Fullscreen |
| `zoomIn` | `'Zoom in'` | Zoom |
| `zoomOut` | `'Zoom out'` | Zoom |
| `viewActualSize` | `'View actual size'` | Zoom |
| `rotateLeft` | `'Rotate left'` | Rotate |
| `rotateRight` | `'Rotate right'` | Rotate |
| `flipHorizontal` | `'Flip horizontal'` | Rotate |
| `flipVertical` | `'Flip vertical'` | Rotate |
| `toggleComments` | `'Toggle Comments'` | Comment |

### Deprecated per-plugin objects

The v2-era per-plugin label objects (`zoomPluginStrings`,
`thumbnailPluginStrings`, `autoplayPluginStrings`,
`fullscreenPluginStrings`, `rotatePluginStrings`,
`sharePluginStrings`, `commentPluginStrings`) still work as
**deprecated aliases**: a key set explicitly on a legacy object wins
over the same key on `strings`, so existing configurations keep their
behavior. New code should use `strings` only.

## Right-to-left galleries

Set `direction: 'rtl'` and load the opt-in RTL stylesheet, keyboard
arrows, swipe advance, the slide transforms and the thumbnail strip
all mirror. The layer is a separate file, so LTR galleries pay zero
CSS bytes. The [RTL demo](/demos/rtl/) shows a mirrored gallery with
the code for each stack.

```js
import 'lightgallery/css/lg-rtl.css';

lightGallery(el, {
    plugins: [lgThumbnail, lgZoom],
    direction: 'rtl',
});
```

```tsx
import 'lightgallery/css/lg-rtl.css';

<LightGallery slides={slides} direction="rtl" />;
```

```vue
<script setup>
import 'lightgallery/css/lg-rtl.css';
</script>

<LightGallery :slides="slides" direction="rtl" />
```

```ts
import 'lightgallery/css/lg-rtl.css';
```

```html
<lg-gallery [slides]="slides" direction="rtl" />
```

In Angular, `withRtl()` is the same setting as feature-list sugar, `[features]="[withRtl(), withThumbnail()]"`, and an explicit
`[direction]` input still wins.

### The `direction` setting

| Value | Behavior |
| --- | --- |
| `'ltr'` (default) | Left-to-right, exactly as before |
| `'rtl'` | Mirrored: arrows, swipe, transforms, thumbnails |
| `'auto'` | Inherit the direction of the page/gallery element |

`'auto'` resolves from the gallery element's computed direction in
vanilla JavaScript, and from the nearest `dir` attribute
(`document.documentElement` / `document.body`) in the framework
packages. The default stays `'ltr'` so upgrading never changes
behavior on existing pages, RTL pages opt in with `'rtl'` or
`'auto'`.

### What the RTL layer covers

-   Prev/next arrows swap sides and glyphs; keyboard `ArrowLeft` /
    `ArrowRight` advance in reading order.
-   Slide resting positions, swipe advance and the release spring are
    mirrored.
-   The thumbnail strip starts at the right edge and drags in reading
    order; the counter keeps its `3 / 5` form in bidi text.
-   The share dropdown, comment drawer and toolbar chrome mirror.
-   Slide captions render `direction: rtl`, while the slide rail
    keeps internal LTR geometry (the mirroring lives in the
    transforms).

Everything is scoped to `.lg-container[dir='rtl']`, a forced-LTR
gallery inside an RTL page stays untouched. The decorative horizontal
transitions (`lg-slide-skew`, `lg-tube`, …) intentionally keep their
LTR choreography.


---

# Virtualization

> Keep thousand-item galleries fast: a bounded slide pool and a windowed thumbnail strip, one setting in vanilla JavaScript, React, Vue and Angular.

Galleries with thousands of items keep a small, constant DOM, one setting, every package.

Canonical page: https://www.lightgalleryjs.com/docs/virtualization/

Large galleries pay for every DOM node: a 1,000-item gallery that
renders 1,000 thumbnails plus mounted slides gets slow to open,
slow to scroll and heavy on memory. lightGallery v3 adds an opt-in
`virtualization` setting that bounds both:

-   **Slide pool**, only the current slide, its neighbors and any
    protected slides stay mounted. `slides` sets the pool size.
-   **Thumbnail windowing**, only the visible thumbnails plus an
    overscan render; leading and trailing **spacers** preserve the
    strip's total width, so scrollbar-free dragging, the pager math
    and the strip geometry are identical to a fully rendered strip.
    `thumbs` sets the overscan per side, or `'auto'` derives one
    extra viewport per side.

The setting is **off by default** (`undefined`), the classic
behavior: every thumbnail renders and the mounted-slide window
follows `numberOfSlideItemsInDom`. The shape is shared by all four
packages, and the [settings reference](/docs/settings/#virtualization)
carries the generated description. The
[1,000-slide stress demo](/demos/virtualization/) shows the mounted-slide
counter while you navigate.

```ts
virtualization: {
    slides: 7,      // mounted-slide pool size
    thumbs: 'auto', // thumb overscan per side: a number, or 'auto'
}
```

## Zero-cost interaction

The thumbnail window advances only at **commit points**, release,
slide change, resize, never per `pointermove`. Dragging the strip
costs nothing extra; the overscan covers the in-flight stretch. A
fast fling renders its whole flight corridor before the glide starts,
so the strip never shows blank thumbnails mid-flight, and shrinks
back to the normal window when it settles.

## Vanilla JavaScript

```js
import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';

lightGallery(el, {
    dynamic: true,
    dynamicEl: items, // thousands of items
    plugins: [lgThumbnail, lgZoom],
    virtualization: {
        slides: 7,
        thumbs: 'auto',
    },
});
```

## React

```tsx
<LightGallery
    slides={items}
    plugins={[Thumbnail, Zoom]}
    virtualization={{ slides: 7, thumbs: 'auto' }}
/>
```

## Vue

```vue
<LightGallery
    :slides="items"
    :plugins="[Thumbnail, Zoom]"
    :virtualization="{ slides: 7, thumbs: 'auto' }"
/>
```

## Angular

```html
<lg-gallery
    [slides]="items"
    [features]="[withThumbnail(), withZoom()]"
    [virtualization]="{ slides: 7, thumbs: 'auto' }"
/>
```

## Options

| Key | Default | Description |
| --- | --- | --- |
| `slides` | `numberOfSlideItemsInDom` | Mounted-slide pool size, how many slide elements exist at once, regardless of gallery length |
| `thumbs` | off | Thumbnail-strip windowing: overscan thumbs kept mounted on each side of the visible range, or `'auto'` for one extra viewport per side |

Notes:

-   Omit the whole `virtualization` object to keep the classic
    render-everything behavior, nothing changes for existing
    galleries.
-   A zoomed slide is never unmounted: zoom only ever lives on the
    current slide, which is always inside the pool.
-   Thumbnail windowing needs the Thumbnail plugin; `slides` works on
    its own.


---

# Video facades

> Provider video slides load as lightweight poster facades, the YouTube, Vimeo or Wistia iframe is created only when the user presses play.

Poster-first video slides: the provider iframe loads only when the user presses play.

Canonical page: https://www.lightgalleryjs.com/docs/video-facades/

A provider video embed (YouTube, Vimeo, Wistia) drags a lot of
JavaScript into the page the moment its iframe mounts. In v3 the
video plugin renders provider slides as **lite facades** by default: a
poster image with a play button, visually identical to the loaded
player. The real iframe is created only when the user presses play, sliding past a video costs nothing.

```js
lightGallery(el, {
    plugins: [lgVideo],
    // Facades are the default, set false for the classic
    // eager-iframe behavior on all provider slides.
    videoFacade: true,
});
```

The [video facades demo](/demos/video-facades/) shows a facade next to
an eager embed, and the [settings reference](/docs/settings/#videoFacade)
carries the generated description.

The setting ships in the video plugin and works identically in all
four packages (`videoFacade` prop/setting alongside the Video
plugin).

## The poster chain

The facade needs an image. It resolves, in order:

1.  The item's `poster`.
2.  For YouTube slides, the thumbnail endpoint
    (`img.youtube.com`), controlled by the existing
    `loadYouTubePoster` setting (default `true`).
3.  The item's `thumb`.

A slide with **no resolvable poster** keeps the previous
eager-iframe behavior, a facade never renders as an empty box.
Vimeo and Wistia posters are not synthesized from provider endpoints
(those need authenticated APIs); give those slides a `poster` or rely
on the `thumb` chain, with the vimeoThumbnail plugin active, the
fetched Vimeo thumb feeds the chain automatically.

Two settings intentionally bypass the facade: `autoplayFirstVideo`
(default `true`) and `autoplayVideoOnSlide` materialize the iframe
immediately, an autoplaying facade would defeat both.

HTML5 `<video>` slides are unaffected: they already load metadata
lazily and keep their native poster handling.

## Privacy-enhanced YouTube embeds

YouTube embeds now default to the **youtube-nocookie.com** host:

```js
lightGallery(el, {
    plugins: [lgVideo],
    youTubeNoCookie: true, // the default
});
```

-   Set `youTubeNoCookie: false` to embed through `youtube.com`
    instead.
-   Slide URLs that already point at `youtube-nocookie.com` always
    keep it, regardless of the setting.

## Framework packages

Both settings live in the Video plugin's options object:

```tsx
<LightGallery
    slides={slides}
    plugins={[Video]}
    video={{ videoFacade: true, youTubeNoCookie: true }}
/>
```

```vue
<LightGallery
    :slides="slides"
    :plugins="[Video]"
    :video="{ videoFacade: true, youTubeNoCookie: true }"
/>
```

```html
<lg-gallery
    [slides]="slides"
    [features]="[withVideo({ videoFacade: true, youTubeNoCookie: true })]"
/>
```

## Settings

| Setting | Default | Description |
| --- | --- | --- |
| `videoFacade` | `true` | Render provider slides as poster facades; the iframe mounts on play |
| `youTubeNoCookie` | `true` | Embed YouTube through the privacy-enhanced `youtube-nocookie.com` host |
| `loadYouTubePoster` | `true` | Load YouTube thumbnails as posters (feeds the facade poster chain) |


---

# Accessibility

> The lightGallery v3 accessibility contract: dialog semantics, focus management, screen-reader announcements and reduced-motion support in all four packages.

Dialog semantics, focus management, live announcements and reduced motion, the same contract in every package.

Canonical page: https://www.lightgalleryjs.com/docs/accessibility/

lightGallery v3 ships one accessibility contract across the vanilla
library and the React, Vue and Angular packages, the suites for all
four run [axe](https://github.com/dequelabs/axe-core) checks against
WCAG 2.0/2.1 A and AA rules.

## Dialog semantics

The open gallery is a modal dialog:

-   `role="dialog"` with `aria-modal="true"`.
-   Accessible name: point `ariaLabelledby` at your own caption
    element, or let the built-in label apply, `strings.galleryLabel` (default `'Gallery'`,
    [localizable](/docs/localization-rtl/)).
-   `ariaDescribedby` is available for a longer description.
-   Every control is a real `<button>` with a localizable
    `aria-label` from the same
    [`strings` object](/docs/localization-rtl/).

## Focus management

With `trapFocus` (default `true`):

-   Focus moves into the gallery when it opens and cycles inside it, `Tab` never escapes to the page behind the backdrop.
-   When the gallery closes, focus **returns to the trigger** that
    opened it.

## Screen-reader announcements

With `ariaAnnouncements` (default `true`), the gallery maintains a
dedicated polite live region (`.lg-announcer`) and announces every
slide change:

-   The template is `strings.slideAnnouncement`, default
    `'Image {index} of {total}'`, with `{index}` and `{total}`
    replaced by the 1-based position and slide count.
-   The slide's caption, when present, is appended to the
    announcement.
-   While announcements are active, the visual counter is
    `aria-hidden` and the caption bar is not a live region, each
    slide change is announced exactly once.
-   Set `ariaAnnouncements: false` to restore the previous behavior
    (live-region counter and caption bar, no announcer).

```js
lightGallery(el, {
    ariaAnnouncements: true,
    strings: {
        galleryLabel: 'Product photos',
        slideAnnouncement: 'Photo {index} of {total}',
    },
});
```

## Keyboard

-   `Escape` closes the gallery (`escKey`, default `true`).
-   `ArrowLeft` / `ArrowRight` navigate, and follow the reading
    direction under [RTL](/docs/localization-rtl/).
-   Controls are focusable buttons and activate with
    `Enter`/`Space`.

## Reduced motion

When the OS reports `prefers-reduced-motion: reduce`, every package
automatically collapses the gallery's motion: slide and open/close
animation durations drop to `0`, the backdrop appears instantly, and
the zoom-from-origin and slide-end animations are disabled. No
configuration needed, the preference wins over configured
animation settings.

## Settings

Every setting below has its generated description in the
[settings reference](/docs/settings/#ariaAnnouncements).

| Setting | Default | Description |
| --- | --- | --- |
| `trapFocus` | `true` | Trap focus inside the open gallery; restore it to the trigger on close |
| `ariaAnnouncements` | `true` | Announce slide changes through a dedicated polite live region |
| `ariaLabelledby` | `''` | ID of the element that labels the gallery dialog |
| `ariaDescribedby` | `''` | ID of the element that describes the gallery dialog |
| `escKey` | `true` | Close the gallery with `Escape` |
| `strings.galleryLabel` | `'Gallery'` | Dialog label when `ariaLabelledby` is not set |
| `strings.slideAnnouncement` | `'Image {index} of {total}'` | Announcement template for slide changes |


---

# Web Share

> The share plugin opens the native OS share sheet on touch devices and falls back to the classic dropdown, plus the X share target.

Native OS share sheet first, classic dropdown as the fallback, and sharing targets brought up to date.

Canonical page: https://www.lightgalleryjs.com/docs/web-share/

The share plugin in v3 is a **hybrid**: where the
[Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
is available, the share button opens the native OS share sheet, the
user shares to any app on their device, not just the networks in a
dropdown. Everywhere else (and whenever the browser vetoes the
payload) the classic dropdown appears, exactly as before.

```js
lightGallery(el, {
    plugins: [lgShare],
    // Optional. Defaults to native-first on touch devices,
    // dropdown-first elsewhere.
    preferNativeShare: true,
});
```

The [sharing demo](/demos/share/) shows both paths, and the
[settings reference](/docs/settings/#preferNativeShare) carries the
generated description.

-   **Default behavior**: touch devices go native-first; desktop
    keeps the dropdown. Set `preferNativeShare` explicitly to
    override in either direction.
-   If the browser rejects the payload (`navigator.canShare`), the
    click falls back to the dropdown, which stays rendered
    underneath, so there is always a working share path.
-   A user dismissing the OS sheet is not an error; nothing else
    happens.

The behavior is identical in all four packages; the frameworks take
the setting in the Share plugin's options object:

```tsx
<LightGallery slides={slides} plugins={[Share]} share={{ preferNativeShare: true }} />
```

```vue
<LightGallery :slides="slides" :plugins="[Share]" :share="{ preferNativeShare: true }" />
```

```html
<lg-gallery [slides]="slides" [features]="[withShare({ preferNativeShare: true })]" />
```

## What gets shared

The native payload is assembled per slide:

| Field | Source, in order |
| --- | --- |
| `url` | `shareUrl` → `twitterShareUrl` → `facebookShareUrl` → the page URL |
| `title` | item `title` → `alt` |
| `text` | `tweetText` → `pinterestText` |

`shareUrl` is a new item field (`data-share-url` in vanilla markup), one canonical share link per slide, used by the native sheet and
available to custom targets.

```html
<a
    data-src="img/photo.jpg"
    data-share-url="https://example.com/photos/42"
    data-tweet-text="Sunset over the ridge"
>
    <img src="img/thumb.jpg" alt="Sunset" />
</a>
```

## Updated share targets

-   The Twitter target is now **X**: links use the
    `x.com/intent/post` endpoint, the dropdown label defaults to `'X'` and
    the icon is the X mark (`shareX`). Setting names and CSS classes are
    unchanged (`lg-share-twitter`), so existing customizations keep working.
-   The share text is URL-encoded properly in the intent link.
-   The share button and its dropdown sit together in `.lg-share-outer`,
    which anchors the menu under the button. Custom CSS that positioned
    `.lg-dropdown` against the toolbar should target that wrapper instead.

## Dismissing the dropdown

The dropdown dismisses the way the toolbar's More options menu does:

-   A press anywhere outside it closes it. On another toolbar button the
    press goes through, so one click both closes the dropdown and runs
    that button. On the backdrop around the slide the press only closes
    the dropdown; it does not close the gallery.
-   Escape closes the dropdown and returns focus to the share button. The
    gallery stays open.
-   Tabbing out of the dropdown closes it.

The dimming `.lg-dropdown-overlay` element that 2.x placed behind an open
dropdown is gone; nothing in the gallery is covered while the dropdown is
open.

## Settings

| Setting | Default | Description |
| --- | --- | --- |
| `preferNativeShare` | touch devices | Try the OS share sheet first; dropdown as fallback |
| `share` | `true` | Enable the share button |
| `additionalShareOptions` | `[]` | Custom dropdown entries (unchanged from 2.x) |


---

# Hash drivers

> The hash plugin syncs deep links through the modern Navigation API where available, with an automatic History API fallback, same URLs everywhere.

Deep-link syncing rides the Navigation API where the browser has it, same URLs, cleaner history.

Canonical page: https://www.lightgalleryjs.com/docs/hash-drivers/

The hash plugin keeps the URL in sync with the open gallery
(`#lg=galleryId&slide=n`), so slides can be deep-linked and the back
button closes the gallery. In v3, the **URL engine** behind that
syncing is pluggable:

```js
lightGallery(el, {
    plugins: [lgHash],
    galleryId: 'nature',
    hashDriver: 'auto', // the default
});
```

The [hash demo](/demos/hash/) shows deep links in action, and the
[settings reference](/docs/settings/#hashDriver) carries the generated
description.

| Value | Engine |
| --- | --- |
| `'auto'` (default) | The [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API) where the browser supports it, the History API everywhere else |
| `'history'` | Force the classic engine: `history.replaceState` + `hashchange` |
| `'navigation'` | Force the Navigation API; quietly falls back to `'history'` where unsupported |

Guarantees, whichever engine runs:

-   **The URL format is identical**, deep links produced by one
    engine open correctly under the other. Nothing about your links
    changes.
-   All updates use **replace semantics**, so stepping through slides
    never floods the browser history.
-   Traversing history entries (back/forward) moves the gallery to
    the matching slide, and removing the `lg=` marker closes it.
-   The enhancement is never load-bearing: an explicit
    `'navigation'` preference on a browser without the API simply
    runs the history engine.

The behavior is identical in all four packages; the frameworks take
the settings in the Hash plugin's options object:

```tsx
<LightGallery slides={slides} plugins={[Hash]} hash={{ galleryId: 'nature' }} />
```

```vue
<LightGallery :slides="slides" :plugins="[Hash]" :hash="{ galleryId: 'nature' }" />
```

```html
<lg-gallery [slides]="slides" [features]="[withHash({ galleryId: 'nature' })]" />
```

## Settings

| Setting | Default | Description |
| --- | --- | --- |
| `hash` | `true` | Enable URL syncing |
| `hashDriver` | `'auto'` | URL engine: `'auto'`, `'history'` or `'navigation'` |
| `galleryId` | `'1'` | Unique id per gallery, mandatory with multiple galleries on one page |
| `customSlideName` | `false` | Use the item's `slideName` in the URL instead of the index |


---

# Responsive loading

> Serve the right image to every screen inside the lightbox: srcset, sizes and picture sources on slides, plus a decode gate for flash-free first paint.

Real responsive markup on every slide, and images that only count as loaded once they are decoded.

Canonical page: https://www.lightgalleryjs.com/docs/responsive-loading/

## Responsive slide images

Every package renders full responsive markup for image slides: the
main image carries `srcset`/`sizes`, and `sources` renders a real
`<picture>` element, art direction, format negotiation
(`type="image/avif"`, …) and DPR selection all work exactly as they
do in page markup, because it *is* that markup. The
[responsive image demo](/demos/responsive/) shows it running, and the
`srcset`, `sizes` and `sources` fields are described on the
[dynamic variables page](/docs/dynamic-variables/#srcset).

Vanilla (data attributes):

```html
<a
    data-src="img/photo-1600.jpg"
    data-srcset="img/photo-800.jpg 800w, img/photo-1600.jpg 1600w"
    data-sizes="90vw"
    data-lg-size="1600-1067"
>
    <img src="img/thumb.jpg" alt="" />
</a>
```

Frameworks (item fields):

```tsx
const slides = [
    {
        src: 'img/photo-1600.jpg',
        srcset: 'img/photo-800.jpg 800w, img/photo-1600.jpg 1600w',
        sizes: '90vw',
        sources: [
            {
                type: 'image/avif',
                srcset: 'img/photo-800.avif 800w, img/photo-1600.avif 1600w',
            },
        ],
        lgSize: '1600-1067',
        thumb: 'img/thumb.jpg',
    },
];
```

The vanilla markup equivalent of `sources` is `data-sources` (a JSON
array), and the classic `data-responsive` list
(`"img-480.jpg 480, img-800.jpg 800"`) keeps working as before.

## Responsive `data-lg-size`

`data-lg-size` (the natural size that drives the zoom-from-origin
animation) accepts a comma-separated responsive list, each entry is
`width-height-breakpoint`, the last entry (no breakpoint) is the
default:

```html
<a data-src="..." data-lg-size="240-160-375, 1600-1067">...</a>
```

Below a 375px-wide viewport the open animation targets the 240×160
variant; everywhere else, 1600×1067. The
[justified layout](/docs/justified-layout/) reads the same
attribute for its aspect ratios.

## The decode gate

A slide now reports *loaded* only after the browser has **decoded**
the image, not merely fetched it. The completion state
(`lg-complete`, the loading spinner, the dummy-image drop in the
zoom-from-origin flight) waits for `img.decode()` to settle, capped
at 500 ms so a slow decoder can never strand the UI. The result: the
full-resolution image appears sharp in one paint instead of flashing
half-decoded.

Browsers without `decode()` (and error paths) behave exactly as
before, the gate is progressive enhancement.

## Precise `sizes` from the layouts

When the [justified layout](/docs/justified-layout/) positions a
trigger whose thumbnail carries `srcset`, it writes the rendered
width as the thumbnail's `sizes` attribute, the browser downloads
the smallest candidate that actually covers the box.

## Headless utilities

The selection logic is exported from `@lightgallery/headless` for
custom preloading and warming strategies:

```ts
import {
    parseSrcset,
    resolveSizes,
    resolveImageSource,
    awaitDecode,
} from '@lightgallery/headless';

// Which URL would the browser pick in a 900×600 viewport at 2x DPR?
const candidate = resolveImageSource(item, {
    width: 900,
    height: 600,
    dpr: 2,
});
// → { src, width } from sources (spec order) → srcset → src, or null.
```


---

# Thumbnail scrubbing

> Turn the thumbnail strip into a scrubber, drag it and the gallery follows instantly, the interaction familiar from native photo apps.

Drag the thumbnail strip and the gallery follows your finger, instant slide changes, native photo-app feel.

Canonical page: https://www.lightgalleryjs.com/docs/thumbnail-scrubbing/

By default the thumbnail strip scrolls independently: you browse it,
then tap a thumbnail to navigate. With **`scrubThumbnails`** the strip
becomes a scrubber, while it is dragged (or still gliding after a
flick), the slide under the strip's travel position becomes current
immediately, with no slide transitions:

```js
lightGallery(el, {
    plugins: [lgThumbnail],
    scrubThumbnails: true,
});
```

The [thumbnails demo](/demos/thumbnails/) has a scrubbing example, and
the [settings reference](/docs/settings/#scrubThumbnails) carries the
generated description.

How a scrub session behaves:

-   **The full strip travel spans the whole gallery**, the first and
    last slides are always reachable, and on long strips the mapping
    settles at roughly one slide per thumbnail of travel.
-   **Slide changes are instant** while the session runs. Regular
    navigation, taps on thumbnails, arrows, keyboard, swipes, keeps
    its normal transitions.
-   **The release glide keeps scrubbing**: flick the strip and the
    gallery follows it all the way to where it decelerates.
-   Scrubbing engages only when the strip actually overflows its
    container, and it requires the animated strip (`animateThumb`,
    the default). A tap is still a tap.
-   It composes with
    <a href="/docs/virtualization/">virtualization</a>: pair it with
    small `thumbWidth`/`thumbHeight` values and a windowed strip to
    scrub thousand-item galleries.

The behavior is identical in all four packages; the frameworks take
the setting in the Thumbnail plugin's options object:

```tsx
<LightGallery slides={slides} plugins={[Thumbnail]} thumbnail={{ scrubThumbnails: true }} />
```

```vue
<LightGallery :slides="slides" :plugins="[Thumbnail]" :thumbnail="{ scrubThumbnails: true }" />
```

```html
<lg-gallery [slides]="slides" [features]="[withThumbnail({ scrubThumbnails: true })]" />
```

## Settings

| Setting | Default | Description |
| --- | --- | --- |
| `scrubThumbnails` | `false` | Scrub the gallery with the thumbnail strip while it is dragged or gliding |
| `animateThumb` | `true` | The animated strip, required for scrubbing |
| `thumbWidth` / `thumbHeight` / `thumbMargin` | `100` / `'80px'` / `5` | Thumbnail geometry; smaller thumbs scrub more slides per screen of travel |


---

# Custom icons

> Replace any of the gallery controls' inline SVG icons with your own, per icon name, in vanilla JavaScript, React, Vue, and Angular.

Every control icon is an inline SVG you can swap per name, bring your own icon set without touching CSS.

Canonical page: https://www.lightgalleryjs.com/docs/custom-icons/

lightGallery's controls render inline SVG icons, there is no icon
font to load, and every icon follows the button's `color` through
`currentColor`. The **`icons`** setting swaps any of them by name:

```js
lightGallery(el, {
    icons: {
        close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg>',
        prev: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 6l-6 6 6 6"/></svg>',
        next: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>',
    },
});
```

The [custom icons demo](/demos/custom-icons/) shows a replaced icon set,
and the [settings reference](/docs/settings/#icons) carries the generated
description.

How overrides resolve:

-   **Omitted names keep the built-in icon**, override a single
    button or the whole set.
-   **State pairs apply together.** Buttons that swap icons with
    state, `maximize`/`minimize`, `autoplayPlay`/`autoplayPause`,
    `fullscreen`/`fullscreenExit`, render both icons and CSS toggles
    which one shows. Provide both names of a pair; a half-provided
    pair keeps the built-ins so no state ends up iconless.
-   **Size and color come from the button.** Icons render at the
    button's font size and inherit its color, SVGs that fill their
    viewBox and draw with `currentColor` (via `fill` or `stroke`)
    drop in with no CSS changes.
-   **Plugin icons ship with their plugin.** A name renders only when
    its feature's button is on screen, and the built-in artwork for a
    plugin's buttons is bundled with that plugin.

See it running in the <a href="/demos/custom-icons/">custom icons
demo</a>.

## React, Vue, and Angular

Each framework package takes custom icons in its own idiomatic form;
the resolution rules above are identical everywhere.

React, the `render.icon` slot returns a node per name; return
`undefined` for names that should keep the built-in icon:

```tsx
<LightGallery
    slides={slides}
    render={{
        icon: (name) => (name === 'close' ? <CloseIcon /> : undefined),
    }}
/>
```

Vue, the `:icons` prop maps names to SVG components or raw SVG
strings:

```vue
<LightGallery
    :slides="slides"
    :icons="{ close: CloseIcon, next: NextIcon }"
/>
```

Angular, an `lgIcon` template declares the names it covers and
renders an SVG per name:

```html
<lg-gallery [slides]="slides">
    <ng-template [lgIcon]="['close', 'prev', 'next']" let-name>
        @switch (name) {
            @case ('close') { <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18" /></svg> }
            @case ('prev') { <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 6l-6 6 6 6" /></svg> }
            @case ('next') { <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6" /></svg> }
        }
    </ng-template>
</lg-gallery>
```

The template's `lgIcon` name list plays the role of the object keys, a state pair must have both names listed (and rendered) for the pair
to apply.

## Icon names

| Feature | Names |
| --- | --- |
| Core | `close`, `prev`, `next`, `download`, `more`, `maximize` / `minimize` (pair) |
| Zoom plugin | `zoomIn`, `zoomOut` (the actual-size button renders this pair and its zoom state picks one), `actualSize` (unused by any default rendering) |
| Rotate plugin | `rotateLeft`, `rotateRight`, `flipHorizontal`, `flipVertical` |
| Share plugin | `share`, `shareFacebook`, `shareX`, `sharePinterest` |
| Autoplay plugin | `autoplayPlay` / `autoplayPause` (pair) |
| Fullscreen plugin | `fullscreen` / `fullscreenExit` (pair) |
| Comment plugin | `comment`, `commentClose` |
| Thumbnail plugin | `toggleThumbnails` |

## Settings

| Setting | Default | Description |
| --- | --- | --- |
| `icons` | `{}` | SVG markup per icon name; omitted names keep the built-in icon |


---

# lightGallery 2.x Angular wrapper (archive)

> Archived documentation for the lightGallery 2.x Angular wrapper. Version 3 ships a native Angular package, see the migration guide.

Documentation for the legacy 2.x Angular wrapper, kept for projects that have not migrated yet.

Canonical page: https://www.lightgalleryjs.com/docs/v2/angular/

> **Archived.** This page documents the **2.x** `lightgallery/angular` wrapper,
> which embedded the vanilla runtime. lightGallery 3 ships
> [`@lightgallery/angular`](/docs/angular/), a native Angular package, start
> there for new projects, and see the
> [migration guide](/docs/migration/) to upgrade.

<a class="btn btn-outline-primary" href="https://stackblitz.com/edit/lightgallery-angular" target="_blank">StackBlitz
Demo</a>

## Installation

Follow the below steps to use lightGallery angular component in your
application. Angular 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 lightGallery module

```jsx
// For angular version 14
import { LightgalleryModule } from 'lightgallery/angular';

// lightGallery supports the last 4 major version of Angular,
// if you are using older versions of angular, you can import the respective versions
// For example, if you are using Angular version 13, you can import it using
// import { LightgalleryModule } from 'lightgallery/angular/13';

@NgModule({
    imports: [LightgalleryModule],
})
export class AppModule {}
```

Since, [version 2.2.0](https://github.com/sachinchoolur/lightGallery/releases/tag/2.2.0), lightGallery supports the last 4 major versions of Angular.
If you are using an older version of Angular, please choose the respective version.

For example, if you are using Angular version 13, you can import it by suffixing the version number as shown below

```js
import { LightgalleryModule } from 'lightgallery/angular/13';
```

-   import styles in styles.scss

```scss
@import '~lightgallery/scss/lightgallery';
```

-   template

```html
<lightgallery [settings]="settings" [onInit]="onInit">
    <a href="img/img1.jpg">
        <img alt="img1" src="img/thumb1.jpg" />
    </a>
    <a href="img/img1.jpg">
        <img alt="img2" src="img/thumb1.jpg" />
    </a>
</lightgallery>
```

## Inputs

All lightGallery settings can be passed to angular component via settings input.
Additionally, you can use lifecycle hook methods listed below to hook into
lightGallery component lifecycle. Almost every method passes a detail object
which holds useful plugin data

#### usage example

```js
@Component({
    selector: 'gallery',
    template: `
        <lightgallery [settings]="settings" [onBeforeSlide]="onBeforeSlide">
            <a href="img/img1.jpg">
                <img alt="img1" src="img/thumb1.jpg" />
            </a>
            <a href="img/img1.jpg">
                <img alt="img2" src="img/thumb1.jpg" />
            </a>
        </lightgallery>
    `,
})
export class AppComponent {
    settings = {
        counter: false,
        plugins: [lgZoom],
    };
    onBeforeSlide = (detail: BeforeSlideDetail): void => {
        const { index, prevIndex } = detail;
        console.log(index, prevIndex);
    };
}
```

### `onInit`

Fired only once when lightGallery is initialized

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `instance` | `LightGallery` | The gallery instance, the same object lightGallery() returns. |

**Example**

```js
const lg = document.getElementById('custom-events-demo');
  // Perform any action on lightGallery initialization.
  // Init event returns the plugin instance that can be used to call any lightGallery public method
  let pluginInstance = null;
  lg.addEventListener('lgInit', (event) => {
     pluginInstance = event.detail.instance;
  });
  lightGallery(lg);
```

See also: [Methods](https://www.lightgalleryjs.com/docs/methods/)
### `onBeforeOpen`

Fired immediately before opening the gallery
### `onAfterOpen`

Fired immediately after opening the gallery
### `onAfterAppendSlide`

Fired when the slide content has been inserted into its slide container.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onAfterAppendSubHtml`

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

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onSlideItemLoad`

Fired once the media inside the slide has been completely loaded, or has failed to load and the slide shows its error message instead.

**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` | True when the loaded slide is the first one shown after the gallery opened. |
### `onHasVideo`

Fired 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 |
### `onBeforeSlide`

Fired 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 |

**Example**

```js
const lg = document.getElementById('custom-events-demo');
  // Perform any action before each slide transition
  lg.addEventListener('lgBeforeSlide', (event) => {
      const { index, prevIndex } = event.detail;
      alert(index, prevIndex);
  });
  lightGallery(lg);
```
### `onAfterSlide`

Fired 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 |
### `onBeforeNextSlide`

Fired 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 |
### `onBeforePrevSlide`

Fired 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 |
### `onPosterClick`

Fired when the video poster is clicked.
### `onDragStart`

Fired when the drag event to move to different slide starts.
### `onDragMove`

Fired periodically during the drag operation.
### `onDragEnd`

Fired when the user has finished the drag operation
### `onContainerResize`

Fired when the lightGallery container has been resized.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onBeforeClose`

Fired immediately before the start of the close process.
### `onAfterClose`

Fired immediately once lightGallery is closed.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `instance` | `LightGallery` | The gallery instance, the same object lightGallery() returns. |
### `onRotateLeft`

Fired when the image is rotated in anticlockwise direction

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onRotateRight`

Fired when the image is rotated in clockwise direction

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onFlipHorizontal`

Fired when the image is flipped horizontally

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onFlipVertical`

Fired 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.

<a class="btn btn-outline-primary" href="https://stackblitz.com/edit/lightgallery-angular-update-slides" target="_blank">StackBlitz
Demo</a>

```ts
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
    private lightGallery!: LightGallery;
    private needRefresh = false;
    ngAfterViewChecked(): void {
        if (this.needRefresh) {
            this.lightGallery.refresh();
            this.needRefresh = false;
        }
    }
    title = 'angular-demo';
    settings = {
        counter: false,
        plugins: [lgZoom],
    };
    items = [
        {
            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',
        },
    ];
    onInit = (detail: InitDetail): void => {
        this.lightGallery = detail.instance;
    };
    addImage = () => {
        this.items = [
            ...this.items,
            {
                id: '5',
                size: '1400-800',
                src: 'img-5.jpg',
                thumb: 'thumb-5.jpg',
            },
        ];
        this.needRefresh = true;
    };
}
```


---

# lightGallery 2.x Vue wrapper (archive)

> Archived documentation for the lightGallery 2.x Vue wrapper. Version 3 ships a native Vue package, see the migration guide.

Documentation for the legacy 2.x Vue wrapper, kept for projects that have not migrated yet.

Canonical page: https://www.lightgalleryjs.com/docs/v2/vue/

> **Archived.** This page documents the **2.x** `lightgallery/vue` wrapper,
> which embedded the vanilla runtime. lightGallery 3 ships
> [`@lightgallery/vue`](/docs/vue/), a native Vue package, start
> there for new projects, and see the
> [migration guide](/docs/migration/) to upgrade.

> lightGallery Vue.js component works only with Vue.js version 3 and above. For vue.js 2 please follow this link

<a class="btn btn-outline-primary" href="https://stackblitz.com/edit/lightgallery-vue" target="_blank">StackBlitz
Demo</a>

## Installation

Follow the below steps to use lightGallery vue component in your application.
Vue 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 vue component and styles

```vue
<template>
    <lightgallery
        :settings="{ speed: 500, plugins: plugins }"
        :onInit="onInit"
        :onBeforeSlide="onBeforeSlide"
    >
        <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>
        <!-- more items -->
    </lightgallery>
</template>

<script lang="ts">
    import { Options, Vue } from 'vue-class-component';
    import Lightgallery from 'lightgallery/vue';
    import lgThumbnail from 'lightgallery/plugins/thumbnail';
    import lgZoom from 'lightgallery/plugins/zoom';

    // If you are using scss you can skip the css imports below and use scss instead
    import styles from 'lightgallery/scss/lightgallery.scss';

    @Options({
        components: {
            Lightgallery,
        },
        data: () => ({
            plugins: [lgThumbnail, lgZoom],
        }),
        methods: {
            onInit: () => {
                console.log('lightGallery has been initialized');
            },
            onBeforeSlide: () => {
                console.log('calling before slide');
            },
        },
    })
    export default class App extends Vue {}
</script>
<style lang="css" scoped>
    @import 'lightgallery/css/lightgallery.css';
    @import 'lightgallery/css/lg-thumbnail.css';
    @import 'lightgallery/css/lg-zoom.css';
</style>
```

## Props and methods

All lightGallery settings can be passed to vue component via settings prop.
Additionally, you can use lifecycle hook methods listed below to hook into
lightGallery component lifecycle. Almost every method passes a detail object
which holds useful plugin data

#### usage example

```js
<template>
    <lightgallery
        :onBeforeSlide="onBeforeSlide"
    >
        <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>
        // more items
    </lightgallery>
</template>
@Options({
    components: {
        Lightgallery,
    },
    methods: {
        onBeforeSlide: (detail) => {
            const { index, prevIndex } = detail;
            console.log(index, prevIndex);
        },
    },
})
export default class App extends Vue {}
```

### `onInit`

Fired only once when lightGallery is initialized

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `instance` | `LightGallery` | The gallery instance, the same object lightGallery() returns. |

**Example**

```js
const lg = document.getElementById('custom-events-demo');
  // Perform any action on lightGallery initialization.
  // Init event returns the plugin instance that can be used to call any lightGallery public method
  let pluginInstance = null;
  lg.addEventListener('lgInit', (event) => {
     pluginInstance = event.detail.instance;
  });
  lightGallery(lg);
```

See also: [Methods](https://www.lightgalleryjs.com/docs/methods/)
### `onBeforeOpen`

Fired immediately before opening the gallery
### `onAfterOpen`

Fired immediately after opening the gallery
### `onAfterAppendSlide`

Fired when the slide content has been inserted into its slide container.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onAfterAppendSubHtml`

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

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onSlideItemLoad`

Fired once the media inside the slide has been completely loaded, or has failed to load and the slide shows its error message instead.

**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` | True when the loaded slide is the first one shown after the gallery opened. |
### `onHasVideo`

Fired 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 |
### `onBeforeSlide`

Fired 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 |

**Example**

```js
const lg = document.getElementById('custom-events-demo');
  // Perform any action before each slide transition
  lg.addEventListener('lgBeforeSlide', (event) => {
      const { index, prevIndex } = event.detail;
      alert(index, prevIndex);
  });
  lightGallery(lg);
```
### `onAfterSlide`

Fired 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 |
### `onBeforeNextSlide`

Fired 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 |
### `onBeforePrevSlide`

Fired 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 |
### `onPosterClick`

Fired when the video poster is clicked.
### `onDragStart`

Fired when the drag event to move to different slide starts.
### `onDragMove`

Fired periodically during the drag operation.
### `onDragEnd`

Fired when the user has finished the drag operation
### `onContainerResize`

Fired when the lightGallery container has been resized.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onBeforeClose`

Fired immediately before the start of the close process.
### `onAfterClose`

Fired immediately once lightGallery is closed.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `instance` | `LightGallery` | The gallery instance, the same object lightGallery() returns. |
### `onRotateLeft`

Fired when the image is rotated in anticlockwise direction

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onRotateRight`

Fired when the image is rotated in clockwise direction

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onFlipHorizontal`

Fired when the image is flipped horizontally

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onFlipVertical`

Fired 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.

<a class="btn btn-outline-primary" href="https://stackblitz.com/edit/lightgallery-vue-update-slides" target="_blank">StackBlitz
Demo</a>

```ts
<template>
    <button v-on:click="updateSlides">Add new image</button>
    <lightgallery
        :settings="{ speed: 500, plugins: plugins }"
        :onInit="onInit"
        :onBeforeSlide="onBeforeSlide"
    >
        <a
            v-for="item in items"
            :key="item.id"
            :data-lg-size="item.size"
            className="gallery-item"
            :data-src="item.src"
        >
            <img className="img-responsive" :src="item.thumb" />
        </a>
    </lightgallery>
</template>

<script>
import Lightgallery from 'lightgallery/vue';
import lgZoom from 'lightgallery/plugins/zoom';
let lightGallery: any = null;
export default {
    name: 'App',
    components: {
        Lightgallery,
    },
    watch: {
        items(newVal, oldVal) {
            this.$nextTick(() => {
                lightGallery.refresh();
            });
        },
    },
    data: () => ({
        plugins: [lgZoom],
        items: [
            {
                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',
            },
        ],
    }),
    methods: {
        onInit: (detail) => {
            lightGallery = detail.instance;
        },
        updateSlides: function () {
            this.items = [
                ...this.items,
                {
                    id: '5',
                    size: '1400-800',
                    src: 'img-5.jpg',
                    thumb: 'thumb-5.jpg',
                }
            ];
            lightGallery.refresh();
        },
    },
};
</script>

```


---

# lightGallery 2.x React wrapper (archive)

> Archived documentation for the lightGallery 2.x React wrapper. Version 3 ships a native React package, see the migration guide.

Documentation for the legacy 2.x React wrapper, kept for projects that have not migrated yet.

Canonical page: https://www.lightgalleryjs.com/docs/v2/react/

> **Archived.** This page documents the **2.x** `lightgallery/react` wrapper,
> which embedded the vanilla runtime. lightGallery 3 ships
> [`@lightgallery/react`](/docs/react/), a native React package, start
> there for new projects, and see the
> [migration guide](/docs/migration/) to upgrade.

<a class="btn btn-outline-primary" href="https://stackblitz.com/edit/lightgallery-react" target="_blank">StackBlitz
Demo</a>

## 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

```jsx
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>
                // more items
            </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
lightGallery 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

```js
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>
                // more items
            </LightGallery>
        </div>
    );
}
```

### `onInit`

Fired only once when lightGallery is initialized

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `instance` | `LightGallery` | The gallery instance, the same object lightGallery() returns. |

**Example**

```js
const lg = document.getElementById('custom-events-demo');
  // Perform any action on lightGallery initialization.
  // Init event returns the plugin instance that can be used to call any lightGallery public method
  let pluginInstance = null;
  lg.addEventListener('lgInit', (event) => {
     pluginInstance = event.detail.instance;
  });
  lightGallery(lg);
```

See also: [Methods](https://www.lightgalleryjs.com/docs/methods/)
### `onBeforeOpen`

Fired immediately before opening the gallery
### `onAfterOpen`

Fired immediately after opening the gallery
### `onAfterAppendSlide`

Fired when the slide content has been inserted into its slide container.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onAfterAppendSubHtml`

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

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onSlideItemLoad`

Fired once the media inside the slide has been completely loaded, or has failed to load and the slide shows its error message instead.

**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` | True when the loaded slide is the first one shown after the gallery opened. |
### `onHasVideo`

Fired 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 |
### `onBeforeSlide`

Fired 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 |

**Example**

```js
const lg = document.getElementById('custom-events-demo');
  // Perform any action before each slide transition
  lg.addEventListener('lgBeforeSlide', (event) => {
      const { index, prevIndex } = event.detail;
      alert(index, prevIndex);
  });
  lightGallery(lg);
```
### `onAfterSlide`

Fired 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 |
### `onBeforeNextSlide`

Fired 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 |
### `onBeforePrevSlide`

Fired 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 |
### `onPosterClick`

Fired when the video poster is clicked.
### `onDragStart`

Fired when the drag event to move to different slide starts.
### `onDragMove`

Fired periodically during the drag operation.
### `onDragEnd`

Fired when the user has finished the drag operation
### `onContainerResize`

Fired when the lightGallery container has been resized.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onBeforeClose`

Fired immediately before the start of the close process.
### `onAfterClose`

Fired immediately once lightGallery is closed.

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `instance` | `LightGallery` | The gallery instance, the same object lightGallery() returns. |
### `onRotateLeft`

Fired when the image is rotated in anticlockwise direction

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onRotateRight`

Fired when the image is rotated in clockwise direction

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onFlipHorizontal`

Fired when the image is flipped horizontally

**Detail**

| Name | Type | Description |
| --- | --- | --- |
| `index` | `number` | Index of the slide |
### `onFlipVertical`

Fired 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.

<a class="btn btn-outline-primary" href="https://stackblitz.com/edit/lightgallery-react-update-slides" target="_blank">StackBlitz
Demo</a>

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


---

# JavaScript image gallery with thumbnails

> Add an animated, drag-scrollable thumbnail strip to any image or video gallery. Live demo plus the markup and settings to copy into your project.

Create JavaScript image and video galleries with animated thumbnails. lightGallery thumbnails plugin supports touch swipe navigation on touchscreen devices as well as mouse drag for desktops. It allows users to navigate between slides by clicking on the thumbnails. Thumbnails plugin also allows you to load thumbnails automatically for YouTube, Vimeo, and other video sources. Find out more options in the [ docs ](https://www.lightgalleryjs.com/docs/settings/#thumbnails-plugin)

Canonical page: https://www.lightgalleryjs.com/demos/thumbnails/

> You need to include thumbnails plugin in the document.

### Animated thumbnails

_Live demo: https://www.lightgalleryjs.com/demos/thumbnails/_

**JavaScript**

**HTML**

```html
<div id="animated-thumbnails-gallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';

lightGallery(document.getElementById('animated-thumbnails-gallery'), {
    plugins: [lgThumbnail],
    thumbnail: true,
});
```

**React**

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

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// The strip is built from each item's `thumb`.
<LightGallery plugins={[Thumbnail]} thumbnail={{ animateThumb: true }}>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

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

const plugins = [Thumbnail];
const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];
</script>

<template>
    <!-- The strip is built from each item's `thumb`. -->
    <LightGallery :plugins="plugins" :thumbnail="{ animateThumb: true }">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withThumbnail({ animateThumb: true })];

    // The strip is built from each item's `thumb`.
    items: LgGalleryItem[] = [
        { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
        { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
    ];
}
```

### Scrub the gallery from the strip

Turn the strip into a scrubber with
[`scrubThumbnails`](/docs/thumbnail-scrubbing/): drag it and the
gallery follows instantly, the slide under the strip's travel
position becomes current with no transitions, and a flick keeps
scrubbing through the glide. Taps still navigate normally.

_Live demo: https://www.lightgalleryjs.com/demos/thumbnails/_

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';

lightGallery(document.getElementById('scrub-thumbnails-gallery'), {
    plugins: [lgThumbnail],
    scrubThumbnails: true,
});
```

**React**

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

<LightGallery plugins={[Thumbnail]} thumbnail={{ scrubThumbnails: true }}>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

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

const plugins = [Thumbnail];
</script>

<template>
    <LightGallery :plugins="plugins" :thumbnail="{ scrubThumbnails: true }">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';

// The template stays as above: <lg-gallery [features]="features">
features = [withThumbnail({ scrubThumbnails: true })];
```

### Static thumbnails

    _Live demo: https://www.lightgalleryjs.com/demos/thumbnails/_

**JavaScript**

**HTML**

```html
<div id="static-thumbnails">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('static-thumbnails'), {
    plugins: [lgThumbnail],
    animateThumb: false,
    zoomFromOrigin: false,
    allowMediaOverlap: true,
    toggleThumb: true,
});
```

**React**

```tsx
<LightGallery
    plugins={[Thumbnail]}
    thumbnail={{ animateThumb: false, toggleThumb: true }}
    zoomFromOrigin={false}
    allowMediaOverlap
>
    {/* items as above */}
</LightGallery>
```

**Vue**

```vue
<template>
    <LightGallery
        :plugins="plugins"
        :thumbnail="{ animateThumb: false, toggleThumb: true }"
        :zoom-from-origin="false"
        :allow-media-overlap="true"
    >
        <!-- items as above -->
    </LightGallery>
</template>
```

**Angular**

```ts
features = [withThumbnail({ animateThumb: false, toggleThumb: true })];
```

```html
<lg-gallery
    [features]="features"
    [zoomFromOrigin]="false"
    [allowMediaOverlap]="true"
>
    <!-- items as above -->
</lg-gallery>
```

### Customize more

You can customize the look and feel of the thumbnails however you want just by
updating the css files. Let's see how we can place the thumbnails on the right
hand side of the slide.

_Live demo: https://www.lightgalleryjs.com/demos/thumbnails/_

**JavaScript**

**HTML**

```html
<div id="customize-thumbnails-gallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('customize-thumbnails-gallery'), {
    plugins: [lgThumbnail],
    // Add a custom class to apply style only for the particular gallery
    addClass: 'lg-custom-thumbnails',

    appendThumbnailsTo: '.lg-outer',

    // Remove the starting animations.
    // This can be done by overriding CSS as well
    animateThumb: false,
    allowMediaOverlap: true,
});
```

**React**

```tsx
// The native packages render the strip in one place and leave the
// placement to CSS, scope it with a class of your own.
<LightGallery
    plugins={[Thumbnail]}
    className="lg-custom-thumbnails"
    thumbnail={{ animateThumb: false }}
    allowMediaOverlap
>
    {/* items as above */}
</LightGallery>
```

**Vue**

```vue
<template>
    <!-- The native packages render the strip in one place and leave the
         placement to CSS, scope it with a class of your own. -->
    <LightGallery
        :plugins="plugins"
        class-name="lg-custom-thumbnails"
        :thumbnail="{ animateThumb: false }"
        :allow-media-overlap="true"
    >
        <!-- items as above -->
    </LightGallery>
</template>
```

**Angular**

```ts
features = [withThumbnail({ animateThumb: false })];
```

```html
<!-- The native packages render the strip in one place and leave the
     placement to CSS, scope it with a class of your own. -->
<lg-gallery
    className="lg-custom-thumbnails"
    [features]="features"
    [allowMediaOverlap]="true"
>
    <!-- items as above -->
</lg-gallery>
```

##### CSS

```scss
// `addClass` puts the class on the gallery's container, above `.lg-outer`.
.lg-custom-thumbnails {
    .lg-outer {
        width: auto;
        // Set space for the container to occupy thumbnails
        right: 240px;

        // Add some spacing on the left to match with the right hand side spacing
        left: 10px;

        .lg-thumb-outer {
            // Set the position of the thumbnails
            left: auto;
            top: 0;
            // Room for two 100px thumbs, their 5px gaps, the padding
            // and a thin scrollbar
            width: 240px;
            bottom: 0;
            position: fixed;
            right: 0;

            // Reset max height
            max-height: none;

            // Customize the layout (Optional)
            background-color: #999;
            padding-left: 5px;
            padding-right: 5px;
            margin: 0 -10px;
            overflow-y: auto;
            scrollbar-width: thin;

            // Update transition values
            // By default thumbnails animates from bottom to top
            // Change that from right to left.
            // Also, add a tiny opacity transition to look better
            transform: translate3d(30%, 0, 0);
            opacity: 0;
            will-change: transform, opacity;
            transition:
                transform 0.15s cubic-bezier(0, 0, 0.25, 1) 0s,
                opacity 0.15s cubic-bezier(0, 0, 0.25, 1) 0.15s;
        }

        // The strip is a component: it opens with the gallery's components
        &.lg-components-open {
            .lg-thumb-outer {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }

        // Add a hover effect (optional)
        .lg-thumb-item {
            float: left;
            filter: grayscale(100%);
            will-change: filter;
            transition: filter 0.12s ease-in, border-color 0.12s ease;
            &:hover,
            &.active {
                filter: grayscale(0);
                border-color: #545454;
            }
        }

        .lg-thumb {
            padding: 5px 0;
        }
    }
}
```


---

# Video gallery for YouTube, Vimeo and HTML5

> Responsive video gallery demo, play YouTube, Vimeo, Wistia and self-hosted HTML5 video in a full-screen lightbox, with poster facades and thumbnails.

lightGallery supports YouTube, Vimeo, Wistia and all other types of HTML5 video formats, such as MP4, WebM, Ogg, etc.

Canonical page: https://www.lightgalleryjs.com/demos/video-gallery/

#### External videos

<p>To display YouTube, Vimeo and Wistia videos, you just need to paste the video URL, or share URL of the video in the data-src attribute. The same way you display images in the gallery. lightGallery will check the data-src attribute and if it is a video URL, it will create the respective video slide.</p>

<p>Provider videos render as lightweight facades by default: a poster with a play button, with the provider iframe created only when the user presses play. The poster falls back from the data-poster attribute to the YouTube thumbnail endpoint to the item thumb, so YouTube slides get a facade even without an explicit poster. Users can navigate to other slides by using mouse drag or swipe without loading any player code. See the <a href="/demos/video-facades/">video facades demo</a> for details and how to opt out.</p>

<p>lightGallery allows you to load thumbnail images automatically from YouTube and Vimeo. You can specify the size of the thumbnails in the settings. You need to use <a href="/docs/settings/#vimeo-thumbnails-plugin">Vimeo thumbnail plugin</a> to load thumbnails for vimeo videos. Videos will be automatically paused when a user starts to navigate to another slide.</p>

#### HTML5 videos

<p>For displaying HTML5 videos, you need to construct an object with array of video sources and types, and videos attributes objects as shown below and pass it via data-video attribute</p>
Note - data-src should not be provided when you use HTML5 videos.

**JavaScript**

```js
{
    source: [
        {
            src: '/videos/video1.mp4',
            type: 'video/mp4',
        },
        // more items
    ],
    // Optional video tracks - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track
    tracks: [
        {
            src: '/videos/title.txt',
            kind: 'captions',
        },
    ],
    attributes: { preload: false, controls: true },
};
```

**React**

```tsx
import {
    LightGallery,
    LightGalleryItem,
    type GalleryItem,
} from '@lightgallery/react';
import Video from '@lightgallery/react/plugins/video';

const items: GalleryItem[] = [
    // YouTube, Vimeo and Wistia: `src` is the address of the video page.
    {
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        lgSize: '1280-720',
    },
    // HTML5 video: no `src`. The same object as the vanilla data-video
    // attribute, as the item's `video` field.
    {
        video: {
            source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
            tracks: [
                {
                    src: '/videos/title.txt',
                    kind: 'captions',
                    srclang: 'en',
                    label: 'English',
                    default: 'true',
                },
            ],
            attributes: { preload: false, controls: true },
        },
        poster: '/images/demo/html5-video-poster.jpg',
        thumb: '/images/demo/html5-video-poster.jpg',
        alt: 'Peck Pocketed',
        lgSize: '1280-720',
    },
];

// Video slides need the Video plugin.
<LightGallery plugins={[Video]}>
    {items.map((item) => (
        <LightGalleryItem key={item.poster} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup lang="ts">
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Video from '@lightgallery/vue/plugins/video';

// Video slides need the Video plugin.
const plugins = [Video];

const items: LgGalleryItem[] = [
    // YouTube, Vimeo and Wistia: `src` is the address of the video page.
    {
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        lgSize: '1280-720',
    },
    // HTML5 video: no `src`. The same object as the vanilla data-video
    // attribute, as the item's `video` field.
    {
        video: {
            source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
            tracks: [
                {
                    src: '/videos/title.txt',
                    kind: 'captions',
                    srclang: 'en',
                    label: 'English',
                    default: 'true',
                },
            ],
            attributes: { preload: false, controls: true },
        },
        poster: '/images/demo/html5-video-poster.jpg',
        thumb: '/images/demo/html5-video-poster.jpg',
        alt: 'Peck Pocketed',
        lgSize: '1280-720',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins">
        <LgItem v-for="item of items" :key="item.poster" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withVideo } from '@lightgallery/angular/plugins/video';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.poster) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    // Video slides need the video feature.
    features = [withVideo()];

    items: LgGalleryItem[] = [
        // YouTube, Vimeo and Wistia: `src` is the address of the video page.
        {
            src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
            poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
            thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
            alt: 'Puffin Hunts Fish To Feed Puffling',
            lgSize: '1280-720',
        },
        // HTML5 video: no `src`. The same object as the vanilla data-video
        // attribute, as the item's `video` field.
        {
            video: {
                source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
                tracks: [
                    {
                        src: '/videos/title.txt',
                        kind: 'captions',
                        srclang: 'en',
                        label: 'English',
                        default: 'true',
                    },
                ],
                attributes: { preload: false, controls: true },
            },
            poster: '/images/demo/html5-video-poster.jpg',
            thumb: '/images/demo/html5-video-poster.jpg',
            alt: 'Peck Pocketed',
            lgSize: '1280-720',
        },
    ];
}
```

> Note: You need to include the lightGallery video plugin in the document to enable video slides.

**JavaScript**

**HTML**

```html
<div id="gallery-videos-demo">
    <!-- YouTube Video --->
    <a
        data-lg-size="1280-720"
        data-src="//www.youtube.com/watch?v=EIUJfXk3_3w"
        data-poster="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
        data-sub-html="<h4>Puffin Hunts Fish To Feed Puffling | Blue Planet II | BBC Earth</h4><p>On the heels of Planet Earth II's record-breaking Emmy nominations, BBC America presents stunning visual soundscapes from the series' amazing habitats.</p>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg"
        />
    </a>

    <!-- Vimeo Video --->
    <a
        data-lg-size="1280-720"
        data-src="//vimeo.com/112836958"
        data-poster="/images/demo/vimeo-video-poster.jpg"
        data-sub-html="<h4>Nature</h4><p>Video by <a target='_blank' href='https://vimeo.com/charliekaye'>Charlie Kaye</a></p>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/vimeo-video-poster.jpg"
        />
    </a>

    <!-- Wistia Video --->
    <a
        data-lg-size="1280-720"
        data-src="https://private-sharing.wistia.com/medias/mwhrulrucj"
        data-poster="/images/demo/wistia-video-poster.jpeg"
        data-sub-html="<h4>Thank You!</h4><p> Sample Wistia video </p>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/wistia-video-poster.jpeg"
        />
    </a>

    <!-- HTML5 Video --->
    <a
        data-lg-size="1280-720"
        data-video='{"source": [{"src":"/videos/video1.mp4", "type":"video/mp4"}], "tracks": [{"src": "/videos/title.txt", "kind":"captions", "srclang": "en", "label": "English", "default": "true"}], "attributes": {"preload": false, "playsinline": true, "controls": true}}'
        data-poster="/images/demo/html5-video-poster.jpg"
        data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/html5-video-poster.jpg"
        />
    </a>
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgVideo from 'lightgallery/plugins/video';

lightGallery(document.getElementById('gallery-videos-demo'), {
    plugins: [lgVideo],
});
```

**React**

```tsx
// One item per provider; `captionHtml` is the data-sub-html string.
const items: GalleryItem[] = [
    // YouTube
    {
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        captionHtml: '<h4>Puffin Hunts Fish To Feed Puffling</h4>',
        lgSize: '1280-720',
    },
    // Vimeo
    {
        src: '//vimeo.com/112836958',
        poster: '/images/demo/vimeo-video-poster.jpg',
        thumb: '/images/demo/vimeo-video-poster.jpg',
        alt: 'Nature',
        captionHtml: '<h4>Nature</h4><p>Video by Charlie Kaye</p>',
        lgSize: '1280-720',
    },
    // Wistia
    {
        src: 'https://private-sharing.wistia.com/medias/mwhrulrucj',
        poster: '/images/demo/wistia-video-poster.jpeg',
        thumb: '/images/demo/wistia-video-poster.jpeg',
        alt: 'Thank You!',
        captionHtml: '<h4>Thank You!</h4><p>Sample Wistia video</p>',
        lgSize: '1280-720',
    },
    // HTML5 video
    {
        video: {
            source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
            attributes: { preload: false, playsInline: true, controls: true },
        },
        poster: '/images/demo/html5-video-poster.jpg',
        thumb: '/images/demo/html5-video-poster.jpg',
        alt: 'Peck Pocketed',
        captionHtml: "<h4>'Peck Pocketed' by Kevin Herron</h4>",
        lgSize: '1280-720',
    },
];

// Rendered as above: <LightGallery plugins={[Video]}> with a
// LightGalleryItem per item.
```

**Vue**

```ts
// One item per provider; `captionHtml` is the data-sub-html string.
const items: LgGalleryItem[] = [
    // YouTube
    {
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        captionHtml: '<h4>Puffin Hunts Fish To Feed Puffling</h4>',
        lgSize: '1280-720',
    },
    // Vimeo
    {
        src: '//vimeo.com/112836958',
        poster: '/images/demo/vimeo-video-poster.jpg',
        thumb: '/images/demo/vimeo-video-poster.jpg',
        alt: 'Nature',
        captionHtml: '<h4>Nature</h4><p>Video by Charlie Kaye</p>',
        lgSize: '1280-720',
    },
    // Wistia
    {
        src: 'https://private-sharing.wistia.com/medias/mwhrulrucj',
        poster: '/images/demo/wistia-video-poster.jpeg',
        thumb: '/images/demo/wistia-video-poster.jpeg',
        alt: 'Thank You!',
        captionHtml: '<h4>Thank You!</h4><p>Sample Wistia video</p>',
        lgSize: '1280-720',
    },
    // HTML5 video
    {
        video: {
            source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
            attributes: { preload: false, playsinline: true, controls: true },
        },
        poster: '/images/demo/html5-video-poster.jpg',
        thumb: '/images/demo/html5-video-poster.jpg',
        alt: 'Peck Pocketed',
        captionHtml: "<h4>'Peck Pocketed' by Kevin Herron</h4>",
        lgSize: '1280-720',
    },
];

// Rendered as above: <LightGallery :plugins="plugins"> with an LgItem
// per item.
```

**Angular**

```ts
// One item per provider; `captionHtml` is the data-sub-html string.
items: LgGalleryItem[] = [
    // YouTube
    {
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        captionHtml: '<h4>Puffin Hunts Fish To Feed Puffling</h4>',
        lgSize: '1280-720',
    },
    // Vimeo
    {
        src: '//vimeo.com/112836958',
        poster: '/images/demo/vimeo-video-poster.jpg',
        thumb: '/images/demo/vimeo-video-poster.jpg',
        alt: 'Nature',
        captionHtml: '<h4>Nature</h4><p>Video by Charlie Kaye</p>',
        lgSize: '1280-720',
    },
    // Wistia
    {
        src: 'https://private-sharing.wistia.com/medias/mwhrulrucj',
        poster: '/images/demo/wistia-video-poster.jpeg',
        thumb: '/images/demo/wistia-video-poster.jpeg',
        alt: 'Thank You!',
        captionHtml: '<h4>Thank You!</h4><p>Sample Wistia video</p>',
        lgSize: '1280-720',
    },
    // HTML5 video
    {
        video: {
            source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
            attributes: { preload: false, playsinline: true, controls: true },
        },
        poster: '/images/demo/html5-video-poster.jpg',
        thumb: '/images/demo/html5-video-poster.jpg',
        alt: 'Peck Pocketed',
        captionHtml: "<h4>'Peck Pocketed' by Kevin Herron</h4>",
        lgSize: '1280-720',
    },
];

// Template and `features = [withVideo()]` as above.
```

#### Video.js example

<a href="https://videojs.com/" target="_blank">Video.js</a> is a web video
player built from the ground up for an HTML5 world. lightGallery has built-in
Video.js support: include Video.js on the page, then pass `videojs: true`
via lightGallery settings. You can also pass Video.js options via
`videojsOptions`.

Note - Make sure that you pass a proper JSON object in the data-video attribute.

##### Demo

<Html5VideoGallery id="gallery-videojs-demo" />

**JavaScript**

**HTML**

```html
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/video.js@8/dist/video-js.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/video.js@8/dist/video.min.js"></script>

<div id="gallery-videojs-demo">
    <a
        data-lg-size="1280-720"
        data-video='{"source": [{"src":"/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
        data-poster="/images/demo/html5-video-poster.jpg"
        data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/html5-video-poster.jpg"
        />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('gallery-videojs-demo'), {
    plugins: [lgVideo],
    videojs: true,
    videojsOptions: {
        muted: true,
    },
});
```

The `videojs` bridge is vanilla-only. The React, Vue and Angular
packages render HTML5 video with the native `<video>` element and leave
custom players to your own slide markup.

#### Video Autoplay

Browsers block autoplay with sound, and whether a video may start on its
own depends on [several conditions](https://developer.chrome.com/blog/autoplay/).
To stay within the policy, lightGallery mutes the video when it autoplays the
first slide. To unmute, pass `?mute=0` (YouTube) or `?muted=false` (Vimeo) in
the video URL; lightGallery forwards query parameters to the player.

On iOS, HTML5 videos may also need `"playsinline": true` to play inside the
page rather than full screen.

**JavaScript**

```html
<div id="gallery-autoplay-demo">
    <!-- YouTube Video --->
    <a
        data-lg-size="1280-720"
        data-src="//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0"
        data-poster="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
        data-sub-html="<h4>Puffin Hunts Fish To Feed Puffling | Blue Planet II | BBC Earth</h4><p>On the heels of Planet Earth II's record-breaking Emmy nominations, BBC America presents stunning visual soundscapes from the series' amazing habitats.</p>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg"
        />
    </a>

    <!-- Vimeo Video --->
    <a
        data-lg-size="1280-720"
        data-src="//vimeo.com/112836958?muted=false"
        data-poster="/images/demo/vimeo-video-poster.jpg"
        data-sub-html="<h4>Nature</h4><p>Video by <a target='_blank' href='https://vimeo.com/charliekaye'>Charlie Kaye</a></p>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/vimeo-video-poster.jpg"
        />
    </a>
    <!-- HTML5 videos -->
    <a
        data-lg-size="1280-720"
        data-video='{"source": [{"src":"/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "playsinline": true, "controls": true}}'
        data-poster="/images/demo/html5-video-poster.jpg"
        data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/html5-video-poster.jpg"
        />
    </a>
    <!-- more items -->
</div>
```

**React**

```tsx
// React spells the video attribute playsInline.
const items: GalleryItem[] = [
    {
        // YouTube: mute=0 is forwarded to the player
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        lgSize: '1280-720',
    },
    {
        // Vimeo
        src: '//vimeo.com/112836958?muted=false',
        poster: '/images/demo/vimeo-video-poster.jpg',
        thumb: '/images/demo/vimeo-video-poster.jpg',
        alt: 'Nature',
        lgSize: '1280-720',
    },
    {
        // HTML5 video
        video: {
            source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
            attributes: { playsInline: true, controls: true },
        },
        poster: '/images/demo/html5-video-poster.jpg',
        thumb: '/images/demo/html5-video-poster.jpg',
        alt: 'Peck Pocketed',
        lgSize: '1280-720',
    },
];

// Rendered as above: <LightGallery plugins={[Video]}> with a
// LightGalleryItem per item.
```

**Vue**

```ts
const items: LgGalleryItem[] = [
    {
        // YouTube: mute=0 is forwarded to the player
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        lgSize: '1280-720',
    },
    {
        // Vimeo
        src: '//vimeo.com/112836958?muted=false',
        poster: '/images/demo/vimeo-video-poster.jpg',
        thumb: '/images/demo/vimeo-video-poster.jpg',
        alt: 'Nature',
        lgSize: '1280-720',
    },
    {
        // HTML5 video
        video: {
            source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
            attributes: { playsinline: true, controls: true },
        },
        poster: '/images/demo/html5-video-poster.jpg',
        thumb: '/images/demo/html5-video-poster.jpg',
        alt: 'Peck Pocketed',
        lgSize: '1280-720',
    },
];

// Rendered as above: <LightGallery :plugins="plugins"> with an LgItem
// per item.
```

**Angular**

```ts
items: LgGalleryItem[] = [
    {
        // YouTube: mute=0 is forwarded to the player
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w&mute=0',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        lgSize: '1280-720',
    },
    {
        // Vimeo
        src: '//vimeo.com/112836958?muted=false',
        poster: '/images/demo/vimeo-video-poster.jpg',
        thumb: '/images/demo/vimeo-video-poster.jpg',
        alt: 'Nature',
        lgSize: '1280-720',
    },
    {
        // HTML5 video
        video: {
            source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
            attributes: { playsinline: true, controls: true },
        },
        poster: '/images/demo/html5-video-poster.jpg',
        thumb: '/images/demo/html5-video-poster.jpg',
        alt: 'Peck Pocketed',
        lgSize: '1280-720',
    },
];

// Template and `features = [withVideo()]` as above.
```


---

# Social sharing

> lightGallery allows sharing your images and videos across social media platforms using the unique url created by lightGallery.

Share your images and videos across social media platforms using the unique url created by lightGallery.

Canonical page: https://www.lightgalleryjs.com/demos/share/

#### Demo

> On touch devices the share button prefers the OS share sheet (`navigator.share`) when the browser supports it; the dropdown below remains the automatic fallback and the desktop default. See the [Web Share guide](https://www.lightgalleryjs.com/docs/web-share/) and the [preferNativeShare](https://www.lightgalleryjs.com/docs/settings/#preferNativeShare) setting.

**JavaScript**

**HTML**

```html
<div id="gallery-share-demo">
    <a
        data-pinterest-text="Pin it1"
        data-tweet-text="lightGallery slide 1"
        href="img/img1.jpg"
    >
        <img src="img/thumb1.jpg" />
    </a>
    <a
        data-pinterest-text="Pin it2"
        data-tweet-text="lightGallery slide 2"
        href="img/img2.jpg"
    >
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

Optionally you can pass a separate url for each image instead of the current
browser url.

```html
<div id="gallery-share-demo">
    <a
        data-pinterest-text="Pin it1"
        data-tweet-text="lightGallery slide 1"
        data-facebook-share-url="share/facebook-share-url"
        data-twitter-share-url="share/twitter-share-url"
        data-pinterest-share-url="share/pinterest-share-url"
        href="img/img1.jpg"
    >
        <img src="img/thumb1.jpg" />
    </a>
    <a
        data-pinterest-text="Pin it2"
        data-tweet-text="lightGallery slide 2"
        data-facebook-share-url="share/facebook-share-url"
        data-twitter-share-url="share/twitter-share-url"
        data-pinterest-share-url="share/pinterest-share-url"
        href="img/img2.jpg"
    >
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgShare from 'lightgallery/plugins/share';

lightGallery(document.getElementById('gallery-share-demo'), {
    plugins: [lgShare],
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Share from '@lightgallery/react/plugins/share';

// tweetText and pinterestText are the text the post on X and the pin on
// Pinterest start with; facebookShareUrl, twitterShareUrl and
// pinterestShareUrl replace the current page URL per item.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        tweetText: 'lightGallery slide 1',
        pinterestText: 'Pin it1',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        tweetText: 'lightGallery slide 2',
        pinterestText: 'Pin it2',
    },
];

// Share adds a share button to the toolbar. On touch devices it opens the
// device share sheet first; share={{ preferNativeShare: true }} (or false)
// chooses one for every device.
<LightGallery plugins={[Share]}>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import Share from '@lightgallery/vue/plugins/share';

// Share adds a share button to the toolbar. On touch devices it opens the
// device share sheet first; :share="{ preferNativeShare: true }" (or
// false) chooses one for every device.
const plugins = [Share];

// tweetText and pinterestText are the text the post on X and the pin on
// Pinterest start with; facebookShareUrl, twitterShareUrl and
// pinterestShareUrl replace the current page URL per item.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        tweetText: 'lightGallery slide 1',
        pinterestText: 'Pin it1',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        tweetText: 'lightGallery slide 2',
        pinterestText: 'Pin it2',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withShare } from '@lightgallery/angular/plugins/share';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    // withShare() adds a share button to the toolbar. On touch devices it
    // opens the device share sheet first; withShare({ preferNativeShare:
    // true }) (or false) chooses one for every device.
    features = [withShare()];

    // tweetText and pinterestText are the text the post on X and the pin
    // on Pinterest start with; facebookShareUrl, twitterShareUrl and
    // pinterestShareUrl replace the current page URL per item.
    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            tweetText: 'lightGallery slide 1',
            pinterestText: 'Pin it1',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            tweetText: 'lightGallery slide 2',
            pinterestText: 'Pin it2',
        },
    ];
}
```

#### Add new share options

By default, lightGallery supports sharing on Facebook, X (Twitter) and Pinterest.
Missing something? You can easily add your own share buttons in lightGallery.

Let's see how we can add
<a href="https://www.reddit.com/" target="_blank">Reddit</a> share button.

To share a post on Reddit, you need to create the following url structure

```
https://reddit.com/submit?url={url}&title={title}
```

**Step 1 -**

We need to fetch title attribute from each slide. lightGallery allows you to
fetch custom props from the selector element by passing the prop name via
extraProps settings

**JavaScript**

**HTML**

```html
<div id="gallery-share-reddit-demo">
    <a data-reddit-title="slide title" href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a data-reddit-title="slide title - 2" href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('gallery-share-reddit-demo'), {
    extraProps: ['redditTitle'],
});
```

**React**

```tsx
// There is no extraProps: generateLink receives the item itself, so
// the title is a field on it.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        title: 'slide title',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        title: 'slide title - 2',
    },
];
```

**Vue**

```ts
// There is no extraProps: generateLink receives the item itself, so
// the title is a field on it.
const items: LgGalleryItem[] = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        title: 'slide title',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        title: 'slide title - 2',
    },
];
```

**Angular**

```ts
// There is no extraProps: generateLink receives the item itself, so
// the title is a field on it.
items: LgGalleryItem[] = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        title: 'slide title',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        title: 'slide title - 2',
    },
];
```

**Step 2 -**

Using setting `additionalShareOptions` provide the required data to lightGallery
share plugin

#### JavaScript

**JavaScript**

```js
lightGallery(document.getElementById('gallery-share-reddit-demo'), {
    extraProps: ['redditTitle'],
    additionalShareOptions: [
        {
            // Selector for the anchor tag inside share list item
            selector: '.lg-share-reddit',

            // HTML to be appended to the share dropdown menu
            dropdownHTML:
                '<li class="lg-share-item-reddit"><a class="lg-share-reddit" target="_blank"><svg class="lg-reddit">...</svg><span class="lg-dropdown-text">Reddit</span></a></li>',

            // Construct url
            generateLink: (galleryItem) => {
                const url = window.location.href;

                // The prop data-reddit-title is converted to redditTitle and added to the gallery item
                const title = galleryItem.redditTitle;
                const redditShareLink = `https://reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`;
                return redditShareLink;
            },
        },
    ],
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Share from '@lightgallery/react/plugins/share';

// The packages take typed options instead of dropdown HTML strings:
// { text, className, generateLink }.
<LightGallery
    plugins={[Share]}
    share={{
        additionalShareOptions: [
            {
                text: 'Reddit',
                className: 'lg-share-reddit',
                generateLink: (item, currentUrl) =>
                    `https://reddit.com/submit?url=${encodeURIComponent(
                        currentUrl,
                    )}&title=${encodeURIComponent(item.title ?? '')}`,
            },
        ],
    }}
>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import Share from '@lightgallery/vue/plugins/share';

const plugins = [Share];

// The packages take typed options instead of dropdown HTML strings:
// { text, className, generateLink }.
const reddit = {
    text: 'Reddit',
    className: 'lg-share-reddit',
    generateLink: (item, currentUrl) =>
        `https://reddit.com/submit?url=${encodeURIComponent(currentUrl)}&title=${encodeURIComponent(
            item.title ?? '',
        )}`,
};
</script>

<template>
    <LightGallery
        :plugins="plugins"
        :share="{ additionalShareOptions: [reddit] }"
    >
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { withShare } from '@lightgallery/angular/plugins/share';

// The packages take typed options instead of dropdown HTML strings:
// { text, className, generateLink }. The items are the ones above.
features = [
    withShare({
        additionalShareOptions: [
            {
                text: 'Reddit',
                className: 'lg-share-reddit',
                generateLink: (item, currentUrl) =>
                    `https://reddit.com/submit?url=${encodeURIComponent(
                        currentUrl,
                    )}&title=${encodeURIComponent(item.title ?? '')}`,
            },
        ],
    }),
];
```

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

That's it. Now you can see the additional Reddit button in the share dropdown menu.

Reference - https://github.com/bradvin/social-share-urls


---

# Bootstrap carousel with lightbox gallery

> Bootstrap carousel demo with a lightbox gallery on every slide, click any slide to open it full-screen with thumbnails and zoom.

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap can be used for creating beautiful image galleries with thumbnails. Here is the demo of adding lightbox gallery support for the Bootstrap carousel.

Canonical page: https://www.lightgalleryjs.com/demos/bootstrap-image-carousel/

#### Demo

  
    <button type="button" data-bs-target="#bootstrap-gallery-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#bootstrap-gallery-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#bootstrap-gallery-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
  
  
    {photos('desert', 3).map((p, i) => (
      
        <a data-lg-size={`${p.width}-${p.height}`} class="lg-item" data-src={p.src} data-sub-html={p.caption}>
          <img class="img-responsive" alt={p.alt} src={p.sizes[1].src} />
        </a>
      
    ))}
  
  <button class="carousel-control-prev" type="button" data-bs-target="#bootstrap-gallery-carousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#bootstrap-gallery-carousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

**JavaScript**

**HTML**

```html
<div id="bootstrap-gallery-carousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <a class="lg-item" data-src="img/img1.jpg">
                <img src="img/img1-800.jpg" class="d-block w-100" alt="..." />
            </a>
        </div>
        <div class="carousel-item">
            <a class="lg-item" data-src="img/img2.jpg">
                <img src="img/img2-800.jpg" class="d-block w-100" alt="..." />
            </a>
        </div>
        <div class="carousel-item">
            <a class="lg-item" data-src="img/img3.jpg">
                <img src="img/img3-800.jpg" class="d-block w-100" alt="..." />
            </a>
        </div>
    </div>
    <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#bootstrap-gallery-carousel"
        data-bs-slide="prev"
    >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#bootstrap-gallery-carousel"
        data-bs-slide="next"
    >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>
```

**JavaScript**

```js
const carouselEl = document.getElementById('bootstrap-gallery-carousel');

// The Bootstrap 5 carousel
new bootstrap.Carousel(carouselEl, {
    interval: 2000,
    wrap: false,
});

// One gallery over the carousel items, created once
lightGallery(carouselEl.querySelector('.carousel-inner'), {
    plugins: [lgThumbnail],
    selector: '.lg-item',
});
```

**React**

```tsx
import { useEffect, useRef } from 'react';
import Carousel from 'bootstrap/js/dist/carousel';
import {
    LightGallery,
    LightGalleryItem,
    type GalleryItem,
} from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';

// `thumb` is the image on the carousel slide
const items: GalleryItem[] = [
    { src: 'img/img1.jpg', thumb: 'img/img1-800.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/img2-800.jpg', alt: 'Forest path' },
    { src: 'img/img3.jpg', thumb: 'img/img3-800.jpg', alt: 'Lake' },
];

const carouselRef = useRef<HTMLDivElement>(null);

// The Bootstrap 5 carousel
useEffect(() => {
    const carousel = new Carousel(carouselRef.current!, {
        interval: 2000,
        wrap: false,
    });
    return () => carousel.dispose();
}, []);

// One gallery over the carousel, every slide holds an item
<LightGallery plugins={[Thumbnail]}>
    <div
        id="bootstrap-gallery-carousel"
        className="carousel slide"
        ref={carouselRef}
    >
        <div className="carousel-inner">
            {items.map((item, index) => (
                <div
                    key={item.src}
                    className={
                        index === 0 ? 'carousel-item active' : 'carousel-item'
                    }
                >
                    <LightGalleryItem item={item}>
                        <img
                            src={item.thumb}
                            className="d-block w-100"
                            alt={item.alt}
                        />
                    </LightGalleryItem>
                </div>
            ))}
        </div>
        {/* The previous and next buttons, as in the Bootstrap markup */}
    </div>
</LightGallery>;
```

**Vue**

```vue
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import Carousel from 'bootstrap/js/dist/carousel';
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';

const plugins = [Thumbnail];

// `thumb` is the image on the carousel slide
const items: LgGalleryItem[] = [
    { src: 'img/img1.jpg', thumb: 'img/img1-800.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/img2-800.jpg', alt: 'Forest path' },
    { src: 'img/img3.jpg', thumb: 'img/img3-800.jpg', alt: 'Lake' },
];

const carouselEl = ref<HTMLElement | null>(null);
let carousel: Carousel | undefined;

// The Bootstrap 5 carousel
onMounted(() => {
    carousel = new Carousel(carouselEl.value!, {
        interval: 2000,
        wrap: false,
    });
});
onBeforeUnmount(() => carousel?.dispose());
</script>

<template>
    <!-- One gallery over the carousel, every slide holds an item -->
    <LightGallery :plugins="plugins">
        <div
            id="bootstrap-gallery-carousel"
            ref="carouselEl"
            class="carousel slide"
        >
            <div class="carousel-inner">
                <div
                    v-for="(item, index) of items"
                    :key="item.src"
                    class="carousel-item"
                    :class="{ active: index === 0 }"
                >
                    <LgItem :item="item">
                        <img :src="item.thumb" class="d-block w-100" :alt="item.alt" />
                    </LgItem>
                </div>
            </div>
            <!-- The previous and next buttons, as in the Bootstrap markup -->
        </div>
    </LightGallery>
</template>
```

**Angular**

```ts
import {
    afterNextRender,
    Component,
    DestroyRef,
    ElementRef,
    inject,
    viewChild,
} from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import Carousel from 'bootstrap/js/dist/carousel';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- One gallery over the carousel, every slide holds an item -->
        <lg-gallery [features]="features">
            <div #carousel id="bootstrap-gallery-carousel" class="carousel slide">
                <div class="carousel-inner">
                    @for (item of items; track item.src) {
                        <div class="carousel-item" [class.active]="$first">
                            <a [lgGalleryItem]="item">
                                <img
                                    [src]="item.thumb"
                                    class="d-block w-100"
                                    [alt]="item.alt"
                                />
                            </a>
                        </div>
                    }
                </div>
                <!-- The previous and next buttons, as in the Bootstrap
                     markup -->
            </div>
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withThumbnail()];

    // `thumb` is the image on the carousel slide
    items: LgGalleryItem[] = [
        { src: 'img/img1.jpg', thumb: 'img/img1-800.jpg', alt: 'Mountains' },
        { src: 'img/img2.jpg', thumb: 'img/img2-800.jpg', alt: 'Forest path' },
        { src: 'img/img3.jpg', thumb: 'img/img3-800.jpg', alt: 'Lake' },
    ];

    carouselEl = viewChild.required<ElementRef<HTMLElement>>('carousel');

    constructor() {
        let carousel: Carousel | undefined;

        // The Bootstrap 5 carousel
        afterNextRender(() => {
            carousel = new Carousel(this.carouselEl().nativeElement, {
                interval: 2000,
                wrap: false,
            });
        });
        inject(DestroyRef).onDestroy(() => carousel?.dispose());
    }
}
```

##### CSS (Optional)

```css
.carousel-item {
    .lg-item > img {
        height: 600px;
    }
}
```


---

# Carousel image gallery with lightbox

> Build an inline carousel slider that expands into a full-screen lightbox, one setting switches between the two, with every plugin available in both.

With lightGallery you can create both carousel slider and lightbox galleries. You can create inline gallery by passing the container element via container option. All the lightbox features are available in inline gallery as well. Inline gallery can be converted to the lightbox gallery by clicking on the maximize icon on the toolbar.

Canonical page: https://www.lightgalleryjs.com/demos/carousel-gallery/

#### Demo

**JavaScript**

**HTML**

```html
<div id="inline-gallery-container" class="inline-gallery-container"></div>
```

**JavaScript**

```js
const lgContainer = document.getElementById('inline-gallery-container');
const inlineGallery = lightGallery(lgContainer, {
    container: lgContainer,
    dynamic: true,
    // Turn off hash plugin in case if you are using it
    // as we don't want to change the url on slide change
    hash: false,
    // Do not allow users to close the gallery
    closable: false,
    // Add maximize icon to enlarge the gallery
    showMaximizeIcon: true,
    // Append caption inside the slide item
    // to apply some animation for the captions (Optional)
    appendSubHtmlTo: '.lg-item',
    // Delay slide transition to complete captions animations
    // before navigating to different slides (Optional)
    // You can find caption animation demo on the captions demo page
    slideDelay: 400,
    dynamicEl: [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            subHtml: `<div class="lightGallery-captions">
                <h4>Caption 1</h4>
                <p>Description of the slide 1</p>
            </div>`,
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            subHtml: `<div class="lightGallery-captions">
                <h4>Caption 2</h4>
                <p>Description of the slide 2</p>
            </div>`,
        },
        // more items
    ],
});

// Since we are using dynamic mode, we need to programmatically open lightGallery
inlineGallery.openGallery();
```

**React**

```tsx
import { useState } from 'react';
import { LightGallery } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';

const slides = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        captionHtml: '<h4>Caption 1</h4><p>Description of the slide 1</p>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        captionHtml: '<h4>Caption 2</h4><p>Description of the slide 2</p>',
    },
];

// An inline gallery is the same component mounted into your own
// element: keep it open and non-closable, and it behaves as a carousel.
// The element is kept in state, not in a ref: the gallery can only be
// rendered into it once it exists, and setting state renders again.
const [container, setContainer] = useState<HTMLElement | null>(null);

<>
    {/* The gallery is rendered inside this element and takes its size. */}
    <div className="inline-gallery-container" ref={setContainer} />
    {container && (
        <LightGallery
            container={container}
            // The carousel is always open and cannot be closed.
            open
            closable={false}
            // Toolbar button that expands it to the whole window.
            showMaximizeIcon
            slides={slides}
            plugins={[Thumbnail, Zoom]}
        />
    )}
</>;
```

**Vue**

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

const plugins = [Thumbnail, Zoom];
const slides = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        captionHtml: '<h4>Caption 1</h4><p>Description of the slide 1</p>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        captionHtml: '<h4>Caption 2</h4><p>Description of the slide 2</p>',
    },
];

// An inline gallery is the same component mounted into your own
// element: keep it open and non-closable, and it behaves as a carousel.
const container = ref(null);
</script>

<template>
    <!-- The gallery is rendered inside this element and takes its size. -->
    <div ref="container" class="inline-gallery-container" />
    <!-- The carousel cannot be closed. The maximize icon expands it to the
         whole window. -->
    <LightGallery
        v-if="container"
        :container="container"
        :open="true"
        :closable="false"
        :show-maximize-icon="true"
        :slides="slides"
        :plugins="plugins"
    />
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import { LgGalleryComponent, type LgGalleryItem } from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent],
    template: `
        <!-- The gallery is rendered inside this element and takes its
             size. -->
        <div #host class="inline-gallery-container"></div>
        <!-- The carousel is always open and cannot be closed. The maximize
             icon expands it to the whole window. -->
        <lg-gallery
            [container]="host"
            [open]="true"
            [closable]="false"
            [showMaximizeIcon]="true"
            [slides]="slides"
            [features]="features"
        />
    `,
})
export class Gallery {
    features = [withThumbnail(), withZoom()];

    slides: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            captionHtml: '<h4>Caption 1</h4><p>Description of the slide 1</p>',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            captionHtml: '<h4>Caption 2</h4><p>Description of the slide 2</p>',
        },
    ];
}
```

##### CSS

Set height and width for the container as the inline gallery automatically adopts the container size.

```scss
.inline-gallery-container {
    width: 100%;

    // set 60% height
    height: 0;
    padding-bottom: 65%;
}
```


---

# React carousel with lightbox gallery

> Native React carousel component, an inline slider that expands into a full-screen lightbox, with thumbnails, pinch zoom and captions.

Render @lightgallery/react inside your own element instead of a full-screen overlay and you get a carousel: the same slides, gestures, thumbnails and plugins, laid out in the page. Clicking the maximize icon turns it into the lightbox. The full component API is in the [React package docs](https://www.lightgalleryjs.com/docs/react/).

Canonical page: https://www.lightgalleryjs.com/demos/react-carousel/

#### Demo

##### Inline carousel

Pass a `container` element and the gallery mounts there instead of on
`document.body`, picking up the `lg-inline` layout. Keep it `open`, turn
`closable` off so it stays put, and leave the maximize icon on so viewers can
still go full screen:

```tsx
import { useState } from 'react';
import { LightGallery } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';

const items = [
    {
        src: 'img/1-1600.jpg',
        thumb: 'img/1-240.jpg',
        alt: 'Mountains',
        caption: <h4>Mountains</h4>,
    },
    {
        src: 'img/2-1600.jpg',
        thumb: 'img/2-240.jpg',
        alt: 'Forest path',
        caption: <h4>Forest path</h4>,
    },
];

export function Carousel() {
    const [container, setContainer] = useState<HTMLElement | null>(null);

    return (
        <>
            <div className="inline-gallery-container" ref={setContainer} />
            {container && (
                <LightGallery
                    container={container}
                    open
                    closable={false}
                    showMaximizeIcon
                    slides={items}
                    plugins={[Thumbnail, Zoom]}
                />
            )}
        </>
    );
}
```

The `container` state (rather than a plain ref) is what makes this work in
React: the element has to exist before the gallery renders into it, and a
state update re-renders once the div is mounted.

##### CSS

The inline gallery fills its container, so give the container a size. A
percentage bottom padding keeps a fixed aspect ratio:

```scss
.inline-gallery-container {
    width: 100%;
    height: 0;
    padding-bottom: 65%;
}
```

##### Settings worth knowing

| Prop | Why |
| --- | --- |
| `closable={false}` | Vertical swipe-to-close is disabled with it, the carousel stays in the page |
| `showMaximizeIcon` | Adds the toolbar button that expands the carousel into the lightbox |
| `slideDelay` | Delays the slide transition, useful when the carousel drives another element |
| `captionPosition` | `'bar'` (default) or `'slide'` to move captions onto the media |

More in the [React package docs](/docs/react/), or see the
[React image gallery](/demos/react-image-gallery/) and
[React video carousel](/demos/react-video-carousel/) demos.


---

# Video carousel

> Video carousel demo: an inline gallery of YouTube and HTML5 videos embedded in the page, with thumbnails.

With lightGallery, you can create both carousel slider and lightbox galleries. You can create inline gallery by passing the container element via container option. All the lightbox features are available in inline gallery as well. Inline gallery can be converted to the lightbox gallery by clicking on the maximize icon on the toolbar.

Canonical page: https://www.lightgalleryjs.com/demos/video-carousel/

#### Demo

**JavaScript**

**HTML**

```html
<div id="inline-gallery-container" class="inline-gallery-container"></div>
```

**JavaScript**

```js
const lgContainer = document.getElementById('inline-gallery-container');
const inlineGallery = lightGallery(lgContainer, {
    container: lgContainer,
    dynamic: true,
    plugins: [lgVideo],
    // Turn off hash plugin in case if you are using it
    // as we don't want to change the url on slide change
    hash: false,
    // Do not allow users to close the gallery
    closable: false,
    // Add maximize icon to enlarge the gallery
    showMaximizeIcon: true,
    // Append caption inside the slide item
    // to apply some animation for the captions (Optional)
    appendSubHtmlTo: '.lg-item',
    // Delay slide transition to complete captions animations
    // before navigating to different slides (Optional)
    // You can find caption animation demo on the captions demo page
    slideDelay: 400,
    dynamicEl: [
        {
            src: 'https://youtu.be/IUN664s7N-c',
            subHtml: `<h4>'Peck Pocketed' by Kevin Herron</h4>`,
        },
        {
            src: 'https://www.youtube.com/watch?v=ttLu7ygaN6I',
            subHtml: `<h4>Second video</h4>`,
            thumb: 'https://img.youtube.com/vi/ttLu7ygaN6I/mqdefault.jpg',
        },
        {
            src: 'https://www.youtube.com/watch?v=C3vyugaBhSs',
            subHtml: `<h4>UE5</h4>`,
        },
        // Add more video objects as needed
    ],
});

// Since we are using dynamic mode, we need to programmatically open lightGallery
inlineGallery.openGallery();
```

**React**

```tsx
import { useState } from 'react';
import { LightGallery, type GalleryItem } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Video from '@lightgallery/react/plugins/video';

// YouTube and Vimeo: `src` is the address of the video page. `poster`
// is the image shown before the video plays.
const slides: GalleryItem[] = [
    {
        src: 'https://youtu.be/IUN664s7N-c',
        poster: 'https://img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/IUN664s7N-c/mqdefault.jpg',
        alt: 'Peck Pocketed',
        captionHtml: "<h4>'Peck Pocketed' by Kevin Herron</h4>",
        lgSize: '1280-720',
    },
    {
        src: 'https://www.youtube.com/watch?v=ttLu7ygaN6I',
        poster: 'https://img.youtube.com/vi/ttLu7ygaN6I/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/ttLu7ygaN6I/mqdefault.jpg',
        alt: 'Second video',
        captionHtml: '<h4>Second video</h4>',
        lgSize: '1280-720',
    },
];

// An inline gallery is the same component mounted into your own
// element: keep it open and non-closable, and it behaves as a carousel.
// The element is kept in state, not in a ref: the gallery can only be
// rendered into it once it exists, and setting state renders again.
const [container, setContainer] = useState<HTMLElement | null>(null);

<>
    {/* The gallery is rendered inside this element and takes its size. */}
    <div className="inline-gallery-container" ref={setContainer} />
    {container && (
        <LightGallery
            container={container}
            // The carousel is always open and cannot be closed.
            open
            closable={false}
            // Toolbar button that expands it to the whole window.
            showMaximizeIcon
            slides={slides}
            plugins={[Thumbnail, Video]}
        />
    )}
</>;
```

**Vue**

```vue
<script setup>
import { ref } from 'vue';
import { LightGallery } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Video from '@lightgallery/vue/plugins/video';

const plugins = [Thumbnail, Video];

// YouTube and Vimeo: `src` is the address of the video page. `poster`
// is the image shown before the video plays.
const slides = [
    {
        src: 'https://youtu.be/IUN664s7N-c',
        poster: 'https://img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/IUN664s7N-c/mqdefault.jpg',
        alt: 'Peck Pocketed',
        captionHtml: "<h4>'Peck Pocketed' by Kevin Herron</h4>",
        lgSize: '1280-720',
    },
    {
        src: 'https://www.youtube.com/watch?v=ttLu7ygaN6I',
        poster: 'https://img.youtube.com/vi/ttLu7ygaN6I/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/ttLu7ygaN6I/mqdefault.jpg',
        alt: 'Second video',
        captionHtml: '<h4>Second video</h4>',
        lgSize: '1280-720',
    },
];

// An inline gallery is the same component mounted into your own
// element: keep it open and non-closable, and it behaves as a carousel.
const container = ref(null);
</script>

<template>
    <!-- The gallery is rendered inside this element and takes its size. -->
    <div ref="container" class="inline-gallery-container" />
    <!-- The carousel cannot be closed. The maximize icon expands it to the
         whole window. -->
    <LightGallery
        v-if="container"
        :container="container"
        :open="true"
        :closable="false"
        :show-maximize-icon="true"
        :slides="slides"
        :plugins="plugins"
    />
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import { LgGalleryComponent, type LgGalleryItem } from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withVideo } from '@lightgallery/angular/plugins/video';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent],
    template: `
        <!-- The gallery is rendered inside this element and takes its
             size. -->
        <div #host class="inline-gallery-container"></div>
        <!-- The carousel is always open and cannot be closed. The maximize
             icon expands it to the whole window. -->
        <lg-gallery
            [container]="host"
            [open]="true"
            [closable]="false"
            [showMaximizeIcon]="true"
            [slides]="slides"
            [features]="features"
        />
    `,
})
export class Gallery {
    features = [withThumbnail(), withVideo()];

    // YouTube and Vimeo: `src` is the address of the video page. `poster`
    // is the image shown before the video plays.
    slides: LgGalleryItem[] = [
        {
            src: 'https://youtu.be/IUN664s7N-c',
            poster: 'https://img.youtube.com/vi/IUN664s7N-c/maxresdefault.jpg',
            thumb: 'https://img.youtube.com/vi/IUN664s7N-c/mqdefault.jpg',
            alt: 'Peck Pocketed',
            captionHtml: "<h4>'Peck Pocketed' by Kevin Herron</h4>",
            lgSize: '1280-720',
        },
        {
            src: 'https://www.youtube.com/watch?v=ttLu7ygaN6I',
            poster: 'https://img.youtube.com/vi/ttLu7ygaN6I/maxresdefault.jpg',
            thumb: 'https://img.youtube.com/vi/ttLu7ygaN6I/mqdefault.jpg',
            alt: 'Second video',
            captionHtml: '<h4>Second video</h4>',
            lgSize: '1280-720',
        },
    ];
}
```

##### CSS

Set height and width for the container as the inline gallery automatically
adopts the container size.

```scss
.inline-gallery-container {
    width: 100%;

    // set 65% height
    height: 0;
    padding-bottom: 65%;
}
```


---

# Hash

> lightGallery hash plugin lets you provide a unique URL for each gallery slide.

lightGallery hash plugin allows you to create a unique URL for each gallery image. You can provide custom names for each slide too. If you have multiple galleries on a page, you have to provide a unique id for each gallery via galleryId setting.

Canonical page: https://www.lightgalleryjs.com/demos/hash/

#### Demo

The URL syncing runs on the Navigation API where the browser supports it and
falls back to the History API everywhere else, the deep-link URL format is
identical either way. See the
<a href="/docs/hash-drivers/">hash drivers guide</a>.

**JavaScript**

**HTML**

```html
<div id="gallery-hash-demo">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgHash from 'lightgallery/plugins/hash';

lightGallery(document.getElementById('gallery-hash-demo'), {
    plugins: [lgHash],
});

// With more than one gallery on a page, give each a unique galleryId.
/*
lightGallery(document.getElementById('gallery-hash-demo-2'), {
    plugins: [lgHash],
    galleryId: '2',
});
*/
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Hash from '@lightgallery/react/plugins/hash';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// galleryId is the id in the URL: #lg=1&slide=2. Give each gallery on a
// page its own. hashDriver 'auto' rides the Navigation API where the
// browser has it and falls back to History, see the hash drivers guide.
<LightGallery plugins={[Hash]} hash={{ galleryId: '1', hashDriver: 'auto' }}>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import Hash from '@lightgallery/vue/plugins/hash';

const plugins = [Hash];
const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];
</script>

<template>
    <!-- galleryId is the id in the URL: #lg=1&slide=2. Give each gallery on
         a page its own. hashDriver 'auto' rides the Navigation API where the
         browser has it and falls back to History. -->
    <LightGallery
        :plugins="plugins"
        :hash="{ galleryId: '1', hashDriver: 'auto' }"
    >
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withHash } from '@lightgallery/angular/plugins/hash';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    // galleryId is the id in the URL: #lg=1&slide=2. Give each gallery on
    // a page its own. hashDriver 'auto' rides the Navigation API where the
    // browser has it and falls back to History, see the hash drivers guide.
    features = [withHash({ galleryId: '1', hashDriver: 'auto' })];

    items: LgGalleryItem[] = [
        { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
        { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
    ];
}
```

#### Custom slide name

You can provide custom slide names for each slide by providing slide name via
`data-slide-name` attribute or `slideName` if you are using dynamic mode.

**JavaScript**

**HTML**

```html
<div id="gallery-custom-hash-demo">
    <a href="img/img1.jpg" data-slide-name="fading-light">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg" data-slide-name="Bowness Bay">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('gallery-custom-hash-demo'), {
    plugins: [lgHash],
    customSlideName: true,
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Hash from '@lightgallery/react/plugins/hash';

// Slide names come from each item's `slideName`, so deep links read
// /page/#lg=1&slide=fading-light instead of an index.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        slideName: 'fading-light',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        slideName: 'bowness-bay',
    },
];

<LightGallery plugins={[Hash]} hash={{ customSlideName: true }}>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import Hash from '@lightgallery/vue/plugins/hash';

const plugins = [Hash];

// Slide names come from each item's `slideName`, so deep links read
// /page/#lg=1&slide=fading-light instead of an index.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        slideName: 'fading-light',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        slideName: 'bowness-bay',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins" :hash="{ customSlideName: true }">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withHash } from '@lightgallery/angular/plugins/hash';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withHash({ customSlideName: true })];

    // Slide names come from each item's `slideName`, so deep links read
    // /page/#lg=1&slide=fading-light instead of an index.
    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            slideName: 'fading-light',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            slideName: 'bowness-bay',
        },
    ];
}
```


---

# Responsive image gallery

> Responsive image gallery demo: serve smaller images to smaller screens with data-responsive breakpoints, srcset and sizes, or picture sources.

Create beautiful responsive html image gallery with lightGallery. You can provide different images for different screen sizes, resolution or devices. Other than its own mechanism, lightGallery supports HTML5 picture tag, srcset and sizes for responsive images.

Canonical page: https://www.lightgalleryjs.com/demos/responsive/

### Demo

For cross browser responsive image support, lightGallery accepts a comma
separated list of image sources, each with a max width descriptor for
displaying different images for different screen sizes. For modern browsers you
can use native srcset and sizes attributes. Please refer to the next demo, and the
<a href="/docs/responsive-loading/">responsive loading guide</a> for srcset,
sizes and picture sources on slides, plus the decode gate for flash-free
first paint.

**JavaScript**

**HTML**

```html
<!-- above 757px the default href/data-src is used -->
<div id="responsive-images-demo">
    <a
        href="img/img1.jpg"
        data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757"
    >
        <img src="img/thumb1.jpg" />
    </a>
    <a
        href="img/img2.jpg"
        data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2-757.jpg 757"
    >
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('responsive-images-demo'));
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';

// The framework packages have no `responsive` field: each item lists the
// same photo in several widths as native `srcset` and `sizes`, and the
// browser picks the smallest one that fits. See the responsive loading
// guide for `<picture>` sources.
const items = [
    {
        src: 'img/1-1600.jpg',
        srcset: 'img/1-480.jpg 480w, img/1-800.jpg 800w, img/1-1600.jpg 1600w',
        // The width the slide can take: up to the whole window.
        sizes: '100vw',
        thumb: 'img/1-240.jpg',
        alt: 'Mountains',
        lgSize: '1600-1067',
    },
    {
        src: 'img/2-1600.jpg',
        srcset: 'img/2-480.jpg 480w, img/2-800.jpg 800w, img/2-1600.jpg 1600w',
        sizes: '100vw',
        thumb: 'img/2-240.jpg',
        alt: 'Forest path',
        lgSize: '1600-1067',
    },
];

<LightGallery>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';

// The framework packages have no `responsive` field: each item lists the
// same photo in several widths as native `srcset` and `sizes`, and the
// browser picks the smallest one that fits. See the responsive loading
// guide for `<picture>` sources.
const items = [
    {
        src: 'img/1-1600.jpg',
        srcset: 'img/1-480.jpg 480w, img/1-800.jpg 800w, img/1-1600.jpg 1600w',
        // The width the slide can take: up to the whole window.
        sizes: '100vw',
        thumb: 'img/1-240.jpg',
        alt: 'Mountains',
        lgSize: '1600-1067',
    },
    {
        src: 'img/2-1600.jpg',
        srcset: 'img/2-480.jpg 480w, img/2-800.jpg 800w, img/2-1600.jpg 1600w',
        sizes: '100vw',
        thumb: 'img/2-240.jpg',
        alt: 'Forest path',
        lgSize: '1600-1067',
    },
];
</script>

<template>
    <LightGallery>
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery>
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    // The framework packages have no `responsive` field: each item lists
    // the same photo in several widths as native `srcset` and `sizes`, and
    // the browser picks the smallest one that fits. See the responsive
    // loading guide for `<picture>` sources.
    items: LgGalleryItem[] = [
        {
            src: 'img/1-1600.jpg',
            srcset: 'img/1-480.jpg 480w, img/1-800.jpg 800w, img/1-1600.jpg 1600w',
            // The width the slide can take: up to the whole window.
            sizes: '100vw',
            thumb: 'img/1-240.jpg',
            alt: 'Mountains',
            lgSize: '1600-1067',
        },
        {
            src: 'img/2-1600.jpg',
            srcset: 'img/2-480.jpg 480w, img/2-800.jpg 800w, img/2-1600.jpg 1600w',
            sizes: '100vw',
            thumb: 'img/2-240.jpg',
            alt: 'Forest path',
            lgSize: '1600-1067',
        },
    ];
}
```

### HTML5 srcset and sizes

You can use native srcset and sizes attributes in lightGallery. Pass srcset and
sizes via data-srcset and data-sizes attributes respectively. lightGallery will
automatically create the image with srcset and sizes.

**JavaScript**

**HTML**

```html
<div id="lg-srcset-demo">
    <a
        href="img/img1.jpg"
        data-srcset="img/1-375.jpg 375w, img/1-480.jpg 480w, img/1-757.jpg 757w"
        data-sizes="(min-width: 40em) 80vw, 100vw"
    >
        <img src="img/thumb1.jpg" />
    </a>
    <a
        href="img/img2.jpg"
        data-srcset="img/2-375.jpg 375w, img/2-480.jpg 480w, img/2-757.jpg 757w"
        data-sizes="(min-width: 40em) 80vw, 100vw"
    >
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('lg-srcset-demo'));
```

**React**

```tsx
// `srcset` and `sizes` are item fields and land on the slide <img>
// unchanged, so any sizes expression works.
const items = [
    {
        src: 'img/img1.jpg',
        srcset: 'img/1-375.jpg 375w, img/1-480.jpg 480w, img/1-757.jpg 757w',
        sizes: '(min-width: 40em) 80vw, 100vw',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
    },
    {
        src: 'img/img2.jpg',
        srcset: 'img/2-375.jpg 375w, img/2-480.jpg 480w, img/2-757.jpg 757w',
        sizes: '(min-width: 40em) 80vw, 100vw',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
    },
];

<LightGallery>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
// `srcset` and `sizes` are item fields and land on the slide <img>
// unchanged, so any sizes expression works.
const items = [
    {
        src: 'img/img1.jpg',
        srcset: 'img/1-375.jpg 375w, img/1-480.jpg 480w, img/1-757.jpg 757w',
        sizes: '(min-width: 40em) 80vw, 100vw',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
    },
    {
        src: 'img/img2.jpg',
        srcset: 'img/2-375.jpg 375w, img/2-480.jpg 480w, img/2-757.jpg 757w',
        sizes: '(min-width: 40em) 80vw, 100vw',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
    },
];
</script>

<template>
    <LightGallery>
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
// `srcset` and `sizes` are item fields and land on the slide <img>
// unchanged, so any sizes expression works.
items: LgGalleryItem[] = [
    {
        src: 'img/img1.jpg',
        srcset: 'img/1-375.jpg 375w, img/1-480.jpg 480w, img/1-757.jpg 757w',
        sizes: '(min-width: 40em) 80vw, 100vw',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
    },
    {
        src: 'img/img2.jpg',
        srcset: 'img/2-375.jpg 375w, img/2-480.jpg 480w, img/2-757.jpg 757w',
        sizes: '(min-width: 40em) 80vw, 100vw',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
    },
];
```

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

### HTML5 picture tag

The `<picture>` tag gives web developers more flexibility in specifying image
resources. lightGallery will construct picture element if `data-sources`
attribute is specified. You can specify sources in the form of an array of
picture source objects.

For example, if you want to construct picture element in lightGallery as shown
below,

```html
<picture>
    <source media="(min-width:620px)" srcset="img/image-medium.jpg" />
    <source media="(min-width:480px)" srcset="img/image-small.jpg" />
    <img src="img/image-x-small.jpg" alt="images" />
</picture>
```

You need to use `data-sources` (or `sources` if you are using dynamic mode) as
shown below.

**JavaScript**

```html
<div>
    <a
        data-src="img/image-x-small.jpg"
        data-sources='[{"srcset": "img/image-medium.jpg", "media":"(min-width:620px)"}, {"srcset": "img/image-small.jpg", "media":"(min-width:480px)"}]'
    >
        <img alt="thumb" src="img/thumb.jpg" />
    </a>
    <!-- more items -->
</div>
```

**React**

```tsx
// The item's `sources` field takes the same objects.
const items = [
    {
        src: 'img/image-x-small.jpg',
        sources: [
            { srcset: 'img/image-medium.jpg', media: '(min-width:620px)' },
            { srcset: 'img/image-small.jpg', media: '(min-width:480px)' },
        ],
        thumb: 'img/thumb.jpg',
    },
];
```

**Vue**

```ts
// The item's `sources` field takes the same objects.
const items: LgGalleryItem[] = [
    {
        src: 'img/image-x-small.jpg',
        sources: [
            { srcset: 'img/image-medium.jpg', media: '(min-width:620px)' },
            { srcset: 'img/image-small.jpg', media: '(min-width:480px)' },
        ],
        thumb: 'img/thumb.jpg',
    },
];
```

**Angular**

```ts
// The item's `sources` field takes the same objects.
items: LgGalleryItem[] = [
    {
        src: 'img/image-x-small.jpg',
        sources: [
            { srcset: 'img/image-medium.jpg', media: '(min-width:620px)' },
            { srcset: 'img/image-small.jpg', media: '(min-width:480px)' },
        ],
        thumb: 'img/thumb.jpg',
    },
];
```

Similarly you can pass all supported
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attributes" target="_blank">attributes</a>
in the form of an object.

If you want to provide `webp` for supported browsers with `jpg` fallback image,
you can use `data-sources` in the following way

**JavaScript**

```html
<div>
    <a
        data-src="/img/img-1.jpg"
        data-sources='[{"srcset": "/img/img-1.webp", "type":"image/webp"}]'
    >
        <img alt="thumb" src="img/thumb.jpg" />
    </a>
    <!-- more items -->
</div>
```

**React**

```tsx
const items = [
    {
        src: '/img/img-1.jpg',
        sources: [{ srcset: '/img/img-1.webp', type: 'image/webp' }],
        thumb: 'img/thumb.jpg',
    },
];
```

**Vue**

```ts
const items: LgGalleryItem[] = [
    {
        src: '/img/img-1.jpg',
        sources: [{ srcset: '/img/img-1.webp', type: 'image/webp' }],
        thumb: 'img/thumb.jpg',
    },
];
```

**Angular**

```ts
items: LgGalleryItem[] = [
    {
        src: '/img/img-1.jpg',
        sources: [{ srcset: '/img/img-1.webp', type: 'image/webp' }],
        thumb: 'img/thumb.jpg',
    },
];
```

### Using zoomFromOrigin with responsive images

If you want to use `zoomFromOrigin` option with responsive images, you can
provide specific `lg-size` values for specific screen size by providing a comma
separated list of sizes combined with a max-width (up to what size the
particular image should be used)

For example, if you have similar html structure,

**JavaScript**

```html
<div>
    <a
        data-lg-size="240-160-375, 400-267-480, 1600-1067"
        data-responsive="/img/img-240.jpg 375, /img/img-400.jpg 480"
        data-src="/img/img-1600.jpg"
    >
        <img alt="thumb" src="img/thumb.jpg" />
    </a>
    <!-- more items -->
</div>
```

**React**

```tsx
// `lgSize` takes the same list. The framework packages have no
// `responsive` field: `sources` picks the image for each width.
const items = [
    {
        src: '/img/img-1600.jpg',
        sources: [
            { srcset: '/img/img-240.jpg', media: '(max-width: 374px)' },
            { srcset: '/img/img-400.jpg', media: '(max-width: 479px)' },
        ],
        lgSize: '240-160-375, 400-267-480, 1600-1067',
        thumb: 'img/thumb.jpg',
    },
];
```

**Vue**

```ts
// `lgSize` takes the same list. The framework packages have no
// `responsive` field: `sources` picks the image for each width.
const items: LgGalleryItem[] = [
    {
        src: '/img/img-1600.jpg',
        sources: [
            { srcset: '/img/img-240.jpg', media: '(max-width: 374px)' },
            { srcset: '/img/img-400.jpg', media: '(max-width: 479px)' },
        ],
        lgSize: '240-160-375, 400-267-480, 1600-1067',
        thumb: 'img/thumb.jpg',
    },
];
```

**Angular**

```ts
// `lgSize` takes the same list. The framework packages have no
// `responsive` field: `sources` picks the image for each width.
items: LgGalleryItem[] = [
    {
        src: '/img/img-1600.jpg',
        sources: [
            { srcset: '/img/img-240.jpg', media: '(max-width: 374px)' },
            { srcset: '/img/img-400.jpg', media: '(max-width: 479px)' },
        ],
        lgSize: '240-160-375, 400-267-480, 1600-1067',
        thumb: 'img/thumb.jpg',
    },
];
```

Up to `375` width, `img-240.jpg` and `lg-size` `240-160` will be used.
Similarly, up to `480` pixel width, size `400-267` and `img-400.jpg` will be
used. And above `480`, `lg-size` `1600-1067` and `img-1600.jpg` will be used.


---

# Mixed contents

> Mixed content gallery demo: images, YouTube, Vimeo and HTML5 video and iframes together in one lightbox.

Create beautiful galleries with images, HTML5 videos, external videos such as YouTube, Vimeo videos and iframes. You can mix all types of supported contents in the same gallery. lightGallery will automatically find the content type from source and create appropriate slides.

Canonical page: https://www.lightgalleryjs.com/demos/mixed-contents/

#### Demo

**JavaScript**

**HTML**

```html
<div id="gallery-mixed-content-demo">
    <!-- Image -->

    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>

    <!-- YouTube Video --->
    <a
        data-lg-size="1280-720"
        data-src="//www.youtube.com/watch?v=EIUJfXk3_3w"
        data-poster="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
        data-sub-html="<h4>Puffin Hunts Fish To Feed Puffling | Blue Planet II | BBC Earth</h4><p>On the heels of Planet Earth II's record-breaking Emmy nominations, BBC America presents stunning visual soundscapes from the series' amazing habitats.</p>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
        />
    </a>

    <!-- Vimeo Video --->
    <a
        data-lg-size="1280-720"
        data-src="//vimeo.com/112836958"
        data-poster="/images/demo/vimeo-video-poster.jpg"
        data-sub-html="<h4>Nature</h4><p>Video by <a target='_blank' href='https://vimeo.com/charliekaye'>Charlie Kaye</a></p>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/vimeo-video-poster.jpg"
        />
    </a>

    <!-- Wistia Video --->
    <a
        data-lg-size="1280-720"
        data-src="https://private-sharing.wistia.com/medias/mwhrulrucj"
        data-poster="/images/demo/wistia-video-poster.jpeg"
        data-sub-html="<h4>Thank You!</h4><p> Sample Wistia video </p>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/wistia-video-poster.jpeg"
        />
    </a>

    <!-- HTML5 Video --->
    <a
        data-lg-size="1280-720"
        data-video='{"source": [{"src":"/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
        data-poster="/images/demo/html5-video-poster.jpg"
        data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/html5-video-poster.jpg"
        />
    </a>
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('gallery-mixed-content-demo'), {
    plugins: [lgVideo],
});
```

**React**

```tsx
import {
    LightGallery,
    LightGalleryItem,
    type GalleryItem,
} from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Video from '@lightgallery/react/plugins/video';

// One gallery, a different kind of slide for each item: images, video
// URLs and self-hosted video files are item fields rather than markup.
const items: GalleryItem[] = [
    // Image
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    // YouTube video
    {
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        lgSize: '1280-720',
    },
    // Vimeo video
    {
        src: '//vimeo.com/112836958',
        poster: '/images/demo/vimeo-video-poster.jpg',
        thumb: '/images/demo/vimeo-video-poster.jpg',
        alt: 'Nature',
        lgSize: '1280-720',
    },
    // HTML5 video: no `src`; the files go in `video`.
    {
        video: {
            source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
            attributes: { preload: false, controls: true },
        },
        poster: '/images/demo/html5-video-poster.jpg',
        thumb: '/images/demo/html5-video-poster.jpg',
        alt: 'Peck Pocketed',
        lgSize: '1280-720',
    },
];

// Images work without a plugin; video slides need Video.
<LightGallery plugins={[Thumbnail, Video]}>
    {items.map((item) => (
        <LightGalleryItem key={item.thumb} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup lang="ts">
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Video from '@lightgallery/vue/plugins/video';

// Images work without a plugin; video slides need Video.
const plugins = [Thumbnail, Video];

// One gallery, a different kind of slide for each item: images, video
// URLs and self-hosted video files are item fields rather than markup.
const items: LgGalleryItem[] = [
    // Image
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    // YouTube video
    {
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        lgSize: '1280-720',
    },
    // Vimeo video
    {
        src: '//vimeo.com/112836958',
        poster: '/images/demo/vimeo-video-poster.jpg',
        thumb: '/images/demo/vimeo-video-poster.jpg',
        alt: 'Nature',
        lgSize: '1280-720',
    },
    // HTML5 video: no `src`; the files go in `video`.
    {
        video: {
            source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
            attributes: { preload: false, controls: true },
        },
        poster: '/images/demo/html5-video-poster.jpg',
        thumb: '/images/demo/html5-video-poster.jpg',
        alt: 'Peck Pocketed',
        lgSize: '1280-720',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins">
        <LgItem v-for="item of items" :key="item.thumb" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withVideo } from '@lightgallery/angular/plugins/video';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.thumb) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    // Images work without a feature; video slides need withVideo().
    features = [withThumbnail(), withVideo()];

    // One gallery, a different kind of slide for each item: images, video
    // URLs and self-hosted video files are item fields rather than markup.
    items: LgGalleryItem[] = [
        // Image
        { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
        // YouTube video
        {
            src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
            poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
            thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
            alt: 'Puffin Hunts Fish To Feed Puffling',
            lgSize: '1280-720',
        },
        // Vimeo video
        {
            src: '//vimeo.com/112836958',
            poster: '/images/demo/vimeo-video-poster.jpg',
            thumb: '/images/demo/vimeo-video-poster.jpg',
            alt: 'Nature',
            lgSize: '1280-720',
        },
        // HTML5 video: no `src`; the files go in `video`.
        {
            video: {
                source: [{ src: '/videos/video1.mp4', type: 'video/mp4' }],
                attributes: { preload: false, controls: true },
            },
            poster: '/images/demo/html5-video-poster.jpg',
            thumb: '/images/demo/html5-video-poster.jpg',
            alt: 'Peck Pocketed',
            lgSize: '1280-720',
        },
    ];
}
```


---

# Iframe lightbox

> Iframe lightbox demo: open a website, a Google map or a PDF inside the gallery as an iframe slide.

Create a simple lightbox iframe gallery with lightGallery. If you want to display a webpage, Google map, PDF file or any other iframe within the gallery, you just need to set data-iframe attribute true for the slide item. lightGallery will automatically display the source in an iframe. This can be used to view PDF files, Google Maps and more.

Canonical page: https://www.lightgalleryjs.com/demos/iframe/

<button class="btn btn-success mrb50" data-iframe="true" id="open-website" data-iframe-title="ParityDeals" data-src="https://www.paritydeals.com/">Open
website</button>
<button class="btn btn-success mrb50" data-iframe="true" id="open-google-map" data-src="https://www.google.com/maps/embed?origin=mfe&pb=!1m2!2m1!1sChefchaouen,+Morocco">Google
map</button>
<button class="btn btn-success mrb50" data-iframe="true" id="open-pdf" data-src="/pdf/sample.pdf">Open
PDF file</button>

**JavaScript**

**HTML**

```html
<button
    class="btn btn-success btn-lg mrb50"
    data-iframe="true"
    id="open-website"
    data-src="https://www.paritydeals.com/"
    data-iframe-title="ParityDeals"
>
    Open website
</button>
<button
    class="btn btn-success btn-lg mrb50"
    data-iframe="true"
    id="open-google-map"
    data-src="https://www.google.com/maps/embed?origin=mfe&pb=!1m2!2m1!1sChefchaouen,+Morocco"
>
    Google map
</button>
<button
    class="btn btn-success btn-lg mrb50"
    data-iframe="true"
    id="open-pdf"
    data-src="pdf/sample.pdf"
>
    Open PDF file
</button>
```

**JavaScript**

```js
lightGallery(document.getElementById('open-website'), {
    selector: 'this',
});
lightGallery(document.getElementById('open-google-map'), {
    selector: 'this',
});
lightGallery(document.getElementById('open-pdf'), {
    selector: 'this',
});
```

**React**

```tsx
import { useState } from 'react';
import { LightGallery, type GalleryItem } from '@lightgallery/react';

// `iframe: true` shows the page at `src` in an iframe; it replaces the
// vanilla data-iframe attribute and selector wiring.
const slides: GalleryItem[] = [
    {
        src: 'https://www.paritydeals.com/',
        iframe: true,
        iframeTitle: 'ParityDeals',
    },
    {
        src: 'https://www.google.com/maps/embed?origin=mfe&pb=!1m2!2m1!1sChefchaouen,+Morocco',
        iframe: true,
        iframeTitle: 'Google map',
    },
    {
        src: 'pdf/sample.pdf',
        iframe: true,
        iframeTitle: 'PDF file',
    },
];

const [open, setOpen] = useState(false);
const [index, setIndex] = useState(0);

// Each button opens the gallery on one slide.
const openSlide = (slide: number) => {
    setIndex(slide);
    setOpen(true);
};

<>
    <button type="button" onClick={() => openSlide(0)}>
        Open website
    </button>
    <button type="button" onClick={() => openSlide(1)}>
        Google map
    </button>
    <button type="button" onClick={() => openSlide(2)}>
        Open PDF file
    </button>
    <LightGallery
        slides={slides}
        open={open}
        onClose={() => setOpen(false)}
        index={index}
        onIndexChange={setIndex}
    />
</>;
```

**Vue**

```vue
<script setup>
import { ref } from 'vue';
import { LightGallery } from '@lightgallery/vue';

// `iframe: true` shows the page at `src` in an iframe; it replaces the
// vanilla data-iframe attribute and selector wiring.
const slides = [
    {
        src: 'https://www.paritydeals.com/',
        iframe: true,
        iframeTitle: 'ParityDeals',
    },
    {
        src: 'https://www.google.com/maps/embed?origin=mfe&pb=!1m2!2m1!1sChefchaouen,+Morocco',
        iframe: true,
        iframeTitle: 'Google map',
    },
    {
        src: 'pdf/sample.pdf',
        iframe: true,
        iframeTitle: 'PDF file',
    },
];

const open = ref(false);
const index = ref(0);

// Each button opens the gallery on one slide.
function openSlide(slide) {
    index.value = slide;
    open.value = true;
}
</script>

<template>
    <button type="button" @click="openSlide(0)">Open website</button>
    <button type="button" @click="openSlide(1)">Google map</button>
    <button type="button" @click="openSlide(2)">Open PDF file</button>
    <LightGallery v-model:open="open" v-model:index="index" :slides="slides" />
</template>
```

**Angular**

```ts
import { Component, signal } from '@angular/core';
import { LgGalleryComponent, type LgGalleryItem } from '@lightgallery/angular';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent],
    template: `
        <button type="button" (click)="openSlide(0)">Open website</button>
        <button type="button" (click)="openSlide(1)">Google map</button>
        <button type="button" (click)="openSlide(2)">Open PDF file</button>
        <lg-gallery
            [slides]="slides"
            [open]="open()"
            (closed)="open.set(false)"
            [(index)]="index"
        />
    `,
})
export class Gallery {
    // `iframe: true` shows the page at `src` in an iframe; it replaces
    // the vanilla data-iframe attribute and selector wiring.
    slides: LgGalleryItem[] = [
        {
            src: 'https://www.paritydeals.com/',
            iframe: true,
            iframeTitle: 'ParityDeals',
        },
        {
            src: 'https://www.google.com/maps/embed?origin=mfe&pb=!1m2!2m1!1sChefchaouen,+Morocco',
            iframe: true,
            iframeTitle: 'Google map',
        },
        {
            src: 'pdf/sample.pdf',
            iframe: true,
            iframeTitle: 'PDF file',
        },
    ];

    open = signal(false);
    index = signal(0);

    // Each button opens the gallery on one slide.
    openSlide(slide: number) {
        this.index.set(slide);
        this.open.set(true);
    }
}
```


---

# Dynamic mode

> Dynamic mode demo: open a gallery from a JavaScript array of items, with no trigger markup on the page.

lightGallery can be instantiated and launched programmatically by setting dynamic option to true and populating dynamicEl option by passing array of objects representing the gallery elements. See available dynamic options [Docs.](../../docs/dynamic-variables/)

Canonical page: https://www.lightgalleryjs.com/demos/dynamic-mode/

<button type="button" class="btn btn-success" id="dynamic-gallery-demo">Launch
Gallery</button>

**JavaScript**

**HTML**

```html
<button type="button" id="dynamic-gallery-demo">Open Gallery</button>
```

**JavaScript**

```js
const $dynamicGallery = document.getElementById('dynamic-gallery-demo');
const dynamicEl = [
    {
        src: 'img/1.jpg',
        thumb: 'img/thumb-1.jpg',
        subHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>',
    },
    {
        src: 'img/2.jpg',
        thumb: 'img/thumb-2.jpg',
        subHtml: '<h4>Image 2 title</h4><p>Image 2 descriptions.</p>',
    },
    {
        src: 'img/3.jpg',
        thumb: 'img/thumb-3.jpg',
        subHtml: '<h4>Image 3 title</h4><p>Image 3 descriptions.</p>',
    },
];
const dynamicGallery = lightGallery($dynamicGallery, {
    dynamic: true,
    dynamicEl,
});
$dynamicGallery.addEventListener('click', function () {
    // Starts with third item.(Optional).
    // This is useful if you want use dynamic mode with
    // custom thumbnails (thumbnails outside gallery),
    dynamicGallery.openGallery(2);
});
```

**React**

```tsx
import { useState } from 'react';
import { LightGallery } from '@lightgallery/react';

// The slides are data: there is no gallery markup on the page.
const slides = [
    {
        src: 'img/1.jpg',
        thumb: 'img/thumb-1.jpg',
        alt: 'Image 1',
        captionHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>',
    },
    {
        src: 'img/2.jpg',
        thumb: 'img/thumb-2.jpg',
        alt: 'Image 2',
        captionHtml: '<h4>Image 2 title</h4><p>Image 2 descriptions.</p>',
    },
    {
        src: 'img/3.jpg',
        thumb: 'img/thumb-3.jpg',
        alt: 'Image 3',
        captionHtml: '<h4>Image 3 title</h4><p>Image 3 descriptions.</p>',
    },
];

// Controlled mode is React's equivalent of dynamic mode: the
// slides are data and you own the open state.
const [open, setOpen] = useState(false);

<>
    <button type="button" onClick={() => setOpen(true)}>
        Open gallery
    </button>
    {/* defaultIndex={2} opens on the third slide. */}
    <LightGallery
        slides={slides}
        open={open}
        defaultIndex={2}
        onClose={() => setOpen(false)}
    />
</>;
```

**Vue**

```vue
<script setup>
import { ref } from 'vue';
import { LightGallery } from '@lightgallery/vue';

// The slides are data: there is no gallery markup on the page.
const slides = [
    {
        src: 'img/1.jpg',
        thumb: 'img/thumb-1.jpg',
        alt: 'Image 1',
        captionHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>',
    },
    {
        src: 'img/2.jpg',
        thumb: 'img/thumb-2.jpg',
        alt: 'Image 2',
        captionHtml: '<h4>Image 2 title</h4><p>Image 2 descriptions.</p>',
    },
    {
        src: 'img/3.jpg',
        thumb: 'img/thumb-3.jpg',
        alt: 'Image 3',
        captionHtml: '<h4>Image 3 title</h4><p>Image 3 descriptions.</p>',
    },
];

const open = ref(false);
// Opens on the third slide.
const index = ref(2);
</script>

<template>
    <button type="button" @click="open = true">Open gallery</button>
    <LightGallery v-model:open="open" v-model:index="index" :slides="slides" />
</template>
```

**Angular**

```ts
import { Component, signal } from '@angular/core';
import { LgGalleryComponent, type LgGalleryItem } from '@lightgallery/angular';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent],
    template: `
        <button type="button" (click)="open.set(true)">Open gallery</button>
        <lg-gallery
            [slides]="slides()"
            [open]="open()"
            (closed)="open.set(false)"
            [(index)]="index"
        />
    `,
})
export class Gallery {
    // The slides are data: there is no gallery markup on the page. A
    // signal, so the next example can append to it.
    slides = signal<LgGalleryItem[]>([
        {
            src: 'img/1.jpg',
            thumb: 'img/thumb-1.jpg',
            alt: 'Image 1',
            captionHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>',
        },
        {
            src: 'img/2.jpg',
            thumb: 'img/thumb-2.jpg',
            alt: 'Image 2',
            captionHtml: '<h4>Image 2 title</h4><p>Image 2 descriptions.</p>',
        },
        {
            src: 'img/3.jpg',
            thumb: 'img/thumb-3.jpg',
            alt: 'Image 3',
            captionHtml: '<h4>Image 3 title</h4><p>Image 3 descriptions.</p>',
        },
    ]);

    open = signal(false);
    // Opens on the third slide.
    index = signal(2);
}
```

### Load more slides dynamically

You can add or remove slides of a dynamic gallery by passing the updated
dynamicEl list via the refresh method.

<button type="button" class="btn btn-success"
id="dynamic-gallery-demo-load-more"> Launch Gallery with more images </button>

**JavaScript**

**HTML**

```html
<button
    type="button"
    class="btn btn-success"
    id="dynamic-gallery-demo-load-more"
>
    Launch Gallery with additional images
</button>
```

**JavaScript**

```js
document
    .getElementById('dynamic-gallery-demo-load-more')
    .addEventListener('click', () => {
        const newItems = [
            {
                src: 'img/4.jpg',
                thumb: 'img/thumb-4.jpg',
                subHtml: '<h4>Image 4 title</h4><p>Image 4 descriptions.</p>',
            },
            {
                src: 'img/5.jpg',
                thumb: 'img/thumb-5.jpg',
                subHtml: '<h4>Image 5 title</h4><p>Image 5 descriptions.</p>',
            },
        ];
        const updatedDynamicElements = [...dynamicEl, ...newItems];
        dynamicGallery.refresh(updatedDynamicElements);

        // To open gallery after updating slides,
        dynamicGallery.openGallery();
    });
```

**React**

```tsx
import { useState } from 'react';
import { LightGallery, type GalleryItem } from '@lightgallery/react';

const moreSlides = [
    {
        src: 'img/4.jpg',
        thumb: 'img/thumb-4.jpg',
        alt: 'Image 4',
        captionHtml: '<h4>Image 4 title</h4><p>Image 4 descriptions.</p>',
    },
    {
        src: 'img/5.jpg',
        thumb: 'img/thumb-5.jpg',
        alt: 'Image 5',
        captionHtml: '<h4>Image 5 title</h4><p>Image 5 descriptions.</p>',
    },
];

// Appending is a state update, no refresh() call. The state starts
// with the three slides of the first example.
const [slides, setSlides] = useState<GalleryItem[]>([/* slides as above */]);
const [open, setOpen] = useState(false);

const loadMore = () => {
    setSlides([...slides, ...moreSlides]);
    // Open the gallery with the updated slides
    setOpen(true);
};

<>
    <button type="button" onClick={loadMore}>
        Load more
    </button>
    <LightGallery slides={slides} open={open} onClose={() => setOpen(false)} />
</>;
```

**Vue**

```vue
<script setup>
import { ref } from 'vue';
import { LightGallery } from '@lightgallery/vue';

const moreSlides = [
    {
        src: 'img/4.jpg',
        thumb: 'img/thumb-4.jpg',
        alt: 'Image 4',
        captionHtml: '<h4>Image 4 title</h4><p>Image 4 descriptions.</p>',
    },
    {
        src: 'img/5.jpg',
        thumb: 'img/thumb-5.jpg',
        alt: 'Image 5',
        captionHtml: '<h4>Image 5 title</h4><p>Image 5 descriptions.</p>',
    },
];

// Appending is a state update, no refresh() call. The ref starts with
// the three slides of the first example.
const slides = ref([/* slides as above */]);
const open = ref(false);

function loadMore() {
    slides.value.push(...moreSlides);
    // Open the gallery with the updated slides
    open.value = true;
}
</script>

<template>
    <button type="button" @click="loadMore">Load more</button>
    <LightGallery v-model:open="open" :slides="slides" />
</template>
```

**Angular**

```ts
import { Component, signal } from '@angular/core';
import { LgGalleryComponent, type LgGalleryItem } from '@lightgallery/angular';

const moreSlides: LgGalleryItem[] = [
    {
        src: 'img/4.jpg',
        thumb: 'img/thumb-4.jpg',
        alt: 'Image 4',
        captionHtml: '<h4>Image 4 title</h4><p>Image 4 descriptions.</p>',
    },
    {
        src: 'img/5.jpg',
        thumb: 'img/thumb-5.jpg',
        alt: 'Image 5',
        captionHtml: '<h4>Image 5 title</h4><p>Image 5 descriptions.</p>',
    },
];

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent],
    template: `
        <button type="button" (click)="loadMore()">Load more</button>
        <lg-gallery
            [slides]="slides()"
            [open]="open()"
            (closed)="open.set(false)"
        />
    `,
})
export class Gallery {
    // Appending is a signal update, no refresh() call. The signal starts
    // with the three slides of the first example.
    slides = signal<LgGalleryItem[]>([/* slides as above */]);
    open = signal(false);

    loadMore() {
        this.slides.update((current) => [...current, ...moreSlides]);
        // Open the gallery with the updated slides
        this.open.set(true);
    }
}
```

### Load more slides with images

You can use dynamic mode to show a grid of thumbnails and open the full set from a button.

    
    <button type="button" class="btn btn-dynamic" id="dynamic-mode-images">See all 14 photos</button>


---

# Update slides

> Update slides demo: add and remove slides while the gallery is open with updateSlides().

lightGallery supports adding, editing, deleting slides even if the gallery is opened. You just need to modify the current gallery items and pass it via updateSlides method.

Canonical page: https://www.lightgalleryjs.com/demos/update-slides/

Let's see how we can add and delete slides dynamically.

The demo adds two buttons to the gallery toolbar and calls `updateSlides()`
from them.

First, add the delete and add buttons to the toolbar.

**JavaScript**

**HTML**

```html
<div id="gallery-update-slides-demo">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
const gallery = document.getElementById('gallery-update-slides-demo');

// lgInit fires once the gallery markup exists: add the buttons there.
gallery.addEventListener('lgInit', (event) => {
    const toolbar = event.detail.instance.outer.get().querySelector('.lg-toolbar');
    toolbar.insertAdjacentHTML(
        'beforeend',
        '<button type="button" aria-label="Remove slide" class="lg-icon" id="lg-delete"><svg>...</svg></button>' +
            '<button type="button" aria-label="Add slide" class="lg-icon" id="lg-add"><svg>...</svg></button>',
    );
    toolbar.querySelector('#lg-delete').addEventListener('click', removeFirstSlide);
    toolbar.querySelector('#lg-add').addEventListener('click', addSlide);
});

const lg = lightGallery(gallery, {
    addClass: 'lg-update-slide-demo',
});
```

**React**

```tsx
import { useState } from 'react';
import {
    LightGallery,
    LightGalleryItem,
    type GalleryItem,
} from '@lightgallery/react';

const firstItems: GalleryItem[] = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

export default function Gallery() {
    // Rendering a different list is the update, also while the gallery is
    // open: there is no updateSlides() to call.
    const [items, setItems] = useState(firstItems);

    // removeFirstSlide and addSlide: the next two steps.

    return (
        // There is no toolbar to append to; `render.caption` puts the
        // buttons in the caption area of every slide instead.
        <LightGallery
            render={{
                caption: () => (
                    <div className="slide-actions">
                        <button type="button" onClick={removeFirstSlide}>
                            Remove slide
                        </button>
                        <button type="button" onClick={addSlide}>
                            Add slide
                        </button>
                    </div>
                ),
            }}
        >
            {items.map((item) => (
                <LightGalleryItem key={item.src} item={item}>
                    <img src={item.thumb} alt={item.alt} />
                </LightGalleryItem>
            ))}
        </LightGallery>
    );
}
```

**Vue**

```vue
<script setup>
import { ref } from 'vue';
import { LightGallery, LgItem } from '@lightgallery/vue';

// Changing the list is the update, also while the gallery is open: there
// is no updateSlides() to call.
const items = ref([
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
]);

// removeFirstSlide and addSlide: the next two steps.
</script>

<template>
    <LightGallery>
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>

        <!-- There is no toolbar to append to; the caption slot puts the
             buttons in the caption area of every slide instead. -->
        <template #caption>
            <div class="slide-actions">
                <button type="button" @click="removeFirstSlide">
                    Remove slide
                </button>
                <button type="button" @click="addSlide">Add slide</button>
            </div>
        </template>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component, signal } from '@angular/core';
import {
    LgCaptionDirective,
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

const firstItems: LgGalleryItem[] = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

@Component({
    selector: 'app-gallery',
    imports: [LgCaptionDirective, LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery>
            @for (item of items(); track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }

            <!-- There is no toolbar to append to; the lgCaption template
                 puts the buttons in the caption area of every slide. -->
            <ng-template lgCaption>
                <div class="slide-actions">
                    <button type="button" (click)="removeFirstSlide()">
                        Remove slide
                    </button>
                    <button type="button" (click)="addSlide()">Add slide</button>
                </div>
            </ng-template>
        </lg-gallery>
    `,
})
export class Gallery {
    // Updating the signal is the update, also while the gallery is open:
    // there is no updateSlides() to call.
    items = signal(firstItems);

    // removeFirstSlide() and addSlide(): the next two steps.
}
```

Delete the first slide when the delete button is clicked.

Note:

-   Do not mutate the existing gallery items directly; always pass a new
    list.
-   Thumbnails outside the gallery are yours to update. Call
    [`refresh()`](../../docs/methods/#refresh) after changing them, as in the
    [infinite scrolling demo](../../demos/infinite-scrolling/).

**JavaScript**

```js
function removeFirstSlide() {
    const galleryItems = lg.galleryItems.slice(1);

    // The second argument is the slide to show after the update:
    // stay on the one being viewed.
    lg.updateSlides(galleryItems, Math.max(lg.index - 1, 0));
}
```

**React**

```tsx
// There is no updateSlides(): a new array is the update. The gallery
// keeps its index.
const removeFirstSlide = () => setItems((current) => current.slice(1));
```

**Vue**

```js
// There is no updateSlides(): a new array is the update. The gallery
// keeps its index.
const removeFirstSlide = () => {
    items.value = items.value.slice(1);
};
```

**Angular**

```ts
// There is no updateSlides(): a new array is the update. The gallery
// keeps its index.
removeFirstSlide() {
    this.items.update((current) => current.slice(1));
}
```

Add a new slide when the add button is clicked.

**JavaScript**

```js
function addSlide() {
    const galleryItems = [
        ...lg.galleryItems,
        { src: 'img/img3.jpg', thumb: 'img/thumb3.jpg' },
    ];

    // Keep the current slide.
    lg.updateSlides(galleryItems, lg.index);
}
```

**React**

```tsx
const addSlide = () =>
    setItems((current) => [
        ...current,
        { src: 'img/img3.jpg', thumb: 'img/thumb3.jpg', alt: 'Lake' },
    ]);
```

**Vue**

```js
const addSlide = () => {
    items.value = [
        ...items.value,
        { src: 'img/img3.jpg', thumb: 'img/thumb3.jpg', alt: 'Lake' },
    ];
};
```

**Angular**

```ts
addSlide() {
    this.items.update((current) => [
        ...current,
        { src: 'img/img3.jpg', thumb: 'img/thumb3.jpg', alt: 'Lake' },
    ]);
}
```

##### SCSS (Optional)

```scss
.lg-update-slide-demo {
    .lg-toolbar {
        .lg-icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        svg {
            fill: #999;
            width: 22px;
            height: 22px;
        }
    }
}
```

#### Demo


---

# Transitions

> Twenty-plus slide transitions for image and video galleries, switched with the mode setting, plus how to build your own.

Create beautiful image and video galleries with built in CSS transitions. You can change the type of transitions by passing the transition name via mode option. lightGallery uses hardware-accelerated CSS transitions for smooth animation. You can create your own beautiful custom transitions by updating the CSS transform values.

Canonical page: https://www.lightgalleryjs.com/demos/transitions/

#### Demo

> Note: the transitions other than the default slide and fade need `lg-transitions.css`: `import 'lightgallery/css/lg-transitions.css';` or load it from the package's `css` folder.

<span class="choose-select-option">Change transition : </span>
<select id="select-trans" class="mrb30 select"><option selected="selected" value="lg-slide">lg-slide</option><option value="lg-fade">lg-fade</option><option value="lg-zoom-in">lg-zoom-in</option><option value="lg-zoom-in-big">lg-zoom-in-big</option><option value="lg-zoom-out">lg-zoom-out</option><option value="lg-zoom-out-big">lg-zoom-out-big</option><option value="lg-zoom-out-in">lg-zoom-out-in</option><option value="lg-zoom-in-out">lg-zoom-in-out</option><option value="lg-soft-zoom">lg-soft-zoom</option><option value="lg-scale-up">lg-scale-up</option><option value="lg-slide-circular">lg-slide-circular</option><option value="lg-slide-circular-vertical">lg-slide-circular-vertical</option><option value="lg-slide-vertical">lg-slide-vertical</option><option value="lg-slide-vertical-growth">lg-slide-vertical-growth</option><option value="lg-slide-skew-only">lg-slide-skew-only</option><option value="lg-slide-skew-only-rev">lg-slide-skew-only-rev</option><option value="lg-slide-skew-only-y">lg-slide-skew-only-y</option><option value="lg-slide-skew-only-y-rev">lg-slide-skew-only-y-rev</option><option value="lg-slide-skew">lg-slide-skew</option><option value="lg-slide-skew-rev">lg-slide-skew-rev</option><option value="lg-slide-skew-cross">lg-slide-skew-cross</option><option value="lg-slide-skew-cross-rev">lg-slide-skew-cross-rev</option><option value="lg-slide-skew-ver">lg-slide-skew-ver</option><option value="lg-slide-skew-ver-rev">lg-slide-skew-ver-rev</option><option value="lg-slide-skew-ver-cross">lg-slide-skew-ver-cross</option><option value="lg-slide-skew-ver-cross-rev">lg-slide-skew-ver-cross-rev</option><option value="lg-lollipop">lg-lollipop</option><option value="lg-lollipop-rev">lg-lollipop-rev</option><option value="lg-rotate">lg-rotate</option><option value="lg-rotate-rev">lg-rotate-rev</option><option value="lg-tube">lg-tube</option> </select>

**JavaScript**

**HTML**

```html
<div id="custom-transition-demo">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('custom-transition-demo'), {
    mode: 'lg-fade',
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';

// Every mode other than lg-slide and lg-fade needs this stylesheet.
import 'lightgallery/css/lg-transitions.css';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// Try 'lg-zoom-in', 'lg-slide-vertical', 'lg-rotate' or 'lg-tube'.
<LightGallery mode="lg-fade">
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';

// Every mode other than lg-slide and lg-fade needs this stylesheet.
import 'lightgallery/css/lg-transitions.css';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];
</script>

<template>
    <!-- Try 'lg-zoom-in', 'lg-slide-vertical', 'lg-rotate' or 'lg-tube'. -->
    <LightGallery mode="lg-fade">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

// Every mode other than lg-slide and lg-fade needs
// 'lightgallery/css/lg-transitions.css' in your global styles.

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- Try 'lg-zoom-in', 'lg-slide-vertical', 'lg-rotate' or 'lg-tube'. -->
        <lg-gallery mode="lg-fade">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    items: LgGalleryItem[] = [
        { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
        { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
    ];
}
```

### Create custom transition

lightGallery comes with more than 30 transition effects. If you need more, you
can easily create your own custom transitions.

Let's see how we can create custom transition effects. Before that we need to
understand how transition works in lightGallery. Transitions happen based on 3
CSS class names: `lg-prev-slide`, `lg-current` and `lg-next-slide`. When user
tries to navigate a different slide, lightGallery

-   Removes all CSS transition effects from the slides.
-   Remove existing `lg-prev-slide` and `lg-next-slide` classes from the current
    slide.
-   Based on the direction, adds `lg-next-slide` or `lg-prev-slide` to the
    current slide and next slide to determine how the current slide should
    disappear and the next slide should appear. If direction is `previous`,
    `lg-prev-slide` is added to the current slide and `lg-next-slide` is added
    to the next slide. Likewise, if direction is `next`, `lg-next-slide` is added
    to the current slide and `lg-prev-slide` is added to the next slide.
-   50 ms timer starts to give some time for the browser to perform transitions.
-   After 50 ms, remove `lg-current` class from the current slide.
-   Add `lg-current` class to the next slide.
-   Restore the CSS transitions.

Let's create a custom zoom-in-out transition.

When user navigates to next slide, zoom in transition appears and when user
navigates to the previous slide, zoom out transition appears.

```scss
.lg-zoom-in-out {
    .lg-item {
        // By default all slides should be hidden
        opacity: 0;
        will-change: transform, opacity;

        // For the zoom in transition, set scale3d to 2
        &.lg-prev-slide {
            transform: scale3d(2, 2, 2);
        }

        // For the zoom out transition, set scale3d to 0
        &.lg-next-slide {
            transform: scale3d(0, 0, 0);
        }

        // Reset opacity and transition
        &.lg-current {
            transform: scale3d(1, 1, 1);
            opacity: 1;
        }

        // Add CSS transition for opacity and transform
        &.lg-prev-slide,
        &.lg-next-slide,
        &.lg-current {
            transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s
                    ease 0s;
        }
    }
}
```


---

# Methods demo

> Gallery methods demo: drive lightGallery from your own buttons with methods such as goToNextSlide, goToPrevSlide and openGallery.

You can use lightGallery plugin instance public methods to trigger specific lightGallery actions. lightGallery provides several useful methods which can be used to customize the gallery or to build your own features. You can find the list of methods in the [docs](../../docs/methods/).

Canonical page: https://www.lightgalleryjs.com/demos/methods/

Let's see how we integrate custom next and previous buttons instead of built-in
buttons using lightGallery methods.

#### Demo

**JavaScript**

**HTML**

```html
<div id="gallery-methods-demo">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
const $lgGalleryMethodsDemo = document.getElementById('gallery-methods-demo');
let methodsInstance;
// lgInit fires once, when the gallery markup is created.
$lgGalleryMethodsDemo.addEventListener('lgInit', () => {
    const previousBtn =
        '<button type="button" aria-label="Previous slide" class="lg-prev"> Prev Slide </button>';
    const nextBtn =
        '<button type="button" aria-label="Next slide" class="lg-next"> Next Slide </button>';

    // Append custom buttons to the lightGallery container
    const $lgContainer = document.querySelector('.lg-content');
    $lgContainer.insertAdjacentHTML('beforeend', nextBtn);
    $lgContainer.insertAdjacentHTML('beforeend', previousBtn);

    // use lightGallery goToNextSlide and goToPrevSlide methods to
    // navigate to respective slides
    document.querySelector('.lg-next').addEventListener('click', () => {
        methodsInstance.goToNextSlide();
    });
    document.querySelector('.lg-prev').addEventListener('click', () => {
        methodsInstance.goToPrevSlide();
    });
});

// Store the instance in a variable
methodsInstance = lightGallery($lgGalleryMethodsDemo, {
    // Add custom class for button styling
    addClass: 'lg-methods-demo',

    // Disable default controls
    controls: false,
});
```

**React**

```tsx
import { useRef } from 'react';
import {
    LightGallery,
    LightGalleryItem,
    type LightGalleryRefHandle,
} from '@lightgallery/react';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// The ref gives access to the gallery's methods.
const gallery = useRef<LightGalleryRefHandle>(null);

// controls={false} hides the built-in previous and next buttons;
// render.caption puts your own in the caption area of every slide.
<>
    <button type="button" onClick={() => gallery.current?.openGallery(1)}>
        Open on the second photo
    </button>
    <LightGallery
        ref={gallery}
        controls={false}
        render={{
            caption: () => (
                <>
                    <button
                        type="button"
                        onClick={() => gallery.current?.prevSlide()}
                    >
                        Prev slide
                    </button>
                    <button
                        type="button"
                        onClick={() => gallery.current?.nextSlide()}
                    >
                        Next slide
                    </button>
                </>
            ),
        }}
    >
        {items.map((item) => (
            <LightGalleryItem key={item.src} item={item}>
                <img src={item.thumb} alt={item.alt} />
            </LightGalleryItem>
        ))}
    </LightGallery>
</>;
```

**Vue**

```vue
<script setup>
import { ref } from 'vue';
import { LightGallery, LgItem } from '@lightgallery/vue';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// The template ref gives access to the gallery's methods.
const gallery = ref();
</script>

<template>
    <button type="button" @click="gallery.openGallery(1)">
        Open on the second photo
    </button>
    <!-- :controls="false" hides the built-in previous and next buttons. -->
    <LightGallery ref="gallery" :controls="false">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>

        <!-- The caption slot puts your own buttons in the caption area of
             every slide. -->
        <template #caption>
            <button type="button" @click="gallery.prevSlide()">
                Prev slide
            </button>
            <button type="button" @click="gallery.nextSlide()">
                Next slide
            </button>
        </template>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgCaptionDirective,
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

@Component({
    selector: 'app-gallery',
    imports: [LgCaptionDirective, LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <button type="button" (click)="gallery.openGallery(1)">
            Open on the second photo
        </button>
        <!-- #gallery gives access to the gallery's methods.
             [controls]="false" hides the built-in previous and next
             buttons. -->
        <lg-gallery #gallery="lgGallery" [controls]="false">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }

            <!-- The lgCaption template puts your own buttons in the
                 caption area of every slide. -->
            <ng-template lgCaption>
                <button type="button" (click)="gallery.prevSlide()">
                    Prev slide
                </button>
                <button type="button" (click)="gallery.nextSlide()">
                    Next slide
                </button>
            </ng-template>
        </lg-gallery>
    `,
})
export class Gallery {
    items: LgGalleryItem[] = [
        { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
        { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
    ];
}
```


---

# HTML markup

> HTML markup demo: the different trigger markups lightGallery accepts, from plain links to data attributes and custom selectors.

lightGallery does not force you to use any specific HTML markup. You can use almost any kind of markup with the help of `selector` setting.

Canonical page: https://www.lightgalleryjs.com/demos/html-markup/

**JavaScript**

**HTML**

```html
<div id="anchor-tag">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('anchor-tag'));
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// There is no markup to scrape: a trigger is a component that renders a
// link, and its item carries what the data-* attributes used to.
<LightGallery>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item} href={item.src}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];
</script>

<template>
    <!-- There is no markup to scrape: a trigger is a component that renders
         a link, and its item carries what the data-* attributes used to. -->
    <LightGallery>
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- There is no markup to scrape: a trigger is a directive on your
             own link, and its value carries what the data-* attributes
             used to. -->
        <lg-gallery>
            @for (item of items; track item.src) {
                <a [href]="item.src" [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    items: LgGalleryItem[] = [
        { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
        { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
    ];
}
```

---

**JavaScript**

**HTML**

```html
<ul id="ul-li">
    <li data-src="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </li>
    <li data-src="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </li>
    <!-- more items -->
</ul>
```

**JavaScript**

```js
lightGallery(document.getElementById('ul-li'));
```

**React**

```tsx
// `as` sets the element a trigger renders; the default is a link.
<LightGallery>
    <ul>
        {items.map((item) => (
            <LightGalleryItem key={item.src} as="li" item={item}>
                <img src={item.thumb} alt={item.alt} />
            </LightGalleryItem>
        ))}
    </ul>
</LightGallery>
```

**Vue**

```vue
<!-- LgItem renders the link; put it inside the markup you need. -->
<LightGallery>
    <ul>
        <li v-for="item of items" :key="item.src">
            <LgItem :item="item">
                <img :src="item.thumb" :alt="item.alt" />
            </LgItem>
        </li>
    </ul>
</LightGallery>
```

**Angular**

```html
<!-- The directive works on any element. -->
<lg-gallery>
    <ul>
        @for (item of items; track item.src) {
            <li [lgGalleryItem]="item">
                <img [src]="item.thumb" [alt]="item.alt" />
            </li>
        }
    </ul>
</lg-gallery>
```

---

The `selector` setting belongs to the vanilla package. In React, Vue and
Angular a trigger is the element you mark as one, so other markup can sit
next to the triggers and there is nothing to select.

**JavaScript**

**HTML**

```html
<div id="selector1">
  <h2>Gallery title</h2>
  <div class="item" data-src="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </div>
  <div class="item" data-src="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </div>
  <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('selector1'), {
    selector: '.item',
});
```

**React**

```tsx
<LightGallery>
    <h2>Gallery title</h2>
    {items.map((item) => (
        <LightGalleryItem key={item.src} as="div" className="item" item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>
```

**Vue**

```vue
<LightGallery>
    <h2>Gallery title</h2>
    <LgItem v-for="item of items" :key="item.src" class="item" :item="item">
        <img :src="item.thumb" :alt="item.alt" />
    </LgItem>
</LightGallery>
```

**Angular**

```html
<lg-gallery>
    <h2>Gallery title</h2>
    @for (item of items; track item.src) {
        <div class="item" [lgGalleryItem]="item">
            <img [src]="item.thumb" [alt]="item.alt" />
        </div>
    }
</lg-gallery>
```

---

**JavaScript**

**HTML**

```html
<a id="selector2" href="img/img1.jpg"> Click to open </a>
```

**JavaScript**

```js
lightGallery(document.getElementById('selector2'), {
    selector: 'this',
});
```

**React**

```tsx
<LightGallery>
    <LightGalleryItem item={{ src: 'img/img1.jpg' }} href="img/img1.jpg">
        Click to open
    </LightGalleryItem>
</LightGallery>
```

**Vue**

```vue
<LightGallery>
    <LgItem :item="{ src: 'img/img1.jpg' }">Click to open</LgItem>
</LightGallery>
```

**Angular**

```html
<lg-gallery>
    <a href="img/img1.jpg" [lgGalleryItem]="{ src: 'img/img1.jpg' }">
        Click to open
    </a>
</lg-gallery>
```


---

# Events demo

> Gallery events demo: listen to lightGallery events such as lgBeforeSlide and lgAfterOpen to react to what the viewer does.

lightGallery emits several custom events throughout the gallery lifecycle. This can be used to customize the gallery or to add your own features. [Docs](../../docs/events/)

Canonical page: https://www.lightgalleryjs.com/demos/events/

Let's see how we can change the background color of the gallery on every slide
change.

#### Demo

**JavaScript**

**HTML**

```html
<div id="custom-events-demo">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
const colours = ['#6a7583', '#1e304b', '#315460', '#080607'];
const galleryEventsDemo = document.getElementById('custom-events-demo');
galleryEventsDemo.addEventListener('lgBeforeSlide', (event) => {
    const { index } = event.detail;
    document.querySelector('.lg-backdrop').style.backgroundColor =
        colours[index];
});
lightGallery(galleryEventsDemo, {
    addClass: 'lg-events-demo-outer', // (Optional)
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

const colours = ['#6a7583', '#1e304b', '#315460', '#080607'];

function setBackdrop(index: number) {
    const backdrop = document.querySelector<HTMLElement>(
        '.lg-events-demo-outer .lg-backdrop',
    );
    if (backdrop) {
        backdrop.style.backgroundColor = colours[index % colours.length];
    }
}

// Every lg* event is a typed callback prop. `className` is a class on
// the gallery container, used by the SCSS below.
<LightGallery
    className="lg-events-demo-outer"
    onBeforeSlide={({ index }) => setBackdrop(index)}
>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

const colours = ['#6a7583', '#1e304b', '#315460', '#080607'];

function setBackdrop(index) {
    const backdrop = document.querySelector(
        '.lg-events-demo-outer .lg-backdrop',
    );
    if (backdrop) {
        backdrop.style.backgroundColor = colours[index % colours.length];
    }
}
</script>

<template>
    <!-- Kebab-case listeners, same payloads. `class-name` is a class on
         the gallery container, used by the SCSS below. -->
    <LightGallery
        class-name="lg-events-demo-outer"
        @before-slide="({ index }) => setBackdrop(index)"
    >
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

const colours = ['#6a7583', '#1e304b', '#315460', '#080607'];

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- Signal outputs, same payloads. "className" is a class on the
             gallery container, used by the SCSS below. -->
        <lg-gallery
            className="lg-events-demo-outer"
            (beforeSlide)="setBackdrop($event.index)"
        >
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    items: LgGalleryItem[] = [
        { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
        { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
    ];

    setBackdrop(index: number): void {
        const backdrop = document.querySelector<HTMLElement>(
            '.lg-events-demo-outer .lg-backdrop',
        );
        if (backdrop) {
            backdrop.style.backgroundColor = colours[index % colours.length];
        }
    }
}
```

##### SCSS (Optional)

```scss
.lg-events-demo-outer {
    .lg-backdrop {
        transition: opacity 333ms ease-in 0s, background-color 333ms ease-in 0s;
    }
}
```


---

# Custom easing

> Custom easing demo: set the slide transition curve with the lightGallery easing setting, from linear to back-and-forth cubic-bezier curves.

Pass any CSS timing function through the `easing` setting. Below are some possible values; the curves come from Matthew Lein's Ceaser.

Canonical page: https://www.lightgalleryjs.com/demos/custom-easing/

#### Demo

<span class="choose-select-option">Change easing : </span>
<select id="select-easing" class="mrb30 select">    <optgroup label="defaults">        <option selected="" value="0.250, 0.250, 0.750, 0.750">linear</option>        <option value="0.250, 0.100, 0.250, 1.000">ease (default)</option>        <option value="0.420, 0.000, 1.000, 1.000">ease-in</option>        <option value="0.000, 0.000, 0.580, 1.000">ease-out</option>        <option value="0.420, 0.000, 0.580, 1.000">ease-in-out</option>    </optgroup>    <optgroup label="Penner Equations (approximated)">        <option value="0.550, 0.085, 0.680, 0.530">easeInQuad</option>        <option value="0.550, 0.055, 0.675, 0.190">easeInCubic</option>        <option value="0.895, 0.030, 0.685, 0.220">easeInQuart</option>        <option value="0.755, 0.050, 0.855, 0.060">easeInQuint</option>        <option value="0.470, 0.000, 0.745, 0.715">easeInSine</option>        <option value="0.950, 0.050, 0.795, 0.035">easeInExpo</option>        <option value="0.600, 0.040, 0.980, 0.335">easeInCirc</option>        <option value="0.600, -0.280, 0.735, 0.045">easeInBack</option>        <option value="0.250, 0.460, 0.450, 0.940">easeOutQuad</option>        <option value="0.215, 0.610, 0.355, 1.000">easeOutCubic</option>        <option value="0.165, 0.840, 0.440, 1.000">easeOutQuart</option>        <option value="0.230, 1.000, 0.320, 1.000">easeOutQuint</option>        <option value="0.390, 0.575, 0.565, 1.000">easeOutSine</option>        <option value="0.190, 1.000, 0.220, 1.000">easeOutExpo</option>        <option value="0.075, 0.820, 0.165, 1.000">easeOutCirc</option>        <option value="0.175, 0.885, 0.320, 1.275">easeOutBack</option>        <option value="0.455, 0.030, 0.515, 0.955">easeInOutQuad</option>        <option value="0.645, 0.045, 0.355, 1.000">easeInOutCubic</option>        <option value="0.770, 0.000, 0.175, 1.000">easeInOutQuart</option>        <option value="0.860, 0.000, 0.070, 1.000">easeInOutQuint</option>        <option value="0.445, 0.050, 0.550, 0.950">easeInOutSine</option>        <option value="1.000, 0.000, 0.000, 1.000">easeInOutExpo</option>        <option value="0.785, 0.135, 0.150, 0.860">easeInOutCirc</option>        <option value="0.680, -0.550, 0.265, 1.550" selected="">easeInOutBack</option>    </optgroup></select>
<code class="easing-value" id="select-easing-value">cubic-bezier(0.680, -0.550, 0.265, 1.550)</code>

**JavaScript**

**HTML**

```html
<div id="gallery-custom-easing-demo">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('gallery-custom-easing-demo'), {
    easing: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
    // increasing speed to see the easing correctly
    // Just for the demo purpose
    speed: 1000,
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// `easing` is any CSS timing function. The speed is slower than the
// default 400, so the curve is easy to see.
<LightGallery easing="cubic-bezier(0.680, -0.550, 0.265, 1.550)" speed={1000}>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];
</script>

<template>
    <!-- `easing` is any CSS timing function. The speed is slower than the
         default 400, so the curve is easy to see. -->
    <LightGallery
        easing="cubic-bezier(0.680, -0.550, 0.265, 1.550)"
        :speed="1000"
    >
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- "easing" is any CSS timing function. The speed is slower than
             the default 400, so the curve is easy to see. -->
        <lg-gallery
            easing="cubic-bezier(0.680, -0.550, 0.265, 1.550)"
            [speed]="1000"
        >
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    items: LgGalleryItem[] = [
        { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
        { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
    ];
}
```


---

# Captions

> Gallery captions demo: HTML captions from data attributes or elements on the page, captions relative to each thumbnail, and animated captions.

You can directly pass image caption HTML via the data-sub-html attribute, or pass the id or class name of any HTML element (div) which contains your caption HTML.

Canonical page: https://www.lightgalleryjs.com/demos/captions/

#### Demo

**JavaScript**

**HTML**

```html
<div id="gallery-captions-demo">
    <a
        href="img/img1.jpg"
        data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>"
    >
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg" data-sub-html="#caption2">
        <img src="img/thumb2.jpg" />
    </a>
    <a href="img/img3.jpg" data-sub-html=".caption3">
        <img src="img/thumb3.jpg" />
    </a>
    <!-- more items -->
</div>

<div id="caption2" style="display:none">
    <h4>Bowness Bay</h4>
    <p>
        A beautiful Sunrise this morning taken En-route to Keswick not one as
        planned but I'm extremely happy I was passing the right place at the
        right time....
    </p>
</div>
<div class="caption3" style="display:none">
    <h4>Sunset Serenity</h4>
    <p>A gorgeous Sunset tonight captured at Coniston Water....</p>
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgZoom from 'lightgallery/plugins/zoom';

lightGallery(document.getElementById('gallery-captions-demo'), {
    plugins: [lgZoom],
});
```

**React**

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

// `caption` takes JSX; `captionHtml` takes an HTML string, like
// data-sub-html.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Fading Light',
        caption: (
            <>
                <h4>Fading Light</h4>
                <p>Classic view from Rigwood Jetty on Coniston Water.</p>
            </>
        ),
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Bowness Bay',
        captionHtml: '<h4>Bowness Bay</h4><p>A beautiful sunrise.</p>',
    },
];

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

**Vue**

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

const plugins = [Zoom];

// `captionHtml` takes an HTML string, like data-sub-html.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Fading Light',
        captionHtml: '<h4>Fading Light</h4><p>Classic view from Rigwood Jetty.</p>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Bowness Bay',
        captionHtml: '<h4>Bowness Bay</h4><p>A beautiful sunrise.</p>',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withZoom()];

    // `captionHtml` takes an HTML string, like data-sub-html.
    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Fading Light',
            captionHtml: '<h4>Fading Light</h4><p>Classic view from Rigwood Jetty.</p>',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Bowness Bay',
            captionHtml: '<h4>Bowness Bay</h4><p>A beautiful sunrise.</p>',
        },
    ];
}
```

### Captions relative to the current element

If you already have captions associated with the thumbnails, you can instruct
lightGallery to pick up captions from the element within the selector by passing
`subHtmlSelectorRelative: true` via lightGallery settings.

**JavaScript**

**HTML**

```html
<div id="relative-caption">
    <a href="img/img1.jpg" data-sub-html=".caption">
        <img src="img/thumb1.jpg" />

        <!-- This will appear as caption -->
        <div class="caption">
            <h4>Caption1</h4>
            <p>Desc1</p>
        </div>
    </a>
    <a href="img/img2.jpg" data-sub-html=".caption">
        <img src="img/thumb2.jpg" />
        <div class="caption">
            <h4>Caption1</h4>
            <p>Desc1</p>
        </div>
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';

lightGallery(document.getElementById('relative-caption'), {
    subHtmlSelectorRelative: true,
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import RelativeCaption from '@lightgallery/react/plugins/relativeCaption';

// There is no markup to scrape: the caption is an item field. The
// framework packages ship relative captions as a plugin that places it
// directly under the image instead of in the full-width bar.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        captionHtml: '<h4>Caption1</h4><p>Desc1</p>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        captionHtml: '<h4>Caption2</h4><p>Desc2</p>',
    },
];

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

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import RelativeCaption from '@lightgallery/vue/plugins/relativeCaption';

// There is no markup to scrape: the caption is an item field. The
// framework packages ship relative captions as a plugin that places it
// directly under the image instead of in the full-width bar.
const plugins = [RelativeCaption];
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        captionHtml: '<h4>Caption1</h4><p>Desc1</p>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        captionHtml: '<h4>Caption2</h4><p>Desc2</p>',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import {
    withRelativeCaption,
} from '@lightgallery/angular/plugins/relativeCaption';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    // There is no markup to scrape: the caption is an item field. The
    // framework packages ship relative captions as a plugin that places
    // it directly under the image instead of in the full-width bar.
    features = [withRelativeCaption()];

    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            captionHtml: '<h4>Caption1</h4><p>Desc1</p>',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            captionHtml: '<h4>Caption2</h4><p>Desc2</p>',
        },
    ];
}
```

### Caption animation

If you like to have animated captions, you can easily create your own animations
with the help of the lightGallery `slideDelay` option.

`slideDelay` adds a delay between slide transitions. You can use this time
interval to animate captions before the next slide transition starts.

**JavaScript**

**HTML**

```html
<div id="gallery-animated-captions-demo">
    <a
        href="img/img1.jpg"
        data-sub-html="<div class='lightGallery-captions'><h4>title</h4><p>description</p></div>"
    >
        <img src="img/thumb1.jpg" />
    </a>
    <a
        href="img/img2.jpg"
        data-sub-html="<div class='lightGallery-captions'><h4>title</h4><p>description</p></div>"
    >
        <img src="img/thumb2.jpg" />
    </a>
    <a
        href="img/img3.jpg"
        data-sub-html="<div class='lightGallery-captions'><h4>title</h4><p>description</p></div>"
    >
        <img src="img/thumb3.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
lightGallery(document.getElementById('gallery-animated-captions-demo'), {
    speed: 500,
    // Append caption inside the slide item
    // This way you can make use of lightGallery active slide class names to add animation
    appendSubHtmlTo: '.lg-item',
    // Delay slide transition to complete captions animations
    // before navigating to different slides (Optional)
    // You can find caption animation demo on the captions demo page
    slideDelay: 400,
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';

// The caption wrapper carries the class the CSS below animates.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        captionHtml:
            '<div class="lightGallery-captions"><h4>title</h4><p>description</p></div>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        captionHtml:
            '<div class="lightGallery-captions"><h4>title</h4><p>description</p></div>',
    },
];

// captionPosition 'slide' renders the caption inside the slide, so the
// active-slide classes can drive your animation; slideDelay gives it
// time before the next slide transition starts.
<LightGallery speed={500} captionPosition="slide" slideDelay={400}>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';

// The caption wrapper carries the class the CSS below animates.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        captionHtml:
            '<div class="lightGallery-captions"><h4>title</h4><p>description</p></div>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        captionHtml:
            '<div class="lightGallery-captions"><h4>title</h4><p>description</p></div>',
    },
];
</script>

<template>
    <!-- caption-position 'slide' renders the caption inside the slide, so
         the active-slide classes can drive your animation; slide-delay
         gives it time before the next slide transition starts. -->
    <LightGallery :speed="500" caption-position="slide" :slide-delay="400">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- captionPosition 'slide' renders the caption inside the slide,
             so the active-slide classes can drive your animation;
             slideDelay gives it time before the next slide transition
             starts. -->
        <lg-gallery [speed]="500" captionPosition="slide" [slideDelay]="400">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    // The caption wrapper carries the class the CSS below animates.
    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            captionHtml:
                '<div class="lightGallery-captions"><h4>title</h4><p>description</p></div>',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            captionHtml:
                '<div class="lightGallery-captions"><h4>title</h4><p>description</p></div>',
        },
    ];
}
```

##### CSS

```scss
// Add transitions
.lightGallery-captions {
    h4,
    p {
        transition: transform 0.4s ease-in-out, opacity 0.4s ease-in;
    }
}
.lg-current {
    .lightGallery-captions {
        h4,
        p {
            transition-delay: 500ms;
        }
    }
    &.lg-slide-progress {
        .lightGallery-captions {
            h4,
            p {
                transition-delay: 0ms;
            }
        }
    }
}

// Disappear
.lightGallery-captions {
    h4 {
        transform: translate3d(60px, 0, 0px);
    }
    p {
        transform: translate3d(-60px, 0, 0px);
    }
    h4,
    p {
        opacity: 0;
    }
}

// Active
.lg-current {
    .lightGallery-captions {
        h4,
        p {
            transform: translate3d(0, 0, 0px);
        }
        h4,
        p {
            opacity: 1;
        }
    }
}

// Disappear
.lg-slide-progress {
    .lightGallery-captions {
        h4 {
            transform: translate3d(-60px, 0, 0px);
        }
        p {
            transform: translate3d(60px, 0, 0px);
        }
        h4,
        p {
            opacity: 0;
        }
    }
}
```


---

# Infinite scrolling

> Infinite scrolling gallery demo: load more thumbnails as the page scrolls and keep the lightbox in sync with refresh().

Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. Let's see how we can implement infinite scrolling with lightGallery.

Canonical page: https://www.lightgalleryjs.com/demos/infinite-scrolling/

Start with a regular gallery.

**JavaScript**

**HTML**

```html
<div id="infinite-scroll-gallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
const gallery = document.getElementById('infinite-scroll-gallery');
const lg = lightGallery(gallery, {
    speed: 500,
});
```

**React**

```tsx
import { useState } from 'react';
import { LightGallery, LightGalleryItem } from '@lightgallery/react';

const firstPage = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

const [items, setItems] = useState(firstPage);

<LightGallery speed={500}>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item} href={item.src}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { ref } from 'vue';
import { LightGallery, LgItem } from '@lightgallery/vue';

const firstPage = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

const items = ref([...firstPage]);
</script>

<template>
    <LightGallery :speed="500">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component, signal } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

const firstPage: LgGalleryItem[] = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [speed]="500">
            @for (item of items(); track item.src) {
                <a [href]="item.src" [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    items = signal(firstPage);
}
```

Put an element after the gallery, a status line works well, and watch it
with an `IntersectionObserver`. It reports when the element scrolls within
200px of the viewport, with no scroll listener to throttle and no library.

**JavaScript**

**HTML**

```html
<p id="infinite-scroll-status">Scroll for more</p>
```

**JavaScript**

```js
const status = document.getElementById('infinite-scroll-status');
const observer = new IntersectionObserver(
    ([entry]) => {
        if (entry.isIntersecting) {
            // The status line is in view: load the next page
        }
    },
    { rootMargin: '200px' },
);
observer.observe(status);
```

**React**

```tsx
const status = useRef<HTMLParagraphElement>(null);

useEffect(() => {
    const observer = new IntersectionObserver(
        ([entry]) => {
            if (entry.isIntersecting) {
                // The status line is in view: load the next page
            }
        },
        { rootMargin: '200px' },
    );
    observer.observe(status.current!);
    return () => observer.disconnect();
}, []);

<p ref={status}>Scroll for more</p>;
```

**Vue**

```vue
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const status = ref(null);
const observer = new IntersectionObserver(
    ([entry]) => {
        if (entry.isIntersecting) {
            // The status line is in view: load the next page
        }
    },
    { rootMargin: '200px' },
);

onMounted(() => observer.observe(status.value));
onUnmounted(() => observer.disconnect());
</script>

<template>
    <p ref="status">Scroll for more</p>
</template>
```

**Angular**

```ts
// In the template: <p #status>Scroll for more</p>
status = viewChild.required<ElementRef<HTMLElement>>('status');

constructor() {
    const observer = new IntersectionObserver(
        ([entry]) => {
            if (entry.isIntersecting) {
                // The status line is in view: load the next page
            }
        },
        { rootMargin: '200px' },
    );
    afterNextRender(() => observer.observe(this.status().nativeElement));
    inject(DestroyRef).onDestroy(() => observer.disconnect());
}
```

Then append the new thumbnails and call `refresh()`. The gallery picks up
the new items as they are; there is no need to destroy and re-create it.
In React, Vue and Angular, adding to the list is the whole update.

**JavaScript**

```js
gallery.insertAdjacentHTML('beforeend', thumbnails);
lg.refresh();
```

**React**

```tsx
setItems((current) => [...current, ...nextPage]);
```

**Vue**

```js
items.value.push(...nextPage);
```

**Angular**

```ts
append(nextPage: LgGalleryItem[]) {
    this.items.update((current) => [...current, ...nextPage]);
}
```

That's it. Here is the full example: a `loading` flag keeps one request in
flight at a time, and the observer disconnects after the last page.

**JavaScript**

```js
const gallery = document.getElementById('infinite-scroll-gallery');
const status = document.getElementById('infinite-scroll-status');
const lg = lightGallery(gallery, {
    speed: 500,
});

let loading = false;
const observer = new IntersectionObserver(
    async ([entry]) => {
        if (!entry.isIntersecting || loading) return;
        loading = true;
        status.textContent = 'Loading more photos…';

        // Your request; resolves to the next page's thumbnails as HTML,
        // or null when there are no more.
        const thumbnails = await fetchNextPage();
        if (!thumbnails) {
            status.textContent = "That's everything.";
            observer.disconnect();
            return;
        }

        gallery.insertAdjacentHTML('beforeend', thumbnails);
        lg.refresh();
        status.textContent = 'Scroll for more';
        loading = false;
    },
    { rootMargin: '200px' },
);
observer.observe(status);
```

**React**

```tsx
import { useEffect, useRef, useState } from 'react';
import {
    LightGallery,
    LightGalleryItem,
    type GalleryItem,
} from '@lightgallery/react';

const firstPage: GalleryItem[] = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// Your request; resolves to the next page's items, or null when there
// are no more.
declare function fetchNextPage(): Promise<GalleryItem[] | null>;

export default function Gallery() {
    const [items, setItems] = useState(firstPage);
    const [done, setDone] = useState(false);
    const status = useRef<HTMLParagraphElement>(null);

    // The status line sits after the gallery. When it comes within 200px
    // of the viewport, the next page loads. The effect runs again after
    // every page, so a status line that is still in view after a short
    // page loads the next one too.
    useEffect(() => {
        if (done) return;
        const observer = new IntersectionObserver(
            async ([entry]) => {
                if (!entry.isIntersecting) return;
                // One request at a time.
                observer.disconnect();
                const next = await fetchNextPage();
                if (!next) {
                    setDone(true);
                    return;
                }
                // Appending to the list is the whole update: the gallery
                // picks up the new slides on the next render.
                setItems((current) => [...current, ...next]);
            },
            { rootMargin: '200px' },
        );
        observer.observe(status.current!);
        return () => observer.disconnect();
    }, [items, done]);

    return (
        <>
            <LightGallery speed={500}>
                {items.map((item) => (
                    <LightGalleryItem key={item.src} item={item} href={item.src}>
                        <img src={item.thumb} alt={item.alt} />
                    </LightGalleryItem>
                ))}
            </LightGallery>
            <p ref={status}>
                {done ? "That's everything." : 'Scroll for more'}
            </p>
        </>
    );
}
```

**Vue**

```vue
<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';

const firstPage: LgGalleryItem[] = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// Your request; resolves to the next page's items, or null when there
// are no more.
declare function fetchNextPage(): Promise<LgGalleryItem[] | null>;

const items = ref([...firstPage]);
const done = ref(false);
const status = useTemplateRef('status');

let loading = false;

// The status line sits after the gallery. When it comes within 200px of
// the viewport, the next page loads.
const observer = new IntersectionObserver(
    async ([entry]) => {
        if (!entry.isIntersecting || loading) return;
        loading = true;
        const next = await fetchNextPage();
        if (!next) {
            done.value = true;
            observer.disconnect();
            return;
        }
        // Appending to the list is the whole update: the gallery picks up
        // the new slides on the next render.
        items.value.push(...next);
        loading = false;

        // Once the new thumbnails are on the page, observe again, so a
        // status line that is still in view after a short page loads the
        // next one too.
        await nextTick();
        observer.unobserve(status.value!);
        observer.observe(status.value!);
    },
    { rootMargin: '200px' },
);

onMounted(() => observer.observe(status.value!));
onUnmounted(() => observer.disconnect());
</script>

<template>
    <LightGallery :speed="500">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
    <p ref="status">{{ done ? "That's everything." : 'Scroll for more' }}</p>
</template>
```

**Angular**

```ts
import {
    afterRenderEffect,
    Component,
    DestroyRef,
    ElementRef,
    inject,
    signal,
    viewChild,
} from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

const firstPage: LgGalleryItem[] = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// Your request; resolves to the next page's items, or null when there
// are no more.
declare function fetchNextPage(): Promise<LgGalleryItem[] | null>;

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [speed]="500">
            @for (item of items(); track item.src) {
                <a [href]="item.src" [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
        <p #status>{{ done() ? "That's everything." : 'Scroll for more' }}</p>
    `,
})
export class Gallery {
    items = signal(firstPage);
    done = signal(false);

    private status = viewChild.required<ElementRef<HTMLElement>>('status');
    private loading = false;

    constructor() {
        // The status line sits after the gallery. When it comes within
        // 200px of the viewport, the next page loads.
        const observer = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    this.loadNextPage();
                }
            },
            { rootMargin: '200px' },
        );
        // Runs after the first render and after each page is rendered.
        // Observing again makes a status line that is still in view after
        // a short page load the next one too.
        afterRenderEffect(() => {
            observer.disconnect();
            if (!this.done()) {
                observer.observe(this.status().nativeElement);
            }
        });
        inject(DestroyRef).onDestroy(() => observer.disconnect());
    }

    private async loadNextPage(): Promise<void> {
        // One request at a time.
        if (this.loading) return;
        this.loading = true;
        const next = await fetchNextPage();
        if (!next) {
            this.done.set(true);
            return;
        }
        // Appending to the list is the whole update: the gallery picks up
        // the new slides on the next render.
        this.items.update((current) => [...current, ...next]);
        this.loading = false;
    }
}
```

### Infinite scrolling

    {photos('desert', 6).map((p) => (
        <a data-lg-size={`${p.width}-${p.height}`} class="gallery-item" data-src={p.src} data-sub-html={p.caption}>
            <img class="img-responsive" alt={p.alt} src={p.thumb} />
        </a>
    ))}

<p class="infinite-scroll-status" id="infinite-scroll-status" aria-live="polite">Scroll for more</p>


---

# Medium like image zoom

> Medium-style image zoom: click an image in an article and it grows in place, with no lightbox chrome.

Add a zoom feature to your blog images just like on Medium. With lightGallery's mediumZoom plugin, it's easy to give your readers a closer look at your pictures, straight away.

Canonical page: https://www.lightgalleryjs.com/demos/medium-zoom/

If you want to target all images in a blog post, you can add lightGallery to the
outer element and select all images using the selector option.

**JavaScript**

**HTML**

```html
<div class="medium-zoom-demo">
    <p>Lorem ipsum dolor sit amet......</p>
    <figure
        lg-background-color="white"
        class="blog-images"
        data-src="image-1.jpg"
        data-lg-size="1600-1126"
    >
        <img src="thumbnail-1.jpg" />
    </figure>
    <p>Lorem ipsum dolor sit amet......</p>
    <p>Lorem ipsum dolor sit amet......</p>
    <p>Lorem ipsum dolor sit amet......</p>
    <figure
        lg-background-color="rgb(28 62 74)"
        class="blog-images"
        data-src="image-2.jpg"
        data-lg-size="1600-1126"
    >
        <img src="thumbnail-2.jpg" />
    </figure>
    <p>Lorem ipsum dolor sit amet......</p>
    <figure class="blog-images" data-src="image-3.jpg" data-lg-size="1600-1126">
        <img src="thumbnail-3.jpg" />
    </figure>
</div>
```

**JavaScript**

```js
lightGallery(document.querySelector('.medium-zoom-demo'), {
    // Target all images
    selector: '.blog-images',
    // Add medium zoom plugin
    plugins: [lgMediumZoom],
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import MediumZoom from '@lightgallery/react/plugins/mediumZoom';

// `lgBackgroundColor` is the backdrop color behind one image; the
// default is black.
const items = [
    {
        src: 'image-1.jpg',
        thumb: 'thumbnail-1.jpg',
        alt: 'Office building',
        lgSize: '1600-1126',
        lgBackgroundColor: 'white',
    },
    {
        src: 'image-2.jpg',
        thumb: 'thumbnail-2.jpg',
        alt: 'Architectural design',
        lgSize: '1600-1126',
        lgBackgroundColor: 'rgb(28 62 74)',
    },
];

// Triggers are components here, so there is no `selector` to match:
// wrap the images you want zoomable. `margin` is the space kept above
// and below the zoomed image, in px.
<LightGallery plugins={[MediumZoom]} mediumZoom={{ margin: 24 }}>
    <article>
        <p>Lorem ipsum dolor sit amet......</p>
        {items.map((item) => (
            <LightGalleryItem key={item.src} item={item}>
                <img src={item.thumb} alt={item.alt} />
            </LightGalleryItem>
        ))}
    </article>
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import MediumZoom from '@lightgallery/vue/plugins/mediumZoom';

const plugins = [MediumZoom];

// `lgBackgroundColor` is the backdrop color behind one image; the
// default is black.
const items = [
    {
        src: 'image-1.jpg',
        thumb: 'thumbnail-1.jpg',
        alt: 'Office building',
        lgSize: '1600-1126',
        lgBackgroundColor: 'white',
    },
    {
        src: 'image-2.jpg',
        thumb: 'thumbnail-2.jpg',
        alt: 'Architectural design',
        lgSize: '1600-1126',
        lgBackgroundColor: 'rgb(28 62 74)',
    },
];
</script>

<template>
    <!-- Triggers are components here, so there is no `selector` to match:
         wrap the images you want zoomable. `margin` is the space kept
         above and below the zoomed image, in px. -->
    <LightGallery :plugins="plugins" :medium-zoom="{ margin: 24 }">
        <article>
            <p>Lorem ipsum dolor sit amet......</p>
            <LgItem v-for="item of items" :key="item.src" :item="item">
                <img :src="item.thumb" :alt="item.alt" />
            </LgItem>
        </article>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withMediumZoom } from '@lightgallery/angular/plugins/mediumZoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- Triggers are directives here, so there is no selector to
             match: wrap the images you want zoomable. -->
        <lg-gallery [features]="features">
            <article>
                <p>Lorem ipsum dolor sit amet......</p>
                @for (item of items; track item.src) {
                    <a [lgGalleryItem]="item">
                        <img [src]="item.thumb" [alt]="item.alt" />
                    </a>
                }
            </article>
        </lg-gallery>
    `,
})
export class Gallery {
    // `margin` is the space kept above and below the zoomed image, in px.
    features = [withMediumZoom({ margin: 24 })];

    // `lgBackgroundColor` is the backdrop color behind one image; the
    // default is black.
    items: LgGalleryItem[] = [
        {
            src: 'image-1.jpg',
            thumb: 'thumbnail-1.jpg',
            alt: 'Office building',
            lgSize: '1600-1126',
            lgBackgroundColor: 'white',
        },
        {
            src: 'image-2.jpg',
            thumb: 'thumbnail-2.jpg',
            alt: 'Architectural design',
            lgSize: '1600-1126',
            lgBackgroundColor: 'rgb(28 62 74)',
        },
    ];
}
```

##### Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend purus
ligula, at gravida augue ullamcorper et. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Cras placerat eu lectus a
condimentum. Nam hendrerit sem augue, ac porta ante venenatis vel. Quisque
ullamcorper dapibus venenatis. Cras cursus justo vitae erat lacinia tristique.
Praesent eu lobortis leo. Vestibulum sollicitudin orci quis augue molestie
convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Duis eget sem nulla. Nulla ut magna dignissim, rhoncus
mi ut, lobortis metus. Etiam vel pretium ipsum. Vestibulum consequat varius
odio, sed rutrum purus laoreet id. Mauris vitae urna nec ligula vulputate
tincidunt.

<figure lg-background-color="#FFF" class="blog-images" data-src="/img/photos/facade/01-2400.avif" data-lg-size="2400-3361" >
<img alt="office building with symmetrical gray textured walls" src="/img/photos/facade/01-480.avif" srcset="/img/photos/facade/01-480.avif 480w, /img/photos/facade/01-1200.avif 1200w" sizes="360px" width="480" height="672"/>
</figure>

Maecenas aliquam lacinia elit, in vehicula enim pretium ut. Aenean consequat
urna in purus blandit rutrum efficitur at tortor. Morbi aliquet lorem eget arcu
rutrum commodo. Vestibulum quis aliquet erat. Nullam sit amet orci nunc. Quisque
faucibus ante eu massa convallis sodales. Proin imperdiet felis augue, vel
egestas diam suscipit sit amet. Etiam non orci justo. Nam aliquam viverra quam
quis elementum. Donec mollis posuere pulvinar. Phasellus ullamcorper, odio non
luctus commodo, felis ex vestibulum orci, vitae vestibulum nisl est in erat.
Donec ut cursus massa. Cras tellus ligula, consectetur eu mauris ornare,
sollicitudin efficitur turpis. Nulla nulla quam, accumsan sit amet ipsum et,
fermentum sodales augue. Fusce rhoncus tortor est, eu commodo diam pellentesque
eu.

Cras varius placerat nulla ut suscipit. Duis suscipit non mi a sagittis. Vivamus
in risus lacinia, rhoncus arcu imperdiet, ultricies diam. Pellentesque pharetra
congue nunc nec sollicitudin. Donec dapibus urna malesuada elit auctor
scelerisque. Nunc ornare egestas odio quis hendrerit. Vestibulum eget suscipit
lacus. Sed in lorem in tellus hendrerit suscipit. Praesent molestie viverra
sollicitudin. Donec interdum, lectus ac molestie ultricies, nunc lectus luctus
lectus, ut pulvinar lectus nunc id risus. Nullam porta aliquet ipsum, in iaculis
diam bibendum non. Aenean at lectus turpis. Fusce nec leo et nisi porta
consectetur at et metus.

<figure lg-background-color="rgb(22 37 44)" class="blog-images blog-images-left" data-src="/img/photos/facade/02-2400.avif" data-lg-size="2333-3500" >
<img alt="gray and black architectural design" src="/img/photos/facade/02-480.avif" srcset="/img/photos/facade/02-480.avif 480w, /img/photos/facade/02-1200.avif 1200w" sizes="300px" width="480" height="720"/>
</figure>

Curabitur vitae interdum sem. Curabitur blandit massa quis elit molestie
dapibus. Mauris eget dolor ac sem tempor dapibus sit amet et velit. Nulla
facilisi. Vestibulum laoreet finibus molestie. Donec vel convallis enim. Morbi
feugiat pretium nunc aliquet tincidunt. Sed congue dapibus sem, ac vestibulum
urna egestas commodo. Vivamus eu dolor quis metus egestas laoreet ut eu quam.
Phasellus imperdiet sapien id nisl consectetur lobortis. Mauris quam felis,
porttitor eu convallis vel, tincidunt sit amet nulla. Cras ut vehicula arcu,
ornare mollis risus. Vivamus at commodo lacus, sed commodo eros. In tincidunt
malesuada magna at ullamcorper. Etiam neque est, vulputate id turpis in,
volutpat molestie leo.

Fusce efficitur ipsum volutpat, finibus dui ut, scelerisque ex. Donec tempus
quis felis non iaculis. Nam volutpat vehicula odio, sit amet semper leo ornare
imperdiet. Nulla tincidunt sagittis nisl a rutrum. Maecenas fermentum erat quis
volutpat fringilla. Proin commodo nunc vel dui mattis, vitae consectetur purus
feugiat. Aenean vitae arcu metus. Ut mattis dui ut nunc tincidunt, eget finibus
velit imperdiet. In dignissim sapien sit amet venenatis efficitur. Phasellus
pulvinar, velit non lacinia scelerisque, nisi lectus pulvinar ex, sagittis
pellentesque mauris massa varius turpis. Suspendisse quis placerat magna, eget
tempus erat. Nunc non eros vel eros mollis interdum. Duis porttitor, ante ac
accumsan molestie, odio nunc venenatis purus, sit amet viverra augue tortor
tempus turpis. Proin quis vehicula arcu.

<figure lg-background-color="rgb(28 62 74)" class="blog-images blog-images-right" data-src="/img/photos/facade/03-2400.avif" data-lg-size="1600-2400">
<img alt="a very tall building with lots of windows" src="/img/photos/facade/03-480.avif" srcset="/img/photos/facade/03-480.avif 480w, /img/photos/facade/03-1200.avif 1200w" sizes="300px" width="480" height="724"/>
</figure>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Donec ullamcorper metus et massa sodales pretium. Donec velit libero,
faucibus eget nisi eu, fringilla maximus est. Curabitur id turpis vel dolor
malesuada commodo in eget sem. Sed semper nulla ac ligula ornare, ac hendrerit
dui porttitor. Morbi magna velit, suscipit sit amet mauris nec, semper varius
velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nam vitae lacus blandit, gravida augue consectetur, auctor mi.
Etiam blandit mi at mauris cursus, nec efficitur diam tincidunt. Aenean non
pulvinar neque, eget efficitur mi. Ut at condimentum lacus, et venenatis nibh.
Pellentesque enim lectus, posuere a consequat et, tincidunt eget leo.

Etiam a felis nunc. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Vivamus nisl magna, feugiat sit amet nisi vitae, dignissim tempus
metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Ut dictum ipsum quis justo efficitur viverra quis vel nulla.
Mauris nec mauris eros. Fusce ornare justo at purus congue, ac dictum lacus
commodo. Cras ullamcorper luctus purus, non fermentum arcu. Praesent vitae
lacinia lacus, eget mollis mi. Pellentesque at enim a mi congue porta.


---

# Lightbox with custom icons

> JavaScript lightbox gallery with a custom icon set. Replace the control icons per name with your own inline SVGs, live demo plus the code for vanilla JS, React, Vue, and Angular.

Every lightGallery control icon is an inline SVG you can replace per name. This gallery runs a hand-rolled thin-stroke set, close, arrows, zoom, autoplay and fullscreen are all swapped, while everything else keeps the built-in artwork. Read more in the [custom icons guide](https://www.lightgalleryjs.com/docs/custom-icons/).

Canonical page: https://www.lightgalleryjs.com/demos/custom-icons/

### Custom icon set

Open the gallery and compare the toolbar with any other demo on this
site, the icons here are overridden per name with the `icons`
setting. The download button's name is deliberately omitted, so it
keeps the built-in icon right next to the custom ones, and state
pairs such as `autoplayPlay`/`autoplayPause` swap exactly like the
built-ins do.

_Live demo: https://www.lightgalleryjs.com/demos/custom-icons/_

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgAutoplay from 'lightgallery/plugins/autoplay';
import lgFullscreen from 'lightgallery/plugins/fullscreen';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';

// Any SVG markup works; drawing with currentColor keeps the
// hover/active colors of the buttons.
const icon = (content) =>
    `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
        stroke-width="1.8" stroke-linecap="round"
        stroke-linejoin="round">${content}</svg>`;

lightGallery(document.getElementById('custom-icons-gallery'), {
    plugins: [lgZoom, lgFullscreen, lgAutoplay, lgThumbnail],
    icons: {
        close: icon('<path d="M6 6l12 12M18 6L6 18"/>'),
        prev: icon('<path d="M14.5 5.5L8 12l6.5 6.5"/>'),
        next: icon('<path d="M9.5 5.5L16 12l-6.5 6.5"/>'),
        // State pairs need both names, or the pair keeps the built-ins.
        autoplayPlay: icon('<path d="M9 5.8v12.4L19 12z"/>'),
        autoplayPause: icon('<path d="M8.5 6v12M15.5 6v12"/>'),
        // more icons by name
    },
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Autoplay from '@lightgallery/react/plugins/autoplay';
import Fullscreen from '@lightgallery/react/plugins/fullscreen';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];

// Any SVG works; drawing with currentColor keeps the hover/active
// colors of the buttons.
const icon = (path: string) => (
    <svg
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
    >
        <path d={path} />
    </svg>
);

<LightGallery
    plugins={[Zoom, Fullscreen, Autoplay, Thumbnail]}
    render={{
        // A node per name; `undefined` keeps the built-in icon.
        icon: (name) => {
            switch (name) {
                case 'close':
                    return icon('M6 6l12 12M18 6L6 18');
                // State pairs need both names, or the pair keeps the
                // built-ins.
                case 'autoplayPlay':
                    return icon('M9 5.8v12.4L19 12z');
                case 'autoplayPause':
                    return icon('M8.5 6v12M15.5 6v12');
                default:
                    return undefined;
            }
        },
    }}
>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import Autoplay from '@lightgallery/vue/plugins/autoplay';
import Fullscreen from '@lightgallery/vue/plugins/fullscreen';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Zoom from '@lightgallery/vue/plugins/zoom';
// SVG components or raw SVG strings, keyed by icon name.
import CloseIcon from './icons/CloseIcon.vue';
import PauseIcon from './icons/PauseIcon.vue';
import PlayIcon from './icons/PlayIcon.vue';

const plugins = [Zoom, Fullscreen, Autoplay, Thumbnail];

// Names left out keep the built-in icons. State pairs need both names,
// or the pair keeps the built-ins.
const icons = {
    close: CloseIcon,
    autoplayPlay: PlayIcon,
    autoplayPause: PauseIcon,
};

const items = [
    { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
    { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
];
</script>

<template>
    <LightGallery :plugins="plugins" :icons="icons">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    LgIconDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withAutoplay } from '@lightgallery/angular/plugins/autoplay';
import { withFullscreen } from '@lightgallery/angular/plugins/fullscreen';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective, LgIconDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
            <!-- The template declares the names it covers; other names keep
                 the built-in icons. -->
            <ng-template
                [lgIcon]="['close', 'autoplayPlay', 'autoplayPause']"
                let-name
            >
                @switch (name) {
                    @case ('close') {
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="1.8" stroke-linecap="round">
                            <path d="M6 6l12 12M18 6L6 18" />
                        </svg>
                    }
                    @case ('autoplayPlay') {
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="1.8" stroke-linejoin="round">
                            <path d="M9 5.8v12.4L19 12z" />
                        </svg>
                    }
                    @case ('autoplayPause') {
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="1.8" stroke-linecap="round">
                            <path d="M8.5 6v12M15.5 6v12" />
                        </svg>
                    }
                }
            </ng-template>
        </lg-gallery>
    `,
})
export class Gallery {
    features = [
        withZoom(),
        withFullscreen(),
        withAutoplay(),
        withThumbnail(),
    ];

    items: LgGalleryItem[] = [
        { src: 'img/img1.jpg', thumb: 'img/thumb1.jpg', alt: 'Mountains' },
        { src: 'img/img2.jpg', thumb: 'img/thumb2.jpg', alt: 'Forest path' },
    ];
}
```


---

# Justified layout gallery

> JavaScript image gallery with a justified layout. Rows of equal height fill the container edge to edge, like the classic photo-stream look.

lightGallery justified layout plugin arranges your gallery thumbnails in rows of equal height and varying widths that fill the container edge to edge. The layout is calculated from the image aspect ratios, re-flows on resize, and doubles as the trigger grid for the lightbox. Find all the options in the [docs](https://www.lightgalleryjs.com/docs/settings/#justified-layout-plugin) and the [justified layout guide](https://www.lightgalleryjs.com/docs/justified-layout/).

Canonical page: https://www.lightgalleryjs.com/demos/justified-layout/

> You need to include the justified layout plugin in the document.

### Justified gallery

The default settings target a 180px row height with the last row aligned to
the reading start.

_Live demo: https://www.lightgalleryjs.com/demos/justified-layout/_

Provide the natural image size via `data-lg-size` so the rows can be laid out
before the thumbnails finish loading. Without it, the layout falls back to the
loaded image's aspect ratio.

**JavaScript**

**HTML**

```html
<div id="gallery-justified-layout-demo">
    <a data-lg-size="1600-1067" href="img/img1.jpg">
        <img src="img/thumb1.jpg" />
    </a>
    <a data-lg-size="1600-2400" href="img/img2.jpg">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgJustified from 'lightgallery/plugins/justified';

// Don't forget to include the justified css file
// import 'lightgallery/css/lg-justified.css';

lightGallery(document.getElementById('gallery-justified-layout-demo'), {
    plugins: [lgJustified],
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import { JustifiedGrid } from '@lightgallery/react/plugins/justified';

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-justified.css';

const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        // "WIDTH-HEIGHT" of the full-size image: the rows are laid out
        // from it before the thumbnails load
        lgSize: '1600-1067',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        lgSize: '1600-2400',
    },
];

// JustifiedGrid lays the triggers out in rows of equal height that fill
// its width.
<LightGallery>
    <JustifiedGrid>
        {items.map((item) => (
            <LightGalleryItem
                key={item.src}
                item={item}
                data-lg-size={item.lgSize}
            >
                <img src={item.thumb} alt={item.alt} />
            </LightGalleryItem>
        ))}
    </JustifiedGrid>
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import { JustifiedGrid } from '@lightgallery/vue/plugins/justified';

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-justified.css';

const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        // "WIDTH-HEIGHT" of the full-size image: the rows are laid out
        // from it before the thumbnails load
        lgSize: '1600-1067',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        lgSize: '1600-2400',
    },
];
</script>

<template>
    <LightGallery>
        <!-- JustifiedGrid lays the triggers out in rows of equal height
             that fill its width. -->
        <JustifiedGrid>
            <LgItem
                v-for="item of items"
                :key="item.src"
                :item="item"
                :data-lg-size="item.lgSize"
            >
                <img :src="item.thumb" :alt="item.alt" />
            </LgItem>
        </JustifiedGrid>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { LgJustifiedGridComponent } from '@lightgallery/angular/plugins/justified';

@Component({
    selector: 'app-gallery',
    imports: [
        LgGalleryComponent,
        LgGalleryItemDirective,
        LgJustifiedGridComponent,
    ],
    template: `
        <lg-gallery>
            <!-- lg-justified-grid lays the triggers out in rows of equal
                 height that fill its width. -->
            <lg-justified-grid>
                @for (item of items; track item.src) {
                    <a [lgGalleryItem]="item" [attr.data-lg-size]="item.lgSize">
                        <img [src]="item.thumb" [alt]="item.alt" />
                    </a>
                }
            </lg-justified-grid>
        </lg-gallery>
    `,
})
export class Gallery {
    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            // "WIDTH-HEIGHT" of the full-size image: the rows are laid out
            // from it before the thumbnails load
            lgSize: '1600-1067',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            lgSize: '1600-2400',
        },
    ];
}
```

### Customize the layout

Tune the target row height, the gap, and the last-row policy, `'justify'`
stretches the leftover row to fill the width, `'start'` keeps it at row
height, `'hide'` hides the leftover thumbnails.

_Live demo: https://www.lightgalleryjs.com/demos/justified-layout/_

**JavaScript**

```js
lightGallery(document.getElementById('gallery-justified-custom-demo'), {
    plugins: [lgJustified],
    justifiedRowHeight: 120,
    justifiedGap: 12,
    justifiedLastRow: 'justify',
});
```

**React**

```tsx
<JustifiedGrid rowHeight={120} gap={12} lastRow="justify">
    {/* LightGalleryItem triggers as above */}
</JustifiedGrid>
```

**Vue**

```vue
<JustifiedGrid :row-height="120" :gap="12" last-row="justify">
    <!-- LgItem triggers as above -->
</JustifiedGrid>
```

**Angular**

```html
<lg-justified-grid [rowHeight]="120" [gap]="12" lastRow="justify">
    <!-- lgGalleryItem triggers as above -->
</lg-justified-grid>
```


---

# RTL gallery

> JavaScript image gallery with right-to-left support. Navigation, swipe direction, and the gallery chrome mirror for RTL languages.

lightGallery supports right-to-left reading direction. Keyboard arrows, swipe advance, and the slide and thumbnail transforms follow the gallery direction, and the optional lg-rtl.css layer mirrors the controls. The direction can be forced or inherited from the page. Read more in the [localization &amp; RTL guide](https://www.lightgalleryjs.com/docs/localization-rtl/).

Canonical page: https://www.lightgalleryjs.com/demos/rtl/

> **direction: 'auto'**, the gallery below inherits its direction from the `dir="rtl"` attribute on the gallery element. You can also force it with `direction: 'rtl'` regardless of the markup.

### Demo

The trigger grid below is an Arabic-captioned gallery. Open it and note that
the previous/next controls are mirrored and the left/right arrow keys and
swipe gestures advance in reading order.

**JavaScript**

**HTML**

```html
<div id="gallery-rtl-demo" dir="rtl">
    <a data-lg-size="1600-1067" data-src="img/img1.jpg"
        data-sub-html="<h4>طبقات من الأزرق</h4>">
        <img src="img/thumb1.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';

// The RTL chrome mirroring is an opt-in css layer.
// Include it whenever the direction resolves to rtl.
// import 'lightgallery/css/lg-rtl.css';

lightGallery(document.getElementById('gallery-rtl-demo'), {
    // 'auto' inherits the computed direction of the gallery
    // element, dir="rtl" in the markup above.
    // Use 'rtl' to force it regardless of the markup.
    direction: 'auto',
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';

import 'lightgallery/css/lightgallery.css';
// Mirrors the gallery controls in a right-to-left gallery.
import 'lightgallery/css/lg-rtl.css';

const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'طبقات من الأزرق',
        captionHtml: '<h4>طبقات من الأزرق</h4>',
        lgSize: '1600-1067',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'قصبة في الواحة',
        captionHtml: '<h4>قصبة في الواحة</h4>',
        lgSize: '1600-1067',
    },
];

// 'auto' inherits the direction from the nearest dir attribute;
// 'rtl' forces it regardless of the markup.
<LightGallery direction="auto">
    {/* dir="rtl" mirrors the grid on the page. */}
    <div dir="rtl">
        {items.map((item) => (
            <LightGalleryItem key={item.src} item={item}>
                <img src={item.thumb} alt={item.alt} />
            </LightGalleryItem>
        ))}
    </div>
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';

import 'lightgallery/css/lightgallery.css';
// Mirrors the gallery controls in a right-to-left gallery.
import 'lightgallery/css/lg-rtl.css';

const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'طبقات من الأزرق',
        captionHtml: '<h4>طبقات من الأزرق</h4>',
        lgSize: '1600-1067',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'قصبة في الواحة',
        captionHtml: '<h4>قصبة في الواحة</h4>',
        lgSize: '1600-1067',
    },
];
</script>

<template>
    <!-- 'auto' inherits the direction from the nearest dir attribute;
         'rtl' forces it regardless of the markup. -->
    <LightGallery direction="auto">
        <!-- dir="rtl" mirrors the grid on the page. -->
        <div dir="rtl">
            <LgItem v-for="item of items" :key="item.src" :item="item">
                <img :src="item.thumb" :alt="item.alt" />
            </LgItem>
        </div>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

// The RTL chrome mirroring is an opt-in css layer: add
// 'lightgallery/css/lg-rtl.css' to your global styles whenever the
// direction resolves to rtl.

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- 'auto' inherits the direction from the nearest dir attribute;
             'rtl' forces it regardless of the markup. -->
        <lg-gallery direction="auto">
            <!-- dir="rtl" mirrors the grid on the page. -->
            <div dir="rtl">
                @for (item of items; track item.src) {
                    <a [lgGalleryItem]="item">
                        <img [src]="item.thumb" [alt]="item.alt" />
                    </a>
                }
            </div>
        </lg-gallery>
    `,
})
export class Gallery {
    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'طبقات من الأزرق',
            captionHtml: '<h4>طبقات من الأزرق</h4>',
            lgSize: '1600-1067',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'قصبة في الواحة',
            captionHtml: '<h4>قصبة في الواحة</h4>',
            lgSize: '1600-1067',
        },
    ];
}
```

### Localized strings

Every user-facing label lives on the unified `strings` object. Strings merge
per-key over the defaults, so override only what you need:

**JavaScript**

```js
lightGallery(document.getElementById('gallery-rtl-demo'), {
    direction: 'auto',
    strings: {
        closeGallery: 'إغلاق المعرض',
        previousSlide: 'الشريحة السابقة',
        nextSlide: 'الشريحة التالية',
        slideAnnouncement: 'صورة {index} من {total}',
    },
});
```

**React**

```tsx
<LightGallery
    direction="auto"
    strings={{
        closeGallery: 'إغلاق المعرض',
        previousSlide: 'الشريحة السابقة',
        nextSlide: 'الشريحة التالية',
        slideAnnouncement: 'صورة {index} من {total}',
    }}
>
    {/* items as above */}
</LightGallery>
```

**Vue**

```vue
<LightGallery
    direction="auto"
    :strings="{
        closeGallery: 'إغلاق المعرض',
        previousSlide: 'الشريحة السابقة',
        nextSlide: 'الشريحة التالية',
        slideAnnouncement: 'صورة {index} من {total}',
    }"
>
    <!-- items as above -->
</LightGallery>
```

**Angular**

```html
<lg-gallery
    direction="auto"
    [strings]="{
        closeGallery: 'إغلاق المعرض',
        previousSlide: 'الشريحة السابقة',
        nextSlide: 'الشريحة التالية',
        slideAnnouncement: 'صورة {index} من {total}',
    }"
>
    <!-- items as above -->
</lg-gallery>
```

See the full key list in the
<a href="/docs/localization-rtl/">localization &amp; RTL guide</a>.


---

# Video facades demo

> Embed YouTube and Vimeo videos as lightweight facades. The provider iframe loads only when the user presses play.

lightGallery renders provider video slides, YouTube, Vimeo, Wistia, as lite facades: a poster with a play button, with the heavy provider iframe created only when the user presses play. YouTube embeds go through the privacy-enhanced youtube-nocookie.com host by default. Read more in the [video facades guide](https://www.lightgalleryjs.com/docs/video-facades/).

Canonical page: https://www.lightgalleryjs.com/demos/video-facades/

> You need to include the video plugin in the document.

### Demo

Open a video slide: the poster appears instantly with a play button, and the
provider iframe is created only when you press play. No third-party
JavaScript or cookies load until then.

**JavaScript**

**HTML**

```html
<div id="gallery-video-facades-demo">
    <a
        data-lg-size="1280-720"
        data-src="//www.youtube.com/watch?v=EIUJfXk3_3w"
        data-poster="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
        data-sub-html="<h4>Puffin Hunts Fish To Feed Puffling</h4>"
    >
        <img src="https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg" />
    </a>
    <a
        data-lg-size="1280-720"
        data-src="//vimeo.com/112836958"
        data-poster="img/vimeo-poster.jpg"
        data-sub-html="<h4>Nature</h4>"
    >
        <img src="img/vimeo-poster.jpg" />
    </a>
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgVideo from 'lightgallery/plugins/video';

lightGallery(document.getElementById('gallery-video-facades-demo'), {
    plugins: [lgVideo],
    // Defaults shown for clarity, facades and the
    // privacy-enhanced YouTube host are on out of the box.
    videoFacade: true,
    youTubeNoCookie: true,
    // autoplayFirstVideo defaults to true and, like
    // autoplayVideoOnSlide, forces an immediate embed by
    // design, turn it off to see the facade on every slide.
    autoplayFirstVideo: false,
});
```

**React**

```tsx
import {
    LightGallery,
    LightGalleryItem,
    type GalleryItem,
} from '@lightgallery/react';
import Video from '@lightgallery/react/plugins/video';

// `poster` is the image the slide shows until play is pressed.
const items: GalleryItem[] = [
    {
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        captionHtml: '<h4>Puffin Hunts Fish To Feed Puffling</h4>',
        lgSize: '1280-720',
    },
    {
        src: '//vimeo.com/112836958',
        poster: 'img/vimeo-poster.jpg',
        thumb: 'img/vimeo-poster.jpg',
        alt: 'Nature',
        captionHtml: '<h4>Nature</h4>',
        lgSize: '1280-720',
    },
];

<LightGallery
    plugins={[Video]}
    video={{
        // Defaults shown for clarity, facades and the privacy-enhanced
        // YouTube host are on out of the box.
        videoFacade: true,
        youTubeNoCookie: true,
        // autoplayFirstVideo defaults to true and, like
        // autoplayVideoOnSlide, forces an immediate embed by design,
        // turn it off to see the facade on every slide.
        autoplayFirstVideo: false,
    }}
>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup lang="ts">
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Video from '@lightgallery/vue/plugins/video';

const plugins = [Video];

const videoSettings = {
    // Defaults shown for clarity, facades and the privacy-enhanced
    // YouTube host are on out of the box.
    videoFacade: true,
    youTubeNoCookie: true,
    // autoplayFirstVideo defaults to true and, like autoplayVideoOnSlide,
    // forces an immediate embed by design, turn it off to see the facade
    // on every slide.
    autoplayFirstVideo: false,
};

// `poster` is the image the slide shows until play is pressed.
const items: LgGalleryItem[] = [
    {
        src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
        alt: 'Puffin Hunts Fish To Feed Puffling',
        captionHtml: '<h4>Puffin Hunts Fish To Feed Puffling</h4>',
        lgSize: '1280-720',
    },
    {
        src: '//vimeo.com/112836958',
        poster: 'img/vimeo-poster.jpg',
        thumb: 'img/vimeo-poster.jpg',
        alt: 'Nature',
        captionHtml: '<h4>Nature</h4>',
        lgSize: '1280-720',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins" :video="videoSettings">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withVideo } from '@lightgallery/angular/plugins/video';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    features = [
        withVideo({
            // Defaults shown for clarity, facades and the privacy-enhanced
            // YouTube host are on out of the box.
            videoFacade: true,
            youTubeNoCookie: true,
            // autoplayFirstVideo defaults to true and, like
            // autoplayVideoOnSlide, forces an immediate embed by design,
            // turn it off to see the facade on every slide.
            autoplayFirstVideo: false,
        }),
    ];

    // `poster` is the image the slide shows until play is pressed.
    items: LgGalleryItem[] = [
        {
            src: '//www.youtube.com/watch?v=EIUJfXk3_3w',
            poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
            thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/mqdefault.jpg',
            alt: 'Puffin Hunts Fish To Feed Puffling',
            captionHtml: '<h4>Puffin Hunts Fish To Feed Puffling</h4>',
            lgSize: '1280-720',
        },
        {
            src: '//vimeo.com/112836958',
            poster: 'img/vimeo-poster.jpg',
            thumb: 'img/vimeo-poster.jpg',
            alt: 'Nature',
            captionHtml: '<h4>Nature</h4>',
            lgSize: '1280-720',
        },
    ];
}
```

The facade poster falls back from the item's `data-poster` to the YouTube
thumbnail endpoint to the item thumb. A slide with no resolvable poster keeps
the previous eager-iframe behavior, as do slides shown with
`autoplayFirstVideo` or `autoplayVideoOnSlide`.

### Opting out

Set `videoFacade: false` to restore the 2.x behavior, the provider iframe is
created as soon as the slide loads:

**JavaScript**

```js
lightGallery(document.getElementById('gallery-eager-videos'), {
    plugins: [lgVideo],
    videoFacade: false,
});
```

**React**

```tsx
<LightGallery plugins={[Video]} video={{ videoFacade: false }}>
    {/* items as above */}
</LightGallery>
```

**Vue**

```vue
<template>
    <LightGallery :plugins="plugins" :video="{ videoFacade: false }">
        <!-- items as above -->
    </LightGallery>
</template>
```

**Angular**

```ts
// The template stays as above: <lg-gallery [features]="features">
features = [withVideo({ videoFacade: false })];
```

Set `youTubeNoCookie: false` to embed through youtube.com instead of
youtube-nocookie.com. Slide URLs that already point at youtube-nocookie.com
always keep it.


---

# Virtualization, 1,000 slide stress test

> Open a JavaScript lightbox gallery with 1,000 slides. Virtualization keeps the DOM small: only a window of slides and thumbnails render.

lightGallery virtualization bounds the number of slides and thumbnails that exist in the DOM at any moment, so galleries with thousands of items open instantly and stay smooth. The gallery below holds 1,000 slides, watch the mounted-slide counter while you navigate. Read how it works in the [virtualization guide](https://www.lightgalleryjs.com/docs/virtualization/).

Canonical page: https://www.lightgalleryjs.com/demos/virtualization/

### 1,000-item stress demo

The slide pool and the thumbnail strip are both windowed: only the slides
around the active index and the visible thumbnails (plus an overscan) are in
the DOM, with spacers preserving the strip geometry. The window advances at
commit points, release, slide change, resize, never per pointer move.

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';

const slides = Array.from({ length: 1000 }, (_, i) => ({
    src: `https://picsum.photos/seed/lg-${i}/1600/1067`,
    thumb: `https://picsum.photos/seed/lg-${i}/240/160`,
    subHtml: `<h4>Slide ${i + 1} / 1000</h4>`,
}));

const gallery = lightGallery(document.getElementById('stress-gallery'), {
    dynamic: true,
    dynamicEl: slides,
    plugins: [lgThumbnail],
    virtualization: {
        // Mounted-slide pool around the active index.
        slides: 7,
        // Thumbnail-strip windowing; 'auto' derives one extra
        // viewport of overscan per side.
        thumbs: 'auto',
    },
});

document
    .getElementById('open-button')
    .addEventListener('click', () => gallery.openGallery(0));
```

**React**

```tsx
import { useState } from 'react';
import { LightGallery } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';

const slides = Array.from({ length: 1000 }, (_, i) => ({
    src: `https://picsum.photos/seed/lg-${i}/1600/1067`,
    thumb: `https://picsum.photos/seed/lg-${i}/240/160`,
    captionHtml: `<h4>Slide ${i + 1} / 1000</h4>`,
}));

const [open, setOpen] = useState(false);
const [index, setIndex] = useState(0);

<>
    <button type="button" onClick={() => setOpen(true)}>
        Open the 1,000-slide gallery
    </button>
    {/* slides: how many slides are in the DOM at once, around the
        current one. thumbs: only the visible thumbnails are in the
        DOM, plus one more viewport of them on each side. */}
    <LightGallery
        slides={slides}
        plugins={[Thumbnail]}
        virtualization={{ slides: 7, thumbs: 'auto' }}
        open={open}
        onClose={() => setOpen(false)}
        index={index}
        onIndexChange={setIndex}
    />
</>;
```

**Vue**

```vue
<script setup>
import { ref } from 'vue';
import { LightGallery } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';

const slides = Array.from({ length: 1000 }, (_, i) => ({
    src: `https://picsum.photos/seed/lg-${i}/1600/1067`,
    thumb: `https://picsum.photos/seed/lg-${i}/240/160`,
    captionHtml: `<h4>Slide ${i + 1} / 1000</h4>`,
}));

const plugins = [Thumbnail];
const open = ref(false);
const index = ref(0);
</script>

<template>
    <button type="button" @click="open = true">
        Open the 1,000-slide gallery
    </button>
    <!-- slides: how many slides are in the DOM at once, around the current
         one. thumbs: only the visible thumbnails are in the DOM, plus one
         more viewport of them on each side. -->
    <LightGallery
        v-model:open="open"
        v-model:index="index"
        :slides="slides"
        :plugins="plugins"
        :virtualization="{ slides: 7, thumbs: 'auto' }"
    />
</template>
```

**Angular**

```ts
import { Component, signal } from '@angular/core';
import { LgGalleryComponent } from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent],
    template: `
        <button type="button" (click)="open.set(true)">
            Open the 1,000-slide gallery
        </button>
        <!-- slides: how many slides are in the DOM at once, around the
             current one. thumbs: only the visible thumbnails are in the DOM,
             plus one more viewport of them on each side. -->
        <lg-gallery
            [slides]="slides"
            [features]="features"
            [virtualization]="{ slides: 7, thumbs: 'auto' }"
            [open]="open()"
            (closed)="open.set(false)"
            [(index)]="index"
        />
    `,
})
export class Gallery {
    slides = Array.from({ length: 1000 }, (_, i) => ({
        src: `https://picsum.photos/seed/lg-${i}/1600/1067`,
        thumb: `https://picsum.photos/seed/lg-${i}/240/160`,
        captionHtml: `<h4>Slide ${i + 1} / 1000</h4>`,
    }));
    features = [withThumbnail()];

    open = signal(false);
    index = signal(0);
}
```

Virtualization is off when the `virtualization` setting is `undefined`, the
classic behavior, where every thumbnail renders. See all the knobs in the
<a href="/docs/settings/#virtualization">settings reference</a>.


---

# Image gallery with zoom

> JavaScript image gallery with zoom: pinch, double tap, zoom buttons and actual size, drag to pan, rotate and flip. Live demo plus the code for vanilla JS, React, Vue and Angular.

The zoom plugin adds every way of zooming an image in a lightbox: pinch on touch screens, double tap or double click for actual size, zoom in and zoom out buttons, and drag to pan once zoomed. The rotate plugin adds rotate and flip beside it. All the settings are in the [zoom](https://www.lightgalleryjs.com/docs/settings/#zoom-plugin) and [rotate](https://www.lightgalleryjs.com/docs/settings/#rotate-plugin) references.

Canonical page: https://www.lightgalleryjs.com/demos/image-zoom/

#### Demo

Open a photo and zoom in: pinch on a phone, double click on a desktop, or
use the zoom buttons in the toolbar. Drag the zoomed image to pan.

_Live demo: https://www.lightgalleryjs.com/demos/image-zoom/_

**JavaScript**

**HTML**

```html
<div id="image-zoom-gallery">
    <a href="img/img1.jpg" data-lg-size="1600-2400">
        <img src="img/thumb1.jpg" alt="Close-up of an eye" />
    </a>
    <a href="img/img2.jpg" data-lg-size="1600-1067">
        <img src="img/thumb2.jpg" alt="Dew on a leaf" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgRotate from 'lightgallery/plugins/rotate';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';

lightGallery(document.getElementById('image-zoom-gallery'), {
    plugins: [lgZoom, lgRotate, lgThumbnail],
    // Zoom in and zoom out buttons next to the actual-size button; the
    // library shows only actual size by default.
    showZoomInOutIcons: true,
    actualSize: true,
    // How much each zoom-in or zoom-out step changes the scale.
    scale: 1,
});
```

**React**

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

const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Close-up of an eye',
        lgSize: '1600-2400',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Dew on a leaf',
        lgSize: '1600-1067',
    },
];

// Zoom in and zoom out buttons next to the actual-size button; the
// library shows only actual size by default. `scale` is how much each
// step changes the scale.
<LightGallery
    plugins={[Zoom, Rotate, Thumbnail]}
    zoom={{ showZoomInOutIcons: true, actualSize: true, scale: 1 }}
>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item} href={item.src}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

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

const plugins = [Zoom, Rotate, Thumbnail];
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Close-up of an eye',
        lgSize: '1600-2400',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Dew on a leaf',
        lgSize: '1600-1067',
    },
];
</script>

<template>
    <!-- Zoom in and zoom out buttons next to the actual-size button; the
         library shows only actual size by default. `scale` is how much
         each step changes the scale. -->
    <LightGallery
        :plugins="plugins"
        :zoom="{ showZoomInOutIcons: true, actualSize: true, scale: 1 }"
    >
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withRotate } from '@lightgallery/angular/plugins/rotate';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [href]="item.src" [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    // Zoom in and zoom out buttons next to the actual-size button; the
    // library shows only actual size by default. `scale` is how much
    // each step changes the scale.
    features = [
        withZoom({ showZoomInOutIcons: true, actualSize: true, scale: 1 }),
        withRotate(),
        withThumbnail(),
    ];

    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Close-up of an eye',
            lgSize: '1600-2400',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Dew on a leaf',
            lgSize: '1600-1067',
        },
    ];
}
```

### How zooming works

| Input | What happens |
| --- | --- |
| Pinch on a touch screen | Zooms around the point between the fingers; the image follows the fingers while they move |
| Double tap, or double click with a mouse | Switches between the fitted size and the image's actual pixel size, centred on the tap |
| Zoom in and zoom out buttons | Change the scale by `scale` per press; off by default, `showZoomInOutIcons` turns them on |
| Actual size button | Same as a double tap, from the toolbar |
| Drag with one finger or the mouse | Pans a zoomed image; it springs back inside its edges when released |
| Pinch inwards on an un-zoomed image | Closes the gallery, like a photos app; `pinchToClose` turns it off |
| Rotate and flip buttons | From the rotate plugin; zoom keeps working on a rotated image |
| Moving to another slide | Resets the zoom, so every slide opens fitted to the screen |

The toolbar buttons are ordinary buttons, so a keyboard user reaches them
with Tab and presses them with Enter or Space.

Zoom works on image slides. Video and iframe slides keep their own
controls and the zoom buttons do nothing on them.

### Settings

Zoom plugin settings, passed at the top level of the settings object in
vanilla JavaScript and as the `zoom` prop or `withZoom()` options in the
framework packages:

| Setting | Default | Meaning |
| --- | --- | --- |
| `zoom` | `true` | Enables the plugin's zoom behaviour; `false` keeps the plugin loaded but inert |
| `scale` | `1` | Amount added to or removed from the scale by each zoom-in or zoom-out step |
| `infiniteZoom` | `true` | Lets zoom-in go past the image's actual pixel size |
| `actualSize` | `true` | Shows the actual-size button |
| `showZoomInOutIcons` | `false` | Shows the zoom-in and zoom-out buttons |
| `enableZoomAfter` | `300` | Milliseconds after the slide transition before zoom styles are applied, so an opening animation and the zoom transforms never fight |

The core setting `pinchToClose` (default `true`) is what makes an inward
pinch close the gallery; it needs the zoom plugin and `closable`.

Rotate plugin settings: `rotate`, `rotateSpeed` (default `400` ms),
`rotateLeft`, `rotateRight`, `flipHorizontal` and `flipVertical`, each
button on by default.

### Does zoom need the image dimensions?

No. Zoom works from the loaded image. The `data-lg-size` attribute
(`lgSize` on an item) is for the open-from-thumbnail animation, which
the [zoom from origin demo](/demos/zoom-from-origin/) covers, and the
actual-size button uses the loaded image's natural size.

### Can the zoomed image be larger than the file?

Yes when `infiniteZoom` is on, which is the default; the browser scales
the pixels up. For a product shot that must stay sharp when zoomed, serve
the largest file you have as `src` and let [responsive
loading](/docs/responsive-loading/) pick smaller variants for small
screens.

For a zoom that happens in place, without a lightbox, see the
[Medium-style zoom demo](/demos/medium-zoom/).


---

# Zoom image from origin

> Zoom-from-origin demo: slides open from the clicked thumbnail's position and close back to it, from cropped thumbnails too.

Zoom images from their origin while opening the image gallery.

Canonical page: https://www.lightgalleryjs.com/demos/zoom-from-origin/

You need to know the original image size upfront and provide it via data-lg-size attribute as data-lg-size="1920-1280"
(`lgSize: '1920-1280'` on an item object). Image optimizers, build-time image plugins and CMS APIs all expose the natural width and height.

If you don't know the size of a few images in the list, you can skip the data-lg-size attribute for the particular slides;
lightGallery will show the default animation if data-lg-size is not available.

On close, the slide flies back to its thumbnail. A slide with no thumbnail to return to, because its trigger is hidden or collapsed
(the overflow photos behind a "+9 photos" tile in a collage) or because it has no data-lg-size, shrinks to the centre of the
screen and fades out instead. The same happens when `zoomFromOrigin` is off or the gallery is dynamic.

#### Demo

**JavaScript**

**HTML**

```html
<div id="gallery-zoom-from-origin-demo">
    <a
        data-lg-size="1600-1067"
        href="img/img1.jpg"
    >
        <img src="img/thumb1.jpg" />
    </a>
    <a
        data-lg-size="1600-1067"
        href="img/img2.jpg"
    >
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';

lightGallery(document.getElementById('gallery-zoom-from-origin-demo'), {
    // on by default, the lightbox grows out of the clicked thumbnail
    zoomFromOrigin: true,
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';

const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        // "WIDTH-HEIGHT" of the full-size image: required for the flight
        lgSize: '1600-1067',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        lgSize: '1600-2400',
    },
];

// On by default: the slide grows out of the clicked thumbnail. The
// trigger element is measured automatically; in controlled mode pass
// originRect instead.
<LightGallery zoomFromOrigin>
    {items.map((item) => (
        <LightGalleryItem key={item.src} item={item}>
            <img src={item.thumb} alt={item.alt} />
        </LightGalleryItem>
    ))}
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';

const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        // "WIDTH-HEIGHT" of the full-size image: required for the flight
        lgSize: '1600-1067',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        lgSize: '1600-2400',
    },
];
</script>

<template>
    <!-- On by default: the slide grows out of the clicked thumbnail. -->
    <LightGallery :zoom-from-origin="true">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- On by default: the slide grows out of the clicked thumbnail. -->
        <lg-gallery [zoomFromOrigin]="true">
            @for (item of items; track item.src) {
                <a [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            // "WIDTH-HEIGHT" of the full-size image: required for the flight
            lgSize: '1600-1067',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            lgSize: '1600-2400',
        },
    ];
}
```

#### Cropped thumbnails

A grid tile that shows only part of the photo, an `img` with `object-fit: cover` or an element with `background-size: cover`,
flies as a whole by default, squashed into its box. The origin crop plugin flies it from its crop instead: the part the tile
shows grows at a uniform scale and the rest of the photo is revealed around it, following `object-position` or
`background-position`. Nothing is needed in the markup or the stylesheets; the plugin reads the thumbnail's computed fit, and
thumbnails the built-in flight already lands exactly keep it. A thumbnail file that is itself a crop of the photo is taken as
a centred crop.

The tiles below are square and crop portrait and landscape photos alike, each from a different `object-position`. Open one,
then untick the plugin and open it again to compare with the default flight.

<label class="demo-toggle"><input type="checkbox" id="toggle-origin-crop" checked /> Origin crop plugin</label>

**JavaScript**

**HTML**

```html
<div id="gallery-cropped-thumbnails" class="tiles">
    <a data-lg-size="1600-1067" href="img/img1.jpg">
        <img src="img/thumb1.jpg" style="object-position: 0% 50%" />
    </a>
    <a data-lg-size="1067-1600" href="img/img2.jpg">
        <img src="img/thumb2.jpg" style="object-position: 50% 0%" />
    </a>
    <!-- more items -->
</div>
```

**CSS**

```css
.tiles img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
```

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgOriginCrop from 'lightgallery/plugins/originCrop';

lightGallery(document.getElementById('gallery-cropped-thumbnails'), {
    plugins: [lgOriginCrop],
});
```

**React**

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import OriginCrop from '@lightgallery/react/plugins/originCrop';

const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        // "WIDTH-HEIGHT" of the full-size image: required for the flight
        lgSize: '1600-1067',
        // the part of the photo the tile shows
        position: '0% 50%',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        lgSize: '1067-1600',
        position: '50% 0%',
    },
];

// `.tiles img` is square and crops with `object-fit: cover`.
<LightGallery plugins={[OriginCrop]}>
    <div className="tiles">
        {items.map((item) => (
            <LightGalleryItem key={item.src} item={item}>
                <img
                    src={item.thumb}
                    alt={item.alt}
                    style={{ objectPosition: item.position }}
                />
            </LightGalleryItem>
        ))}
    </div>
</LightGallery>;
```

**Vue**

```vue
<script setup>
import { LightGallery, LgItem } from '@lightgallery/vue';
import OriginCrop from '@lightgallery/vue/plugins/originCrop';

const plugins = [OriginCrop];
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        // "WIDTH-HEIGHT" of the full-size image: required for the flight
        lgSize: '1600-1067',
        // the part of the photo the tile shows
        position: '0% 50%',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        lgSize: '1067-1600',
        position: '50% 0%',
    },
];
</script>

<template>
    <!-- `.tiles img` is square and crops with `object-fit: cover`. -->
    <LightGallery :plugins="plugins">
        <div class="tiles">
            <LgItem v-for="item of items" :key="item.src" :item="item">
                <img
                    :src="item.thumb"
                    :alt="item.alt"
                    :style="{ objectPosition: item.position }"
                />
            </LgItem>
        </div>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withOriginCrop } from '@lightgallery/angular/plugins/originCrop';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- .tiles img is square and crops with object-fit: cover. -->
        <lg-gallery [features]="features">
            <div class="tiles">
                @for (item of items; track item.src) {
                    <a [lgGalleryItem]="item">
                        <img
                            [src]="item.thumb"
                            [alt]="item.alt"
                            [style.object-position]="item.position"
                        />
                    </a>
                }
            </div>
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withOriginCrop()];

    items = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            // "WIDTH-HEIGHT" of the full-size image: required for the flight
            lgSize: '1600-1067',
            // the part of the photo the tile shows
            position: '0% 50%',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            lgSize: '1067-1600',
            position: '50% 0%',
        },
    ] satisfies (LgGalleryItem & { position: string })[];
}
```


---

# React image gallery component

> Native React image gallery and lightbox component, thumbnails, pinch zoom, captions and sharing, with SSR support and full TypeScript types.

@lightgallery/react is a native React image gallery: React renders every node, there is no wrapper around the vanilla library, and it works in Next.js out of the box. Pinch and double-tap zoom, animated thumbnails, captions, rotate, fullscreen and sharing all come as tree-shakable plugins. The full component API is in the [React package docs](https://www.lightgalleryjs.com/docs/react/).

Canonical page: https://www.lightgalleryjs.com/demos/react-image-gallery/

#### Demo

The gallery below is an actual `@lightgallery/react` component, every node
in the grid and in the lightbox is rendered by React.

##### Install

```bash
npm install @lightgallery/react lightgallery
```

The React package ships no CSS, the stylesheets come from the `lightgallery`
package and are shared by every binding:

```tsx
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';
```

##### Thumbnail grid

Wrap your trigger markup in ``. Mount order is slide order,
the triggers server-render as plain markup (so the grid stays crawlable), and
clicking one opens the lightbox on that slide.

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

const items = [
    {
        src: 'img/1-1600.jpg',
        thumb: 'img/1-240.jpg',
        alt: 'Mountains',
        // enables the zoom-from-origin open animation
        lgSize: '1600-1067',
        caption: <h4>Mountains</h4>,
    },
    {
        src: 'img/2-1600.jpg',
        thumb: 'img/2-240.jpg',
        alt: 'Forest path',
        lgSize: '1600-2400',
        caption: <h4>Forest path</h4>,
    },
];

export function Gallery() {
    return (
        <LightGallery plugins={[Thumbnail, Zoom]} zoom={{ scale: 1.5 }}>
            {items.map((item) => (
                <LightGalleryItem key={item.src} item={item} href={item.src}>
                    <img src={item.thumb} alt={item.alt} />
                </LightGalleryItem>
            ))}
        </LightGallery>
    );
}
```

##### Settings and plugins are props

Core settings are flat props with the same names as the vanilla library
(`mode`, `speed`, `loop`, `preload`, `download`, …). Each plugin contributes
one settings prop named after it, typed through the plugin's own entry point:

```tsx
<LightGallery
    plugins={[Thumbnail, Zoom]}
    speed={400}
    thumbnail={{ animateThumb: true, thumbWidth: 130 }}
    zoom={{ scale: 1.5, actualSize: true }}
/>
```

Enabling a plugin is the `plugins` array, a bare `thumbnail` boolean prop
does nothing on its own.

##### Controlled mode

Own the open state and the index yourself when the gallery is opened from
your own UI rather than from a trigger grid. The `slides` prop replaces the
trigger children:

```tsx
const [open, setOpen] = useState(false);
const [index, setIndex] = useState(0);

<>
    <button onClick={() => setOpen(true)}>Open gallery</button>
    <LightGallery
        slides={items}
        plugins={[Thumbnail, Zoom]}
        open={open}
        onClose={() => setOpen(false)}
        index={index}
        onIndexChange={setIndex}
    />
</>;
```

##### TypeScript

The package is written in TypeScript and ships its own types, `GalleryItem`
for slide data, `LightGalleryRefHandle` for the imperative handle:

```tsx
import { useRef } from 'react';
import { LightGallery } from '@lightgallery/react';
import type { GalleryItem, LightGalleryRefHandle } from '@lightgallery/react';

const items: GalleryItem[] = [
    { src: 'img/1-1600.jpg', thumb: 'img/1-240.jpg', alt: 'Mountains' },
];

const gallery = useRef<LightGalleryRefHandle>(null);

<>
    <button onClick={() => gallery.current?.openGallery(0)}>Open</button>
    <LightGallery ref={gallery} slides={items} />
</>;
```

The handle covers `openGallery(index?)`, `closeGallery()`, `goToSlide(i)`,
`nextSlide()`, `prevSlide()` and `refresh()`. Lifecycle events are callback
props with the documented names, `onBeforeSlide`, `onAfterSlide`,
`onSlideItemLoad`, and the rest.

##### Next.js and SSR

Every entry point imports cleanly in bare Node, and the lightbox portal
mounts after hydration, so no `dynamic(() => …, { ssr: false })` wrapper is
needed. With the App Router, put the gallery in a client component and import
the CSS from your root layout:

```tsx
'use client';

import { LightGallery, LightGalleryItem } from '@lightgallery/react';
```

The [Next.js image gallery demo](/demos/nextjs-image-gallery/) builds a
complete App Router page with `next/image` thumbnails.

More in the [React package docs](/docs/react/), SSR notes, the full prop
surface and the accessibility behavior. See also the
[React video gallery](/demos/react-video-gallery/) and
[React carousel](/demos/react-carousel/) demos.


---

# Next.js image gallery with lightbox

> Next.js image gallery demo: the native @lightgallery/react component in the App Router, next/image thumbnails, a server-rendered grid, no dynamic import, with thumbnails, zoom and captions in the lightbox.

@lightgallery/react works in Next.js as it is: the grid of thumbnails renders on the server, the lightbox mounts after hydration, and no `dynamic()` import with `ssr: false` is needed. This page builds an App Router gallery with `next/image` thumbnails. The component API is in the [React package docs](https://www.lightgalleryjs.com/docs/react/).

Canonical page: https://www.lightgalleryjs.com/demos/nextjs-image-gallery/

#### Demo

The gallery below is the `@lightgallery/react` component, the same
package a Next.js app renders. Every node in the grid and in the lightbox
is rendered by React.

The sandbox is a Next.js App Router project with the files below. It
serves its sample photos unoptimised, because the image optimiser's
native library cannot run inside StackBlitz's in-browser Node.

### What you need to know

| Question | Answer |
| --- | --- |
| Does it render on the server? | Yes. The trigger grid is plain markup in the HTML; the lightbox portal mounts on the client after hydration |
| Do I need `next/dynamic` with `ssr: false`? | No. Every entry point imports cleanly in Node. It is an option for keeping the lightbox out of the first bundle, shown below |
| Can the lightbox slides use the image optimiser? | Yes. Give each slide a `srcset` of `/_next/image` URLs, shown below |
| Where does the gallery live? | In a client component (`'use client'`), because it listens to clicks and gestures |
| Can `next/image` be the thumbnail? | Yes. Wrap the `` in ``; the lightbox slide uses `item.src` |
| Where does the CSS go? | Imported once in the root layout, or any server component |
| App Router or Pages Router? | Both. The Pages Router needs no `'use client'` directive |
| Remote images? | The lightbox slide is a plain `<img>`, so `images.remotePatterns` is only needed for the `` thumbnails |

##### Install

```bash
npm install @lightgallery/react lightgallery
```

##### 1. Styles in the root layout

The React package ships no CSS; the stylesheets come from the
`lightgallery` package. Import them once in `app/layout.tsx`:

```tsx
// app/layout.tsx
import type { ReactNode } from 'react';

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';

export default function RootLayout({ children }: { children: ReactNode }) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    );
}
```

##### 2. The gallery as a client component

Static image imports give you the width and height for free, which the
lightbox needs for the open-from-thumbnail animation (`lgSize`). The
`` is the thumbnail on the page; the lightbox slide is the
imported file itself.

```tsx
// app/Gallery.tsx
'use client';

import Image, { type StaticImageData } from 'next/image';
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';

export interface Photo {
    image: StaticImageData;
    alt: string;
    caption?: string;
}

export function Gallery({ photos }: { photos: Photo[] }) {
    return (
        <LightGallery plugins={[Thumbnail, Zoom]} thumbnail={{ animateThumb: true }}>
            <div className="grid">
                {photos.map(({ image, alt, caption }) => (
                    <LightGalleryItem
                        key={image.src}
                        href={image.src}
                        item={{
                            src: image.src,
                            thumb: image.src,
                            alt,
                            caption,
                            lgSize: `${image.width}-${image.height}`,
                        }}
                    >
                        <Image
                            src={image}
                            alt={alt}
                            placeholder="blur"
                            sizes="(max-width: 768px) 50vw, 25vw"
                            style={{ width: '100%', height: 'auto' }}
                        />
                    </LightGalleryItem>
                ))}
            </div>
        </LightGallery>
    );
}
```

`placeholder="blur"` shows the tiny blurred preview that comes with every
static import while the thumbnail loads. `thumb` is what the thumbnail
strip inside the lightbox shows; here it is the same file as the slide,
and the next section replaces both with optimised variants.

##### 3. The page

The page stays a server component. It imports the images and hands the
list to the gallery; static image data is plain JSON, so it crosses the
server-to-client boundary as a prop.

```tsx
// app/page.tsx
import { Gallery, type Photo } from './Gallery';

import mountains from './photos/mountains.jpg';
import forest from './photos/forest.jpg';
import coast from './photos/coast.jpg';

const photos: Photo[] = [
    { image: mountains, alt: 'Mountains at dawn', caption: 'Dolomites, Italy' },
    { image: forest, alt: 'Forest path', caption: 'Black Forest, Germany' },
    { image: coast, alt: 'Rocky coast', caption: 'Algarve, Portugal' },
];

export default function Page() {
    return (
        <main>
            <h1>Photos</h1>
            <Gallery photos={photos} />
        </main>
    );
}
```

A three-column grid is enough CSS for the page:

```css
/* app/page.css */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
```

##### Optimised slides through the image optimiser

`next/image` optimises the thumbnails on the page, but the lightbox
slide above is the original file. The slides can go through the same
optimiser: every lightGallery package renders an image slide's `srcset`
and `sizes` as real markup, so a `srcset` of `/_next/image` URLs makes
the browser pick a resized AVIF or WebP for the screen it is on. The
candidate widths must be ones Next allows, which are the `deviceSizes`
and `imageSizes` from `next.config.js`; the values below are the
defaults.

```ts
// lib/optimized-slide.ts
import type { StaticImageData } from 'next/image';
import type { GalleryItem } from '@lightgallery/react';

// `images.deviceSizes` and `images.imageSizes` from next.config.js;
// these are the defaults. The optimiser rejects any other width.
const DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
const THUMB_SIZE = 384;

const optimized = (src: string, width: number, quality = 75) =>
    `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;

/** A lightGallery slide whose image comes from the Next.js optimiser. */
export function optimizedSlide(
    image: StaticImageData,
    alt: string,
    caption?: string,
): GalleryItem {
    // Never upscale: only candidates at or below the original width.
    const widths = DEVICE_SIZES.filter((width) => width <= image.width);
    return {
        // The original stays the fallback for a browser without srcset
        // support; every current browser picks from the candidates.
        src: image.src,
        srcset: widths.map((width) => `${optimized(image.src, width)} ${width}w`).join(', '),
        // The slide fills the viewport, so let the browser size for it.
        sizes: '100vw',
        thumb: optimized(image.src, THUMB_SIZE),
        alt,
        caption,
        lgSize: `${image.width}-${image.height}`,
    };
}
```

Use it where the items are built:

```tsx
'use client';

import Image, { type StaticImageData } from 'next/image';
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';

import { optimizedSlide } from '../lib/optimized-slide';

export interface Photo {
    image: StaticImageData;
    alt: string;
    caption?: string;
}

export function Gallery({ photos }: { photos: Photo[] }) {
    return (
        <LightGallery plugins={[Thumbnail, Zoom]} thumbnail={{ animateThumb: true }}>
            <div className="grid">
                {photos.map(({ image, alt, caption }) => (
                    <LightGalleryItem
                        key={image.src}
                        href={image.src}
                        item={optimizedSlide(image, alt, caption)}
                    >
                        <Image src={image} alt={alt} placeholder="blur" sizes="(max-width: 768px) 50vw, 25vw" style={{ width: '100%', height: 'auto' }} />
                    </LightGalleryItem>
                ))}
            </div>
        </LightGallery>
    );
}
```

The zoom plugin takes the widest `srcset` candidate as the actual-size
reference, so the actual-size button and double tap behave as they do
with a plain image. One thing to know: a browser does not fetch a
larger candidate because an image was scaled up with a transform, so a
zoomed slide is as sharp as the candidate the browser chose for the
viewport, which `sizes: '100vw'` keeps at the full screen width. The
[responsive loading guide](/docs/responsive-loading/) covers `sources`
for art direction and the `data-*` form of the same fields.

##### Images from a CMS or an API

With remote images there is no static import, so the dimensions come
from your data. Build the items from the API response and keep
`lgSize` as `WIDTH-HEIGHT` of the full-size file:

```tsx
'use client';

import Image from 'next/image';
import { LightGallery, LightGalleryItem, type GalleryItem } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';

interface Asset {
    url: string;
    width: number;
    height: number;
    alt: string;
}

export function RemoteGallery({ assets }: { assets: Asset[] }) {
    const items: GalleryItem[] = assets.map((asset) => ({
        src: asset.url,
        thumb: `${asset.url}?w=480`,
        alt: asset.alt,
        lgSize: `${asset.width}-${asset.height}`,
    }));

    return (
        <LightGallery plugins={[Thumbnail]}>
            {items.map((item, i) => (
                <LightGalleryItem key={item.src} item={item} href={item.src}>
                    <Image
                        src={item.thumb!}
                        alt={item.alt ?? ''}
                        width={480}
                        height={Math.round((480 * assets[i].height) / assets[i].width)}
                    />
                </LightGalleryItem>
            ))}
        </LightGallery>
    );
}
```

The `` thumbnails need the host in `images.remotePatterns` in
`next.config.js`; the lightbox slides do not, since they are plain
`<img>` elements.

##### Pages Router

The same component works under `pages/`. Drop the `'use client'`
directive, import the CSS in `pages/_app.tsx`, and render the gallery
from any page.

##### Loading the lightbox on demand

Nothing above needs `next/dynamic`. If you want the lightbox and its
CSS out of the page's first JavaScript bundle, split the gallery in
two: a small client component that renders the grid and remembers which
photo was clicked, and a lightbox component that `next/dynamic` loads
on the first click. The grid still renders on the server, and the
clicked thumbnail's position goes to the lightbox as `originRect`, so
the open-from-thumbnail animation survives the split.

```tsx
// app/LazyGallery.tsx
'use client';

import dynamic from 'next/dynamic';
import Image, { type StaticImageData } from 'next/image';
import { useState, type MouseEvent } from 'react';
import type { GalleryItem, LightGalleryProps } from '@lightgallery/react';

// Loaded on the first click, never part of the page's first bundle.
const Lightbox = dynamic(() => import('./Lightbox').then((m) => m.Lightbox), {
    ssr: false,
});

type OriginRect = NonNullable<LightGalleryProps['originRect']>;

export interface Photo {
    image: StaticImageData;
    alt: string;
    caption?: string;
}

export function LazyGallery({ photos }: { photos: Photo[] }) {
    const [mounted, setMounted] = useState(false);
    const [open, setOpen] = useState(false);
    const [index, setIndex] = useState(0);
    const [origin, setOrigin] = useState<OriginRect | null>(null);

    const items: GalleryItem[] = photos.map(({ image, alt, caption }) => ({
        src: image.src,
        thumb: image.src,
        alt,
        caption,
        lgSize: `${image.width}-${image.height}`,
    }));

    const show = (i: number) => (event: MouseEvent<HTMLAnchorElement>) => {
        event.preventDefault();
        // Where the slide flies out from and back to.
        const img = event.currentTarget.querySelector('img');
        const rect = (img ?? event.currentTarget).getBoundingClientRect();
        setOrigin({ left: rect.left, top: rect.top, width: rect.width, height: rect.height });
        setIndex(i);
        setMounted(true);
        setOpen(true);
    };

    return (
        <>
            <div className="grid">
                {photos.map(({ image, alt }, i) => (
                    <a key={image.src} href={image.src} onClick={show(i)}>
                        <Image src={image} alt={alt} placeholder="blur" sizes="(max-width: 768px) 50vw, 25vw" style={{ width: '100%', height: 'auto' }} />
                    </a>
                ))}
            </div>
            {mounted && (
                <Lightbox
                    items={items}
                    open={open}
                    index={index}
                    onIndexChange={setIndex}
                    originRect={origin}
                    onClose={() => setOpen(false)}
                />
            )}
        </>
    );
}
```

The lightbox component is the controlled form of the gallery with its
own CSS imports, so the stylesheets load with it instead of in the root
layout:

```tsx
// app/Lightbox.tsx
'use client';

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

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';

interface LightboxProps {
    items: GalleryItem[];
    open: boolean;
    index: number;
    onIndexChange: (index: number) => void;
    originRect: LightGalleryProps['originRect'];
    onClose: () => void;
}

export function Lightbox({ items, open, index, onIndexChange, originRect, onClose }: LightboxProps) {
    return (
        <LightGallery
            slides={items}
            open={open}
            index={index}
            onIndexChange={onIndexChange}
            originRect={originRect}
            onClose={onClose}
            plugins={[Thumbnail, Zoom]}
            thumbnail={{ animateThumb: true }}
        />
    );
}
```

The component stays mounted after the first open, so later opens are
instant and the close animation runs to the end. The cost is that the
first click waits for the chunk to download, about 19 KB gzipped for
the core plus the plugins you import. Keep the links' `href` pointing at
the full image, as above, so the grid still works before the JavaScript
arrives.

### Does the lightbox hydrate with the page?

The lightbox DOM does not exist until the first open, so there is nothing
to hydrate and nothing in the server HTML beyond the grid. The plugins
you import are in the page's JavaScript bundle; import only the ones you
use.

### Opening the gallery from a button

Controlled mode skips the trigger grid: pass `slides`, own the `open`
state and the `index`. The [React image gallery
demo](/demos/react-image-gallery/) shows it, and the
[React package docs](/docs/react/) list the full prop surface. For video
in the lightbox, see the [React video gallery](/demos/react-video-gallery/).


---

# React video gallery component

> Native React video gallery, YouTube, Vimeo, Wistia and HTML5 video in a lightbox, with poster facades so the provider iframe loads only on play.

@lightgallery/react plays YouTube, Vimeo, Wistia and self-hosted HTML5 video (MP4, WebM, Ogg) in a full-screen lightbox. Provider slides render as poster facades, so no third-party iframe, script or cookie loads until the viewer presses play. The full component API is in the [React package docs](https://www.lightgalleryjs.com/docs/react/).

Canonical page: https://www.lightgalleryjs.com/demos/react-video-gallery/

#### Demo

##### Provider videos

Point a slide's `src` at a YouTube, Vimeo or Wistia URL, the Video plugin
recognises it and builds the embed. `poster` supplies the facade image;
YouTube posters are fetched automatically when you omit it.

```tsx
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Video from '@lightgallery/react/plugins/video';

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-video.css';

const videos = [
    {
        src: 'https://youtu.be/IUN664s7N-c',
        caption: <h4>Peck Pocketed by Kevin Herron</h4>,
    },
    {
        src: 'https://vimeo.com/112836958',
        poster: 'img/vimeo-poster.jpg',
        caption: <h4>Nature</h4>,
    },
];

export function VideoGallery() {
    return (
        <LightGallery plugins={[Thumbnail, Video]}>
            {videos.map((video) => (
                <LightGalleryItem key={video.src} item={video}>
                    <img src={video.poster ?? 'img/youtube-thumb.jpg'} alt="" />
                </LightGalleryItem>
            ))}
        </LightGallery>
    );
}
```

##### HTML5 videos

Self-hosted video takes a `video` object with the sources, tracks and the
attributes to put on the `<video>` element. Leave `src` off for these slides:

```tsx
const items = [
    {
        video: {
            source: [{ src: 'videos/video1.mp4', type: 'video/mp4' }],
            tracks: [
                {
                    src: 'videos/captions-en.vtt',
                    kind: 'captions',
                    srclang: 'en',
                    label: 'English',
                    default: 'true',
                },
            ],
            attributes: { preload: false, controls: true },
        },
        poster: 'img/html5-video-poster.jpg',
        caption: <h4>Peck Pocketed</h4>,
    },
];
```

##### Facades and playback settings

Every Video plugin setting lives on the `video` prop:

```tsx
<LightGallery
    slides={videos}
    plugins={[Thumbnail, Video]}
    video={{
        // both are the defaults
        videoFacade: true,
        youTubeNoCookie: true,
        // autoplay forces an immediate embed by design, turn it off
        // to keep the facade on the first slide too
        autoplayFirstVideo: false,
        gotoNextSlideOnVideoEnd: true,
    }}
/>
```

Facades cut roughly 990 KB and 14 requests per YouTube slide until playback
starts, how the poster chain resolves is covered in the
[video facades guide](/docs/video-facades/).

More in the [React package docs](/docs/react/), or see the
[React image gallery](/demos/react-image-gallery/) and
[React video carousel](/demos/react-video-carousel/) demos.


---

# Vue image gallery component

> Native Vue 3 image gallery and lightbox component, v-model, scoped slots and Teleport, with animated thumbnails, pinch zoom and Nuxt SSR support.

@lightgallery/vue is a native Vue 3 image gallery: every node is rendered by Vue, with `v-model` for the open state and the index, typed emits, scoped slots and a Teleport overlay. Animated thumbnails, pinch and double-tap zoom, captions, rotate, fullscreen and sharing come as tree-shakable plugins. The full component API is in the [Vue package docs](https://www.lightgalleryjs.com/docs/vue/).

Canonical page: https://www.lightgalleryjs.com/demos/vue-image-gallery/

#### Demo

Click any thumbnail. The Vue component renders the same markup and runs the
same gallery logic, the shared headless core guarantees identical behavior
across all four packages.

_Live demo: https://www.lightgalleryjs.com/demos/vue-image-gallery/_

##### Install

```bash
npm install @lightgallery/vue lightgallery
```

Peer range is `vue >=3.4` (the component uses `defineModel`). The CSS ships
from the `lightgallery` package and is shared by every binding, import it
globally, in `main.ts` or your root stylesheet:

```ts
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';
```

##### Thumbnail grid

Wrap each trigger in ``. Mount order is slide order, and clicking a
trigger opens the lightbox on that slide:

```vue
<script setup lang="ts">
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Zoom from '@lightgallery/vue/plugins/zoom';

const plugins = [Thumbnail, Zoom];

const items: LgGalleryItem[] = [
    {
        src: 'img/1-1600.jpg',
        thumb: 'img/1-240.jpg',
        alt: 'Mountains',
        // enables the zoom-from-origin open animation
        lgSize: '1600-1067',
        caption: 'Mountains',
    },
    {
        src: 'img/2-1600.jpg',
        thumb: 'img/2-240.jpg',
        alt: 'Forest path',
        lgSize: '1600-2400',
        caption: 'Forest path',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins" :zoom="{ scale: 1.5 }">
        <LgItem v-for="item of items" :key="item.src" :item="item">
            <img :src="item.thumb" :alt="item.alt" />
        </LgItem>
    </LightGallery>
</template>
```

##### Settings, plugins and events

Core settings are same-named props (`:mode`, `:speed`, `:loop`,
`:caption-position`, …). Each plugin adds one settings prop named after it,
and events are kebab-case emits with no `on` prefix:

```vue
<LightGallery
    :plugins="[Thumbnail, Zoom]"
    :speed="400"
    :thumbnail="{ animateThumb: true, thumbWidth: 130 }"
    :zoom="{ scale: 1.5, actualSize: true }"
    @after-slide="({ index }) => console.log(index)"
/>
```

Adding a plugin to `:plugins` is what enables it, a bare `:thumbnail` prop
only configures one that is already loaded.

##### Controlled and imperative

`v-model:open` and `v-model:index` hand you the state; a template ref
exposes the same actions the other packages have:

```vue
<script setup>
import { ref } from 'vue';
import { LightGallery } from '@lightgallery/vue';

const open = ref(false);
const index = ref(0);
const lg = ref();
</script>

<template>
    <button @click="open = true">Open gallery</button>
    <button @click="lg.openGallery(2)">Open at slide 3</button>

    <LightGallery
        ref="lg"
        :slides="items"
        v-model:open="open"
        v-model:index="index"
    />
</template>
```

The handle covers `openGallery(index?)`, `closeGallery()`, `goToSlide(i)`,
`nextSlide()`, `prevSlide()` and `refresh()`.

##### Slots

Captions, the counter and the navigation buttons are named scoped slots, `#caption`, `#counter`, `#prev-button`, `#next-button`, so you render them
with your own components instead of HTML strings:

```vue
<LightGallery :slides="items">
    <template #caption="{ item }">
        <h4>{{ item.alt }}</h4>
    </template>
</LightGallery>
```

##### Nuxt and SSR

Every entry imports without browser globals, and the overlay never
server-renders, the `` mounts on the client, so there is no
hydration mismatch and no `` wrapper needed. Your trigger markup
still server-renders, so the grid stays crawlable. Import the CSS through
`nuxt.config`:

```ts
export default defineNuxtConfig({
    css: ['lightgallery/css/lightgallery.css'],
});
```

More in the [Vue package docs](/docs/vue/), the full prop surface, all 14
plugins plus the justified grid, and the accessibility behavior. See also the
[Vue video gallery](/demos/vue-video-gallery/) demo.


---

# Bootstrap image gallery with lightbox

> Bootstrap image gallery demo with a full-screen lightbox, responsive grid markup, thumbnails, zoom and captions, and no jQuery required.

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Here is the demo adding lightbox gallery support for Bootstrap.

Canonical page: https://www.lightgalleryjs.com/demos/bootstrap-image-gallery/

### Demo

    
        <a class="lg-item" data-lg-size="1600-1067"
            data-src="/img/photos/morocco/01-1600.avif"
            data-sub-html="<h4>Blue and white painted houses on the cliff</h4><p>Photo by <a href='https://unsplash.com/photos/NncAbldgViA'>Pretty Pink</a> on <a href='https://unsplash.com'>Unsplash</a></p>">
            <img src="/img/photos/morocco/01-480.avif"
                class="w-100 shadow-1-strong mb-3" alt="blue and white painted houses on the cliff" />
        </a>
        <a class="lg-item" data-lg-size="1600-1071"
            data-src="/img/photos/morocco/02-1600.avif"
            data-sub-html="<h4>Concrete houses surrounded by trees</h4><p>Photo by <a href='https://unsplash.com/photos/i-P1lmY_e1w'>Sergey Pesterev</a> on <a href='https://unsplash.com'>Unsplash</a></p>">
            <img src="/img/photos/morocco/02-480.avif"
                class="w-100 shadow-1-strong" alt="concrete houses surrounded by trees" />
        </a>
    
    
        <a class="lg-item" data-lg-size="1600-2133"
            data-src="/img/photos/morocco/03-1600.avif"
            data-sub-html="<h4>Blue stairs in Chefchaouen market</h4><p>Photo by <a href='https://unsplash.com/photos/CBfUGtVP0QE'>Mohammed</a> on <a href='https://unsplash.com'>Unsplash</a></p>">
            <img src="/img/photos/morocco/03-480.avif"
                class="w-100 shadow-1-strong mb-3" alt="blue stairs in Chefchaouen market" />
        </a>
        <a class="lg-item" data-lg-size="1600-1200"
            data-src="/img/photos/morocco/04-1600.avif"
            data-sub-html="<h4>Boats docked near houses</h4><p>Photo by <a href='https://unsplash.com/photos/aqJfoLKFz6c'>Louis Hansel</a> on <a href='https://unsplash.com'>Unsplash</a></p>">
            <img src="/img/photos/morocco/04-480.avif"
                class="w-100 shadow-1-strong" alt="boats docked near houses" />
        </a>
    
    
        <a class="lg-item" data-lg-size="1600-1067"
            data-src="/img/photos/morocco/05-1600.avif"
            data-sub-html="<h4>Textiles hanged beside concrete buildings</h4><p>Photo by <a href='https://unsplash.com/photos/LhVJaRPweJc'>Frida Aguilar Estrada</a> on <a href='https://unsplash.com'>Unsplash</a></p>">
            <img src="/img/photos/morocco/05-480.avif"
                class="w-100 shadow-1-strong mb-3" alt="textiles hanged beside concrete buildings" />
        </a>
        <a class="lg-item" data-lg-size="1600-1067"
            data-src="/img/photos/morocco/06-1600.avif"
            data-sub-html="<h4>Bird's eye view of town</h4><p>Photo by <a href='https://unsplash.com/photos/pcbSQTQr2-I'>Toa Heftiba</a> on <a href='https://unsplash.com'>Unsplash</a></p>">
            <img src="/img/photos/morocco/06-480.avif"
                class="w-100 shadow-1-strong" alt="bird's eye view of town" />
        </a>
    

**JavaScript**

**HTML**

```html
<div class="row mx-0" id="bootstrap-image-gallery">
    <div class="col-lg-4 col-md-12 mb-4 mb-lg-0 px-2">
        <a class="lg-item" data-lg-size="1600-1067"
            data-src="img/img1.jpg">
            <img src="img/thumb1.jpg"
                class="w-100 shadow-1-strong mb-3" alt="Boat on Calm Water" />
        </a>
        <a class="lg-item" data-lg-size="1600-2400"
            data-src="img/img2.jpg">
            <img src="img/thumb2.jpg"
                class="w-100 shadow-1-strong" alt="Wintry Mountain Landscape" />
        </a>
    </div>
    <div class="col-lg-4 mb-4 mb-lg-0 px-2">
        <a class="lg-item" data-lg-size="1600-2398"
            data-src="img/img3.jpg">
            <img src="img/thumb3.jpg"
                class="w-100 shadow-1-strong mb-3" alt="Mountains in the Clouds" />
        </a>
        <a class="lg-item" data-lg-size="1600-1065"
            data-src="img/img4.jpg">
            <img src="img/thumb4.jpg"
                class="w-100 shadow-1-strong" alt="Boat on Calm Water" />
        </a>
    </div>
</div>
```

**JavaScript**

```js
const container = document.querySelector('#bootstrap-image-gallery');
window.lightGallery(container, {
    selector: '.lg-item',
    plugins: [
        lgZoom,
        lgThumbnail
    ],
});
```

**React**

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

// The items of each grid column. `lgSize` is the full-size image's
// WIDTH-HEIGHT; it lets the image open from its thumbnail.
const columns: GalleryItem[][] = [
    [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Boat on Calm Water',
            lgSize: '1600-1067',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Wintry Mountain Landscape',
            lgSize: '1600-2400',
        },
    ],
    [
        {
            src: 'img/img3.jpg',
            thumb: 'img/thumb3.jpg',
            alt: 'Mountains in the Clouds',
            lgSize: '1600-2398',
        },
        {
            src: 'img/img4.jpg',
            thumb: 'img/thumb4.jpg',
            alt: 'Boat on Calm Water',
            lgSize: '1600-1065',
        },
    ],
];

// The items can sit at any depth inside the gallery, so the Bootstrap
// grid keeps its own markup.
<LightGallery plugins={[Zoom, Thumbnail]}>
    <div className="row g-2">
        {columns.map((column, index) => (
            <div key={index} className="col-4">
                {column.map((item) => (
                    <LightGalleryItem
                        key={item.src}
                        item={item}
                        className="d-block mb-2"
                    >
                        <img
                            src={item.thumb}
                            className="d-block w-100"
                            alt={item.alt}
                        />
                    </LightGalleryItem>
                ))}
            </div>
        ))}
    </div>
</LightGallery>;
```

**Vue**

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

const plugins = [Zoom, Thumbnail];

// The items of each grid column. `lgSize` is the full-size image's
// WIDTH-HEIGHT; it lets the image open from its thumbnail.
const columns = [
    [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Boat on Calm Water',
            lgSize: '1600-1067',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Wintry Mountain Landscape',
            lgSize: '1600-2400',
        },
    ],
    [
        {
            src: 'img/img3.jpg',
            thumb: 'img/thumb3.jpg',
            alt: 'Mountains in the Clouds',
            lgSize: '1600-2398',
        },
        {
            src: 'img/img4.jpg',
            thumb: 'img/thumb4.jpg',
            alt: 'Boat on Calm Water',
            lgSize: '1600-1065',
        },
    ],
];
</script>

<template>
    <!-- The items can sit at any depth inside the gallery, so the Bootstrap
         grid keeps its own markup. -->
    <LightGallery :plugins="plugins">
        <div class="row g-2">
            <div v-for="(column, index) of columns" :key="index" class="col-4">
                <LgItem
                    v-for="item of column"
                    :key="item.src"
                    :item="item"
                    class="d-block mb-2"
                >
                    <img :src="item.thumb" class="d-block w-100" :alt="item.alt" />
                </LgItem>
            </div>
        </div>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- The items can sit at any depth inside the gallery, so the
             Bootstrap grid keeps its own markup. -->
        <lg-gallery [features]="features">
            <div class="row g-2">
                @for (column of columns; track $index) {
                    <div class="col-4">
                        @for (item of column; track item.src) {
                            <a class="d-block mb-2" [lgGalleryItem]="item">
                                <img
                                    [src]="item.thumb"
                                    class="d-block w-100"
                                    [alt]="item.alt"
                                />
                            </a>
                        }
                    </div>
                }
            </div>
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withZoom(), withThumbnail()];

    // The items of each grid column. `lgSize` is the full-size image's
    // WIDTH-HEIGHT; it lets the image open from its thumbnail.
    columns: LgGalleryItem[][] = [
        [
            {
                src: 'img/img1.jpg',
                thumb: 'img/thumb1.jpg',
                alt: 'Boat on Calm Water',
                lgSize: '1600-1067',
            },
            {
                src: 'img/img2.jpg',
                thumb: 'img/thumb2.jpg',
                alt: 'Wintry Mountain Landscape',
                lgSize: '1600-2400',
            },
        ],
        [
            {
                src: 'img/img3.jpg',
                thumb: 'img/thumb3.jpg',
                alt: 'Mountains in the Clouds',
                lgSize: '1600-2398',
            },
            {
                src: 'img/img4.jpg',
                thumb: 'img/thumb4.jpg',
                alt: 'Boat on Calm Water',
                lgSize: '1600-1065',
            },
        ],
    ];
}
```


---

# Vue video gallery component

> Native Vue 3 video gallery, YouTube, Vimeo, Wistia and HTML5 video in a lightbox, with poster facades so the provider iframe loads only on play.

@lightgallery/vue plays YouTube, Vimeo, Wistia and self-hosted HTML5 video (MP4, WebM, Ogg) in a full-screen lightbox, driven by `v-model` and typed emits. Provider slides render as poster facades, so no third-party iframe, script or cookie loads until the viewer presses play. The full component API is in the [Vue package docs](https://www.lightgalleryjs.com/docs/vue/).

Canonical page: https://www.lightgalleryjs.com/demos/vue-video-gallery/

#### Demo

##### Install

```bash
npm install @lightgallery/vue lightgallery
```

```ts
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-video.css';
```

##### Provider videos

Point a slide's `src` at a YouTube, Vimeo or Wistia URL, the Video plugin
recognises it and builds the embed. `poster` supplies the facade image;
YouTube posters are fetched for you when you leave it out.

```vue
<script setup lang="ts">
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Video from '@lightgallery/vue/plugins/video';

const videos: LgGalleryItem[] = [
    {
        src: 'https://youtu.be/IUN664s7N-c',
        caption: 'Peck Pocketed by Kevin Herron',
    },
    {
        src: 'https://vimeo.com/112836958',
        poster: 'img/vimeo-poster.jpg',
        caption: 'Nature',
    },
];
</script>

<template>
    <LightGallery :plugins="[Thumbnail, Video]">
        <LgItem v-for="video of videos" :key="video.src" :item="video">
            <img :src="video.poster ?? 'img/youtube-thumb.jpg'" alt="" />
        </LgItem>
    </LightGallery>
</template>
```

##### HTML5 videos

Self-hosted video takes a `video` object with the sources, tracks and the
attributes for the `<video>` element. Leave `src` off for these slides:

```ts
const items: LgGalleryItem[] = [
    {
        video: {
            source: [{ src: 'videos/video1.mp4', type: 'video/mp4' }],
            tracks: [
                {
                    src: 'videos/captions-en.vtt',
                    kind: 'captions',
                    srclang: 'en',
                    label: 'English',
                    default: 'true',
                },
            ],
            attributes: { preload: false, controls: true },
        },
        poster: 'img/html5-video-poster.jpg',
        caption: 'Peck Pocketed',
    },
];
```

##### Facades and playback settings

Every Video plugin setting lives on the `:video` prop:

```vue
<LightGallery
    :slides="videos"
    :plugins="[Thumbnail, Video]"
    :video="{
        // both are the defaults
        videoFacade: true,
        youTubeNoCookie: true,
        // autoplay forces an immediate embed by design, turn it off
        // to keep the facade on the first slide too
        autoplayFirstVideo: false,
        gotoNextSlideOnVideoEnd: true,
    }"
/>
```

Facades cut roughly 990 KB and 14 requests per YouTube slide until playback
starts, the poster chain is described in the
[video facades guide](/docs/video-facades/). Vimeo thumbnails need the
`vimeoThumbnail` plugin.

##### Nuxt and SSR

The overlay never server-renders (the `` mounts client-side), so
the component works directly in server-rendered pages with no
`` wrapper, and no video provider is contacted on the server.

More in the [Vue package docs](/docs/vue/), or see the
[Vue image gallery](/demos/vue-image-gallery/) demo.


---

# Angular image gallery component

> Native Angular image gallery and lightbox, standalone component, signal inputs, zoneless change detection, animated thumbnails and pinch zoom.

@lightgallery/angular is a native Angular image gallery: a standalone component with signal inputs and outputs, zoneless change detection and CDK overlay/a11y, in Angular Package Format with one entry point per feature. Animated thumbnails, pinch and double-tap zoom, captions, rotate, fullscreen and sharing are tree-shakable features. The full component API is in the [Angular package docs](https://www.lightgalleryjs.com/docs/angular/).

Canonical page: https://www.lightgalleryjs.com/demos/angular-image-gallery/

#### Demo

Click any thumbnail. The Angular component renders the same markup and runs
the same gallery logic, the shared headless core guarantees identical
behavior across all four packages.

_Live demo: https://www.lightgalleryjs.com/demos/angular-image-gallery/_

##### Install

```bash
npm install @lightgallery/angular @angular/cdk lightgallery
```

Peer ranges are `@angular/core`, `@angular/common` and `@angular/cdk`
`>=21 <23`. There is no `zone.js` anywhere in the package, so it works with
zoneless change detection. The CSS comes from the `lightgallery` package, add it to the `styles` array in `angular.json` or import it in your root
stylesheet:

```ts
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';
```

##### Thumbnail grid

Put `lgGalleryItem` on each trigger. Mount order is slide order, and
clicking a trigger opens the lightbox on that slide:

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [href]="item.src" [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withThumbnail({ thumbWidth: 130 }), withZoom({ scale: 1.5 })];

    items: LgGalleryItem[] = [
        {
            src: 'img/1-1600.jpg',
            thumb: 'img/1-240.jpg',
            alt: 'Mountains',
            // enables the zoom-from-origin open animation
            lgSize: '1600-1067',
            caption: 'Mountains',
        },
        {
            src: 'img/2-1600.jpg',
            thumb: 'img/2-240.jpg',
            alt: 'Forest path',
            lgSize: '1600-2400',
            caption: 'Forest path',
        },
    ];
}
```

##### Settings, features and events

Core settings are same-named signal inputs (`[mode]`, `[speed]`, `[loop]`,
`[captionPosition]`, …). Features come from the `with()` factories,
each in its own entry point, and events are outputs without the `on` prefix:

```html
<lg-gallery
    [features]="features"
    [speed]="400"
    (afterSlide)="onSlide($event)"
    (afterClose)="onClose()"
/>
```

Order matters for the slide wrappers: put `withZoom()` before
`withRotate()`.

##### Controlled and imperative

Drive the gallery from your own signals, or grab the component instance
through its exported ref:

```html
<button (click)="open.set(true)">Open gallery</button>
<button (click)="lg.openGallery(2)">Open at slide 3</button>

<lg-gallery
    #lg="lgGallery"
    [slides]="items"
    [open]="open()"
    (closed)="open.set(false)"
    [(index)]="index"
/>
```

The instance covers `openGallery(index?)`, `closeGallery()`,
`goToSlide(i)`, `nextSlide()`, `prevSlide()` and `refresh()`.

##### Templates instead of HTML strings

Captions, the counter and the navigation buttons are `ng-template`
directives, `lgCaption`, `lgCounter`, `lgPrevButton`, `lgNextButton`, so
the gallery chrome is your markup:

```html
<lg-gallery [slides]="items">
    <ng-template lgCaption let-item let-index="index">
        <h4>{{ item?.caption }}</h4>
        <p>Slide {{ index + 1 }}</p>
    </ng-template>
</lg-gallery>
```

The directives are separate imports, add `LgCaptionDirective` (and its
siblings) to the component's `imports` alongside `LgGalleryComponent`.

##### SSR

Every entry point imports cleanly in bare Node and the overlay mounts
through the CDK overlay after hydration, so Angular SSR works without a
browser-only guard. Trigger markup server-renders, keeping the grid
crawlable.

More in the [Angular package docs](/docs/angular/), the full input
surface, all 14 features plus the justified grid, and the accessibility behavior. See also the
[Angular video gallery](/demos/angular-video-gallery/) demo.


---

# Bootstrap video carousel with lightbox

> Bootstrap video carousel demo, slide through YouTube, Vimeo and HTML5 videos and open any of them in a full-screen lightbox player.

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Here is the demo adding lightbox gallery support for the Bootstrap video carousel.

Canonical page: https://www.lightgalleryjs.com/demos/bootstrap-video-carousel/

#### Demo

  
    <button type="button" data-bs-target="#bootstrap-video-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#bootstrap-video-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#bootstrap-video-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
  
  
         <a
        data-lg-size="1280-720"
        class="lg-item"
        data-src="//vimeo.com/112836958"
        data-poster="/images/demo/vimeo-video-poster.jpg"
        data-sub-html="<h4>Nature</h4><p>Video by <a target='_blank' href='https://vimeo.com/charliekaye'>Charlie Kaye</a></p>"
    >
       <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/vimeo-video-poster.jpg"
        />
    </a>
    
    
        <a
        class="lg-item"
       data-lg-size="1280-720"
        data-src="//www.youtube.com/watch?v=EIUJfXk3_3w"
        data-poster="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
        data-sub-html="<h4>Puffin Hunts Fish To Feed Puffling | Blue Planet II | BBC Earth</h4><p>On the heels of Planet Earth II's record-breaking Emmy nominations, BBC America presents stunning visual soundscapes from the series' amazing habitats.</p>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
        />
    </a>
    
    
        <a
          class="lg-item"
        data-lg-size="1280-720"
        data-src="https://private-sharing.wistia.com/medias/mwhrulrucj"
        data-poster="/images/demo/wistia-video-poster.jpeg"
        data-sub-html="<h4>Thank You!</h4><p> Sample Wistia video </p>"
    >
        <img
            width="300"
            height="100"
            class="img-responsive"
            src="/images/demo/wistia-video-poster.jpeg"
        />
     </a>
    
  
  <button class="carousel-control-prev" type="button" data-bs-target="#bootstrap-video-carousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#bootstrap-video-carousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

**JavaScript**

**HTML**

```html
<div
    id="bootstrap-video-carousel"
    class="carousel slide"
    data-bs-ride="carousel"
>
    <div class="carousel-indicators">
        <button
            type="button"
            data-bs-target="#bootstrap-video-carousel"
            data-bs-slide-to="0"
            class="active"
            aria-current="true"
            aria-label="Slide 1"
        ></button>
        <button
            type="button"
            data-bs-target="#bootstrap-video-carousel"
            data-bs-slide-to="1"
            aria-label="Slide 2"
        ></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <a
                data-lg-size="1280-720"
                class="lg-item"
                data-src="//vimeo.com/112836958"
                data-poster="..."
                data-sub-html="..."
            >
                <img
                    width="300"
                    height="100"
                    class="img-responsive"
                    src="/images/demo/vimeo-video-poster.jpg"
                />
            </a>
        </div>
        <div class="carousel-item">
            <a
                class="lg-item"
                data-lg-size="1280-720"
                data-src="https://private-sharing.wistia.com/medias/mwhrulrucj"
                data-poster="..."
                data-sub-html="..."
            >
                <img
                    width="300"
                    height="100"
                    class="img-responsive"
                    src="/images/demo/wistia-video-poster.jpeg"
                />
            </a>
        </div>
    </div>
    <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#bootstrap-video-carousel"
        data-bs-slide="prev"
    >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#bootstrap-video-carousel"
        data-bs-slide="next"
    >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>
```

**JavaScript**

```js
const carouselEl = document.getElementById('bootstrap-video-carousel');

// The Bootstrap 5 carousel
new bootstrap.Carousel(carouselEl, {
    interval: 2000,
    wrap: false,
});

// One gallery over the carousel items, created once
lightGallery(carouselEl.querySelector('.carousel-inner'), {
    plugins: [lgVideo],
    selector: '.lg-item',
});
```

**React**

```tsx
import { useEffect, useRef } from 'react';
import Carousel from 'bootstrap/js/dist/carousel';
import {
    LightGallery,
    LightGalleryItem,
    type GalleryItem,
} from '@lightgallery/react';
import Video from '@lightgallery/react/plugins/video';

// `src` is the address of the video page. `poster` is the image shown
// before the video plays, and the image on the carousel slide.
const items: GalleryItem[] = [
    {
        src: 'https://vimeo.com/112836958',
        poster: '/images/demo/vimeo-video-poster.jpg',
        alt: 'Nature',
        lgSize: '1280-720',
    },
    {
        src: 'https://private-sharing.wistia.com/medias/mwhrulrucj',
        poster: '/images/demo/wistia-video-poster.jpeg',
        alt: 'Thank You!',
        lgSize: '1280-720',
    },
];

const carouselRef = useRef<HTMLDivElement>(null);

// The Bootstrap 5 carousel
useEffect(() => {
    const carousel = new Carousel(carouselRef.current!, {
        interval: 2000,
        wrap: false,
        // Start cycling right away, as data-bs-ride="carousel" does
        ride: 'carousel',
    });
    return () => {
        // dispose() leaves the cycle timer running, so stop it first
        carousel.pause();
        carousel.dispose();
    };
}, []);

// One gallery over the carousel, every slide holds a video item
<LightGallery plugins={[Video]}>
    <div
        id="bootstrap-video-carousel"
        className="carousel slide"
        ref={carouselRef}
    >
        <div className="carousel-inner">
            {items.map((item, index) => (
                <div
                    key={item.poster}
                    className={
                        index === 0 ? 'carousel-item active' : 'carousel-item'
                    }
                >
                    <LightGalleryItem item={item}>
                        <img
                            src={item.poster}
                            className="d-block w-100"
                            alt={item.alt}
                        />
                    </LightGalleryItem>
                </div>
            ))}
        </div>
        {/* The indicators and the previous and next buttons, as in the
            Bootstrap markup */}
    </div>
</LightGallery>;
```

**Vue**

```vue
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import Carousel from 'bootstrap/js/dist/carousel';
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Video from '@lightgallery/vue/plugins/video';

const plugins = [Video];

// `src` is the address of the video page. `poster` is the image shown
// before the video plays, and the image on the carousel slide.
const items: LgGalleryItem[] = [
    {
        src: 'https://vimeo.com/112836958',
        poster: '/images/demo/vimeo-video-poster.jpg',
        alt: 'Nature',
        lgSize: '1280-720',
    },
    {
        src: 'https://private-sharing.wistia.com/medias/mwhrulrucj',
        poster: '/images/demo/wistia-video-poster.jpeg',
        alt: 'Thank You!',
        lgSize: '1280-720',
    },
];

const carouselEl = ref<HTMLElement | null>(null);
let carousel: Carousel | undefined;

// The Bootstrap 5 carousel
onMounted(() => {
    carousel = new Carousel(carouselEl.value!, {
        interval: 2000,
        wrap: false,
        // Start cycling right away, as data-bs-ride="carousel" does
        ride: 'carousel',
    });
});
onBeforeUnmount(() => {
    // dispose() leaves the cycle timer running, so stop it first
    carousel?.pause();
    carousel?.dispose();
});
</script>

<template>
    <!-- One gallery over the carousel, every slide holds a video item -->
    <LightGallery :plugins="plugins">
        <div
            id="bootstrap-video-carousel"
            ref="carouselEl"
            class="carousel slide"
        >
            <div class="carousel-inner">
                <div
                    v-for="(item, index) of items"
                    :key="item.poster"
                    class="carousel-item"
                    :class="{ active: index === 0 }"
                >
                    <LgItem :item="item">
                        <img :src="item.poster" class="d-block w-100" :alt="item.alt" />
                    </LgItem>
                </div>
            </div>
            <!-- The indicators and the previous and next buttons, as in
                 the Bootstrap markup -->
        </div>
    </LightGallery>
</template>
```

**Angular**

```ts
import {
    afterNextRender,
    Component,
    DestroyRef,
    ElementRef,
    inject,
    viewChild,
} from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withVideo } from '@lightgallery/angular/plugins/video';
import Carousel from 'bootstrap/js/dist/carousel';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- One gallery over the carousel, every slide holds a video item -->
        <lg-gallery [features]="features">
            <div #carousel id="bootstrap-video-carousel" class="carousel slide">
                <div class="carousel-inner">
                    @for (item of items; track item.poster) {
                        <div class="carousel-item" [class.active]="$first">
                            <a [lgGalleryItem]="item">
                                <img
                                    [src]="item.poster"
                                    class="d-block w-100"
                                    [alt]="item.alt"
                                />
                            </a>
                        </div>
                    }
                </div>
                <!-- The indicators and the previous and next buttons, as in
                     the Bootstrap markup -->
            </div>
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withVideo()];

    // `src` is the address of the video page. `poster` is the image shown
    // before the video plays, and the image on the carousel slide.
    items: LgGalleryItem[] = [
        {
            src: 'https://vimeo.com/112836958',
            poster: '/images/demo/vimeo-video-poster.jpg',
            alt: 'Nature',
            lgSize: '1280-720',
        },
        {
            src: 'https://private-sharing.wistia.com/medias/mwhrulrucj',
            poster: '/images/demo/wistia-video-poster.jpeg',
            alt: 'Thank You!',
            lgSize: '1280-720',
        },
    ];

    carouselEl = viewChild.required<ElementRef<HTMLElement>>('carousel');

    constructor() {
        let carousel: Carousel | undefined;

        // The Bootstrap 5 carousel
        afterNextRender(() => {
            carousel = new Carousel(this.carouselEl().nativeElement, {
                interval: 2000,
                wrap: false,
                // Start cycling right away, as data-bs-ride="carousel" does
                ride: 'carousel',
            });
        });
        inject(DestroyRef).onDestroy(() => {
            // dispose() leaves the cycle timer running, so stop it first
            carousel?.pause();
            carousel?.dispose();
        });
    }
}
```


---

# Swiper.js demo with lightbox gallery

> Swiper slider demo with a lightbox gallery on every slide, open any slide full-screen with thumbnails, zoom and video support.

[SwiperJs](https://swiperjs.com/) is one of the most popular JavaScript carousel/slider libraries. Swiper can be used for creating beautiful image galleries with thumbnails. Here is the demo of adding lightbox gallery support for the Swiper carousel.

Canonical page: https://www.lightgalleryjs.com/demos/swiper/

#### Demo

    
        {photos('street', 4).map((p) => (
            <a data-lg-size={`${p.width}-${p.height}`} class="swiper-slide" data-src={p.src} data-sub-html={p.caption}>
                <img class="img-responsive" alt={p.alt} src={p.sizes[1].src} />
            </a>
        ))}
    
    
**JavaScript**

**HTML**

```html
<div class="swiper">
    <div class="swiper-wrapper" id="lg-swiper">
        <a class="swiper-slide" href="img/img1.jpg" data-lg-size="1600-1200">
            <img src="img/thumb1.jpg" />
        </a>
        <a class="swiper-slide" href="img/img2.jpg" data-lg-size="1600-1200">
            <img src="img/thumb2.jpg" />
        </a>
        <!-- more items -->
    </div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
```

**JavaScript**

```js
import Swiper from 'swiper';
import { Navigation } from 'swiper/modules';
import lightGallery from 'lightgallery';

const slides = document.getElementById('lg-swiper');

new Swiper('.swiper', {
    // other parameters
    modules: [Navigation],
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    on: {
        // Create the gallery once the carousel is ready
        init(swiper) {
            const gallery = lightGallery(slides);

            // Before the gallery closes, move the carousel to the slide
            // the gallery is showing, so the image closes into its slide
            slides.addEventListener('lgBeforeClose', () => {
                swiper.slideTo(gallery.index, 0);
            });
        },
    },
});
```

**React**

```tsx
import { useRef } from 'react';
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import { Navigation } from 'swiper/modules';
import { Swiper, SwiperSlide, type SwiperClass } from 'swiper/react';

// `lgSize` is the full-size image's WIDTH-HEIGHT; it lets the image
// open from its slide.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        lgSize: '1600-1200',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        lgSize: '1600-1200',
    },
];

const swiper = useRef<SwiperClass | null>(null);

// When the gallery goes to another slide, move the carousel to the same
// slide, so the image closes into its slide
<LightGallery onBeforeSlide={({ index }) => swiper.current?.slideTo(index, 0)}>
    <Swiper
        modules={[Navigation]}
        navigation
        onSwiper={(instance) => {
            swiper.current = instance;
        }}
    >
        {items.map((item) => (
            <SwiperSlide key={item.src}>
                <LightGalleryItem item={item} href={item.src}>
                    <img src={item.thumb} alt={item.alt} />
                </LightGalleryItem>
            </SwiperSlide>
        ))}
    </Swiper>
</LightGallery>;
```

**Vue**

```vue
<script setup lang="ts">
import {
    LightGallery,
    LgItem,
    type LgGalleryItem,
    type SlideEventDetail,
} from '@lightgallery/vue';
import { Navigation } from 'swiper/modules';
import type { Swiper as SwiperClass } from 'swiper/types';
import { Swiper, SwiperSlide } from 'swiper/vue';

// `lgSize` is the full-size image's WIDTH-HEIGHT; it lets the image
// open from its slide.
const items: LgGalleryItem[] = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        lgSize: '1600-1200',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        lgSize: '1600-1200',
    },
];

const modules = [Navigation];

let swiper: SwiperClass | undefined;

function setSwiper(instance: SwiperClass) {
    swiper = instance;
}

// When the gallery goes to another slide, move the carousel to the same
// slide, so the image closes into its slide
function followGallery({ index }: SlideEventDetail) {
    swiper?.slideTo(index, 0);
}
</script>

<template>
    <LightGallery @before-slide="followGallery">
        <Swiper :modules="modules" navigation @swiper="setSwiper">
            <SwiperSlide v-for="item of items" :key="item.src">
                <LgItem :item="item">
                    <img :src="item.thumb" :alt="item.alt" />
                </LgItem>
            </SwiperSlide>
        </Swiper>
    </LightGallery>
</template>
```

**Angular**

```ts
import {
    afterNextRender,
    Component,
    DestroyRef,
    ElementRef,
    inject,
    viewChild,
} from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import Swiper from 'swiper';
import { Navigation } from 'swiper/modules';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <!-- When the gallery goes to another slide, move the carousel to
             the same slide, so the image closes into its slide -->
        <lg-gallery (beforeSlide)="swiper?.slideTo($event.index, 0)">
            <div #carousel class="swiper">
                <div class="swiper-wrapper">
                    @for (item of items; track item.src) {
                        <a class="swiper-slide" [href]="item.src" [lgGalleryItem]="item">
                            <img [src]="item.thumb" [alt]="item.alt" />
                        </a>
                    }
                </div>

                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </lg-gallery>
    `,
})
export class Gallery {
    // `lgSize` is the full-size image's WIDTH-HEIGHT; it lets the image
    // open from its slide.
    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            lgSize: '1600-1200',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            lgSize: '1600-1200',
        },
    ];

    swiper?: Swiper;
    carousel = viewChild.required<ElementRef<HTMLElement>>('carousel');

    constructor() {
        // Create the carousel once its slides are in the page
        afterNextRender(() => {
            this.swiper = new Swiper(this.carousel().nativeElement, {
                modules: [Navigation],
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        });
        inject(DestroyRef).onDestroy(() => this.swiper?.destroy());
    }
}
```

##### CSS (Optional)

```css
.swiper-lg-wrap {
    width: 1200px;
    height: 0;
    padding-bottom: 65%;
    position: relative;
    max-width: 100%;
}
.swiper {
    width: 100%;
    height: 100%;
    position: absolute !important;
}
```


---

# Angular video gallery component

> Native Angular video gallery, YouTube, Vimeo, Wistia and HTML5 video in a lightbox, with poster facades so the provider iframe loads only on play.

@lightgallery/angular plays YouTube, Vimeo, Wistia and self-hosted HTML5 video (MP4, WebM, Ogg) in a full-screen lightbox, from a standalone component with signal inputs and zoneless change detection. Provider slides render as poster facades, so no third-party iframe, script or cookie loads until the viewer presses play. The full component API is in the [Angular package docs](https://www.lightgalleryjs.com/docs/angular/).

Canonical page: https://www.lightgalleryjs.com/demos/angular-video-gallery/

#### Demo

##### Install

```bash
npm install @lightgallery/angular @angular/cdk lightgallery
```

```ts
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-video.css';
```

##### Provider videos

Point a slide's `src` at a YouTube, Vimeo or Wistia URL, the video feature
recognises it and builds the embed. `poster` supplies the facade image;
YouTube posters are fetched for you when you leave it out.

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withVideo } from '@lightgallery/angular/plugins/video';

@Component({
    selector: 'app-video-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (video of videos; track video.src) {
                <a [lgGalleryItem]="video">
                    <img [src]="video.poster" alt="" />
                </a>
            }
        </lg-gallery>
    `,
})
export class VideoGallery {
    features = [withThumbnail(), withVideo()];

    videos: LgGalleryItem[] = [
        {
            src: 'https://youtu.be/IUN664s7N-c',
            caption: 'Peck Pocketed by Kevin Herron',
        },
        {
            src: 'https://vimeo.com/112836958',
            poster: 'img/vimeo-poster.jpg',
            caption: 'Nature',
        },
    ];
}
```

##### HTML5 videos

Self-hosted video takes a `video` object with the sources, tracks and the
attributes for the `<video>` element. Leave `src` off for these slides:

```ts
videos: LgGalleryItem[] = [
    {
        video: {
            source: [{ src: 'videos/video1.mp4', type: 'video/mp4' }],
            tracks: [
                {
                    src: 'videos/captions-en.vtt',
                    kind: 'captions',
                    srclang: 'en',
                    label: 'English',
                    default: 'true',
                },
            ],
            attributes: { preload: false, controls: true },
        },
        poster: 'img/html5-video-poster.jpg',
        caption: 'Peck Pocketed',
    },
];
```

##### Facades and playback settings

Video settings are arguments to the `withVideo()` factory:

```ts
features = [
    withThumbnail(),
    withVideo({
        // both are the defaults
        videoFacade: true,
        youTubeNoCookie: true,
        // autoplay forces an immediate embed by design, turn it off
        // to keep the facade on the first slide too
        autoplayFirstVideo: false,
        gotoNextSlideOnVideoEnd: true,
    }),
];
```

Facades cut roughly 990 KB and 14 requests per YouTube slide until playback
starts, the poster chain is described in the
[video facades guide](/docs/video-facades/). Vimeo thumbnails need
`withVimeoThumbnail()`.

##### SSR

Entry points import cleanly in bare Node and the overlay mounts through the
CDK overlay after hydration, so Angular SSR renders your trigger markup
without contacting any video provider on the server.

More in the [Angular package docs](/docs/angular/), or see the
[Angular image gallery](/demos/angular-image-gallery/) demo.


---

# Bootstrap video gallery with lightbox

> Bootstrap video gallery demo, YouTube, Vimeo and HTML5 video in a responsive grid that opens in a full-screen lightbox player.

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. Bootstrap can be used for creating beautiful video galleries with thumbnails. Here is the demo of adding lightbox gallery support for Bootstrap.

Canonical page: https://www.lightgalleryjs.com/demos/bootstrap-video-gallery/

### Demo

**JavaScript**

**HTML**

```html
<div class="container">
    <div class="row mx-0" id="bootstrap-video-gallery">
        <a
            class="col-md-6 col-sm-6 px-0"
            data-lg-size="1280-720"
            data-src="//www.youtube.com/watch?v=EIUJfXk3_3w"
            data-poster="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
            data-sub-html="..."
        >
            <img
                class="img-fluid"
                src="https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg"
            />
        </a>
        <a
            class="col-md-6 col-sm-6 px-0"
            data-lg-size="1280-720"
            data-src="//vimeo.com/112836958"
            data-poster="..."
            data-sub-html="..."
        >
            <img class="img-fluid" src="..." />
        </a>
    </div>
</div>
```

**JavaScript**

```js
window.lightGallery(document.getElementById('bootstrap-video-gallery'), {
    // Optional thumbnail plugin
    plugins: [lgThumbnail, lgVideo],
});
```

**React**

```tsx
import {
    LightGallery,
    LightGalleryItem,
    type GalleryItem,
} from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Video from '@lightgallery/react/plugins/video';

// YouTube and Vimeo: `src` is the address of the video page. `poster`
// is the image shown before the video plays.
const items: GalleryItem[] = [
    {
        src: 'https://www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        alt: 'YouTube video',
        lgSize: '1280-720',
    },
    {
        src: 'https://vimeo.com/112836958',
        poster: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
        thumb: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
        alt: 'Vimeo video',
        lgSize: '1280-720',
    },
];

// The thumbnail plugin is optional
<LightGallery plugins={[Thumbnail, Video]}>
    <div className="row g-3">
        {items.map((item) => (
            <LightGalleryItem
                key={item.poster}
                item={item}
                className="col-sm-4"
            >
                <img className="img-fluid" src={item.thumb} alt={item.alt} />
            </LightGalleryItem>
        ))}
    </div>
</LightGallery>;
```

**Vue**

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

// The thumbnail plugin is optional
const plugins = [Thumbnail, Video];

// YouTube and Vimeo: `src` is the address of the video page. `poster`
// is the image shown before the video plays.
const items = [
    {
        src: 'https://www.youtube.com/watch?v=EIUJfXk3_3w',
        poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
        alt: 'YouTube video',
        lgSize: '1280-720',
    },
    {
        src: 'https://vimeo.com/112836958',
        poster: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
        thumb: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
        alt: 'Vimeo video',
        lgSize: '1280-720',
    },
];
</script>

<template>
    <LightGallery :plugins="plugins">
        <div class="row g-3">
            <LgItem
                v-for="item of items"
                :key="item.poster"
                :item="item"
                class="col-sm-4"
            >
                <img class="img-fluid" :src="item.thumb" :alt="item.alt" />
            </LgItem>
        </div>
    </LightGallery>
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withVideo } from '@lightgallery/angular/plugins/video';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            <div class="row g-3">
                @for (item of items; track item.poster) {
                    <a class="col-sm-4" [lgGalleryItem]="item">
                        <img class="img-fluid" [src]="item.thumb" [alt]="item.alt" />
                    </a>
                }
            </div>
        </lg-gallery>
    `,
})
export class Gallery {
    // The thumbnail feature is optional
    features = [withThumbnail(), withVideo()];

    // YouTube and Vimeo: `src` is the address of the video page. `poster`
    // is the image shown before the video plays.
    items: LgGalleryItem[] = [
        {
            src: 'https://www.youtube.com/watch?v=EIUJfXk3_3w',
            poster: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
            thumb: 'https://img.youtube.com/vi/EIUJfXk3_3w/maxresdefault.jpg',
            alt: 'YouTube video',
            lgSize: '1280-720',
        },
        {
            src: 'https://vimeo.com/112836958',
            poster: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
            thumb: 'https://www.lightgalleryjs.com/images/demo/vimeo-video-poster.jpg',
            alt: 'Vimeo video',
            lgSize: '1280-720',
        },
    ];
}
```


---

# Flickity carousel demo with lightbox gallery

> Flickity carousel demo with a lightbox gallery on every cell, click to open full-screen, with thumbnails, zoom and video support.

[Flickity](https://flickity.metafizzy.co/) makes carousels, galleries, & sliders that feel lively and effortless. Flickity can be used for creating beautiful image galleries with thumbnails. Here is the demo of adding lightbox gallery support for the Flickity carousel.

Canonical page: https://www.lightgalleryjs.com/demos/flickity-demo/

#### Demo

Letting go of a mouse drag also clicks the cell under the pointer, so each
example stops that click before it reaches the cell and only a plain click
opens the gallery.

**JavaScript**

**HTML**

```html
<div id="flickity-carousel-gallery-demo" class="main-carousel">
    <a data-lg-size="1600-1200" href="img/img1.jpg" class="carousel-cell">
        <img src="img/thumb1.jpg" />
    </a>
    <a data-lg-size="1600-1200" href="img/img2.jpg" class="carousel-cell">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

**JavaScript**

```js
import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';
import Flickity from 'flickity';

const carousel = document.getElementById('flickity-carousel-gallery-demo');

// True from the start of a drag until the click that ends it
let dragged = false;

new Flickity(carousel, {
    cellAlign: 'center',
    pageDots: false,
    contain: true,
    autoPlay: true,
    on: {
        // Flickity moves the cells into its own slider element. Create
        // the gallery on that element once the carousel is ready
        ready() {
            lightGallery(document.querySelector('.flickity-slider'), {
                plugins: [lgZoom, lgThumbnail],
                selector: '.carousel-cell',
            });
        },
        pointerDown() {
            dragged = false;
        },
        dragStart() {
            dragged = true;
        },
    },
});

// Stop the click that ends a drag before it reaches the cell
carousel.addEventListener(
    'click',
    (event) => {
        if (dragged) {
            dragged = false;
            event.preventDefault();
            event.stopPropagation();
        }
    },
    true,
);
```

**React**

```tsx
import { useEffect, useRef, type MouseEvent } from 'react';
import { LightGallery, LightGalleryItem } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';
import Flickity from 'flickity';

// `lgSize` is the full-size image's WIDTH-HEIGHT; it lets the image
// open from its cell.
const items = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        lgSize: '1600-1200',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        lgSize: '1600-1200',
    },
];

const carousel = useRef<HTMLDivElement>(null);
// True from the start of a drag until the click that ends it
const dragged = useRef(false);

// Create the carousel once its cells are in the page
useEffect(() => {
    const flickity = new Flickity(carousel.current!, {
        cellAlign: 'center',
        pageDots: false,
        contain: true,
        autoPlay: true,
        on: {
            pointerDown() {
                dragged.current = false;
            },
            dragStart() {
                dragged.current = true;
            },
        },
    });
    return () => flickity.destroy();
}, []);

// Stop the click that ends a drag before it reaches the cell
const stopDragClick = (event: MouseEvent) => {
    if (dragged.current) {
        dragged.current = false;
        event.preventDefault();
        event.stopPropagation();
    }
};

<LightGallery plugins={[Zoom, Thumbnail]}>
    <div ref={carousel} className="main-carousel" onClickCapture={stopDragClick}>
        {items.map((item) => (
            <LightGalleryItem
                key={item.src}
                className="carousel-cell"
                item={item}
                href={item.src}
            >
                <img src={item.thumb} alt={item.alt} />
            </LightGalleryItem>
        ))}
    </div>
</LightGallery>;
```

**Vue**

```vue
<script setup lang="ts">
import { onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
import { LightGallery, LgItem, type LgGalleryItem } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Zoom from '@lightgallery/vue/plugins/zoom';
import Flickity from 'flickity';

const plugins = [Zoom, Thumbnail];

// `lgSize` is the full-size image's WIDTH-HEIGHT; it lets the image
// open from its cell.
const items: LgGalleryItem[] = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        lgSize: '1600-1200',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        lgSize: '1600-1200',
    },
];

const carousel = useTemplateRef('carousel');
let flickity: Flickity | undefined;
// True from the start of a drag until the click that ends it
let dragged = false;

// Create the carousel once its cells are in the page
onMounted(() => {
    flickity = new Flickity(carousel.value!, {
        cellAlign: 'center',
        pageDots: false,
        contain: true,
        autoPlay: true,
        on: {
            pointerDown() {
                dragged = false;
            },
            dragStart() {
                dragged = true;
            },
        },
    });
});
onBeforeUnmount(() => flickity?.destroy());

// Stop the click that ends a drag before it reaches the cell
function stopDragClick(event: MouseEvent) {
    if (dragged) {
        dragged = false;
        event.preventDefault();
        event.stopPropagation();
    }
}
</script>

<template>
    <LightGallery :plugins="plugins">
        <div ref="carousel" class="main-carousel" @click.capture="stopDragClick">
            <LgItem
                v-for="item of items"
                :key="item.src"
                class="carousel-cell"
                :item="item"
            >
                <img :src="item.thumb" :alt="item.alt" />
            </LgItem>
        </div>
    </LightGallery>
</template>
```

**Angular**

```ts
import {
    afterNextRender,
    Component,
    DestroyRef,
    ElementRef,
    inject,
    viewChild,
} from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';
import Flickity from 'flickity';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            <div #carousel class="main-carousel">
                @for (item of items; track item.src) {
                    <a class="carousel-cell" [href]="item.src" [lgGalleryItem]="item">
                        <img [src]="item.thumb" [alt]="item.alt" />
                    </a>
                }
            </div>
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withZoom(), withThumbnail()];

    // `lgSize` is the full-size image's WIDTH-HEIGHT; it lets the image
    // open from its cell.
    items: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            lgSize: '1600-1200',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            lgSize: '1600-1200',
        },
    ];

    carousel = viewChild.required<ElementRef<HTMLElement>>('carousel');

    constructor() {
        let flickity: Flickity | undefined;
        // True from the start of a drag until the click that ends it
        let dragged = false;

        // Create the carousel once its cells are in the page
        afterNextRender(() => {
            const element = this.carousel().nativeElement;

            flickity = new Flickity(element, {
                cellAlign: 'center',
                pageDots: false,
                contain: true,
                autoPlay: true,
                on: {
                    pointerDown() {
                        dragged = false;
                    },
                    dragStart() {
                        dragged = true;
                    },
                },
            });

            // Stop the click that ends a drag before it reaches the cell
            element.addEventListener(
                'click',
                (event) => {
                    if (dragged) {
                        dragged = false;
                        event.preventDefault();
                        event.stopPropagation();
                    }
                },
                true,
            );
        });
        inject(DestroyRef).onDestroy(() => flickity?.destroy());
    }
}
```

##### SCSS (Optional)

```scss
.flickity-slider {
    .lg-item {
        img {
            height: 600px;
        }
    }
}
```


---

# Owl Carousel demo with lightbox gallery

> Owl Carousel slider demo with a lightbox gallery on every slide, full-screen images and video, thumbnails and zoom, in a few lines of code.

[Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/) is a touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. Owl can be used for creating beautiful image galleries with thumbnails. Here is the demo of adding lightbox gallery support for the Owl Carousel.

Canonical page: https://www.lightgalleryjs.com/demos/owl-carousel-with-lightbox/

#### Demo

##### HTML Structure

```html
<div id="owl-carousel-gallery-demo" class="owl-carousel owl-theme">
    <a data-lg-size="1600-1200" href="img/img1.jpg" class="owl-carousel-item">
        <img src="img/thumb1.jpg" />
    </a>
    <a data-lg-size="1600-1200" href="img/img2.jpg" class="owl-carousel-item">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

##### JavaScript

```js
let owl = jQuery('#owl-carousel-gallery-demo');
owl.on('initialized.owl.carousel', function (event) {
    const container = document.querySelector('.owl-stage');
    window.lightGallery(container, {
        pager: false,
        plugins: [
            lgZoom,
            lgAutoplay,
            lgFullscreen,
            lgRotate,
            lgShare,
            lgThumbnail,
        ],
        hash: false,
        preload: 1,
        selector: '.owl-carousel-item',
    });
});
owl.owlCarousel({
    center: true,
    items: 1,
    margin: 20,
});
```

##### SCSS

```scss
.owl-carousel {
    .owl-carousel-item {
        img {
            height: 300px;
        }
    }
}
```


---

# Slick slider demo with lightbox gallery

> Slick slider demo with a lightbox gallery on every slide, click a slide to open it full-screen, with thumbnails, zoom and video support.

[Slick](https://kenwheeler.github.io/slick/) is a jQuery plugin for creating versatile and responsive content sliders. Slick can be used for creating beautiful image galleries with thumbnails. Here is the demo of adding lightbox gallery support for the Slick carousel.

Canonical page: https://www.lightgalleryjs.com/demos/slick-carousel-demo/

#### Demo

 
##### HTML Structure

```html
<div id="slick-carousel-gallery-demo" class="carousel">
    <a data-lg-size="1600-1200" href="img/img1.jpg" class="lg-item">
        <img src="img/thumb1.jpg" />
    </a>
    <a data-lg-size="1600-1200" href="img/img2.jpg" class="lg-item">
        <img src="img/thumb2.jpg" />
    </a>
    <!-- more items -->
</div>
```

##### JavaScript

```js
let slickEl = document.getElementById('slick-carousel-gallery-demo');
if (slickEl) {
    var $slickDemo = $('#slick-carousel-gallery-demo');
    $slickDemo.on('init', function (event, slick, direction) {
        const container = document.querySelector('.slick-track');
        window.lightGallery(container, {
            plugins: [
                lgZoom,
                lgThumbnail,
            ],
            preload: 4,
        });
    });
    $slickDemo.slick({
        slidesToShow: 3,
    });
}
```

##### SCSS (Optional)

```scss
.carousel {
    .slick-prev,
    .slick-next {
        padding: 10px;
        position: absolute;
        top: 50%;
        z-index: 1;
        cursor: pointer;
        zoom: 2;
    }
    .slick-prev {
        left: -8px;
    }
    .slick-next {
        right: 12px;
    }
}
```


---

# React video carousel with lightbox

> Native React video carousel, slide through YouTube, Vimeo and HTML5 video inline, then expand any of them into a full-screen lightbox player.

The same inline carousel as the image version, with the Video plugin added: YouTube, Vimeo, Wistia and HTML5 video play in place, and the maximize icon expands the carousel into the full-screen lightbox. Provider slides render as poster facades until play. The full component API is in the [React package docs](https://www.lightgalleryjs.com/docs/react/).

Canonical page: https://www.lightgalleryjs.com/demos/react-video-carousel/

#### Demo

##### Inline video carousel

```tsx
import { useState } from 'react';
import { LightGallery } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Video from '@lightgallery/react/plugins/video';

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-video.css';

const videos = [
    {
        src: 'https://youtu.be/IUN664s7N-c',
        caption: <h4>Peck Pocketed by Kevin Herron</h4>,
    },
    {
        src: 'https://vimeo.com/112836958',
        poster: 'img/vimeo-poster.jpg',
        caption: <h4>Nature</h4>,
    },
];

export function VideoCarousel() {
    const [container, setContainer] = useState<HTMLElement | null>(null);

    return (
        <>
            <div className="inline-gallery-container" ref={setContainer} />
            {container && (
                <LightGallery
                    container={container}
                    open
                    closable={false}
                    showMaximizeIcon
                    slides={videos}
                    plugins={[Thumbnail, Video]}
                    thumbnail={{ thumbWidth: 130, thumbHeight: '100px' }}
                    video={{ autoplayFirstVideo: false }}
                />
            )}
        </>
    );
}
```

`autoplayFirstVideo` defaults to `true` and forces the first slide's provider
iframe to mount immediately; turning it off keeps the poster facade on every
slide until the viewer presses play.

##### CSS

```scss
.inline-gallery-container {
    width: 100%;
    height: 0;
    padding-bottom: 65%;
}
```

More in the [React package docs](/docs/react/), or see the
[React carousel](/demos/react-carousel/) and
[React video gallery](/demos/react-video-gallery/) demos.