Methods

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

Access plugin instance

lightGallery plugin instance can be accessed in two ways, through the lightGallery function and through the lightGallery custom init event.

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

// Get the plugin instance through the lightGallery main function
const plugin = lightGallery(lg);

// or get thought init event
// let plugin = null;
// lg.addEventListener('lgInit', (event) => {
//   plugin = event.detail.instance;
// });

// Go to third slide
// Index starts from 0
plugin.slide(2);

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.

Name: closeGallery

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

Example: 


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

Name: destroy

Description: Destroy lightGallery. Destroy lightGallery and its plugin instances completely

This method also calls CloseGallery function internally. Returns the time 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 times.

Example: 


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

Name: goToNextSlide

Description: Go to next slide

Example: 


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

See also:Demo

Name: goToPrevSlide

Description: Go to previous slides

Example: 


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

See also:Demo

Name: openGallery

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

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

Name: refresh

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

See also:Demo

Example: 


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

Name: slide

Description: Goto a specific slide.

Example: 


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

Name: toggleMaximize

Description: Maximize minimize inline gallery.

Name: updateSlides

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

Note :

  • Do not mutate existing lightGallery items directly.
  • Always pass new list of gallery items
  • You need to take care of thumbnails outside the gallery if any
  • user this method only if you want to update slides when the gallery is opened. Otherwise, use refresh() method.

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(updateSlideInstance.galleryItems),
);
galleryItems.shift();
updateSlideInstance.updateSlides(galleryItems, 1);

See also:Demo

Edit this page on GitHub

← Events
Dynamic variables →