Methods demo

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

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

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>
</>;

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

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' },
    ];
}