Demos

HTML markup

View as Markdown Open in Claude Open in ChatGPT

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.

Open in StackBlitz
Open in StackBlitz
Open in StackBlitz
Open in StackBlitz

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

lightGallery(document.getElementById('anchor-tag'));
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>;
<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>
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' },
    ];
}

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

lightGallery(document.getElementById('ul-li'));
// `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>
<!-- 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>
<!-- 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.

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

lightGallery(document.getElementById('selector1'), {
    selector: '.item',
});
<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>
<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>
<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>

HTML

<a id="selector2" href="img/img1.jpg"> Click to open </a>

JavaScript

lightGallery(document.getElementById('selector2'), {
    selector: 'this',
});
<LightGallery>
    <LightGalleryItem item={{ src: 'img/img1.jpg' }} href="img/img1.jpg">
        Click to open
    </LightGalleryItem>
</LightGallery>
<LightGallery>
    <LgItem :item="{ src: 'img/img1.jpg' }">Click to open</LgItem>
</LightGallery>
<lg-gallery>
    <a href="img/img1.jpg" [lgGalleryItem]="{ src: 'img/img1.jpg' }">
        Click to open
    </a>
</lg-gallery>

Edit this page on GitHub