API Docs

Methods

View as Markdown Open in Claude Open in ChatGPT

Call methods on the gallery instance to open, close, move between slides or update the gallery from your own code. Demo

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

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:

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, a template ref in Vue and a #lg="lgGallery" template reference in Angular.

Vanilla methodHandle 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(force?)

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

Parameters
Name Type Description
force boolean
Example 
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.

Example 
const plugin = lightGallery();
 plugin.destroy();

goToNextSlide(fromTouch?)

Go to next slide

Parameters
Name Type Description
fromTouch boolean true if slide function called via touch event
Example 
const plugin = lightGallery();
 plugin.goToNextSlide();

See also Demo

goToPrevSlide(fromTouch?)

Go to previous slide

Parameters
Name Type Description
fromTouch boolean true if slide function called via touch event
Example 
const plugin = lightGallery({});
 plugin.goToPrevSlide();

See also Demo

openGallery(index?, element?)

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

Parameters
Name Type Description
index number index of the slide
element HTMLElement Which image lightGallery should zoom from
Example 
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(galleryItems?)

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

Parameters
Name Type Description
galleryItems GalleryItem[]
Example 
const plugin = lightGallery();
 // Delete or add children, then call
 plugin.refresh();

See also Demo

slide(index, fromTouch?, fromThumb?, direction?)

Goto a specific slide.

Parameters
Name Type Description
index number index of the slide
fromTouch boolean true if slide function called via touch event or mouse drag
fromThumb boolean true if slide function called via thumbnail click
direction false | SlideDirection Direction of the slide(next/prev)
Example 
const plugin = lightGallery();
 // to go to 3rd slide
 plugin.slide(2);

updateSlides(items, index)

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

Parameters
Name Type Description
items GalleryItem[] Gallery items
index number After the update operation, which slide gallery should navigate to
Example 
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);

See also Demo

Edit this page on GitHub