CODEWITHSUNDEEP
javascriptjquery
iamsumankarki
iamsumankarki

Reputation: 32

How to add custom triggers on lightgallery?

`https://codepen.io/sumankarki/pen/LYVxMyR`

Here is the codepen link to a basic lightgallery page. Please, open the link and cross check with the question.

As seen on the codepen, we can trigger the popup when we click on image directly. I have created two buttons named as "Autoplay" & "Fullscreen" below gallery.

The question here is, how can we target only specific tasks through button?. For example, If we click on "Autoplay" button then the gallery should autoplay with popup and same goes for "Fullscreen" for fullscreen task. Can we achieve this through custom buttons that I made?

Upvotes: 0

Views: 1594

Answers (1)

Kostas Minaidis
Kostas Minaidis

Reputation: 5516

Of course you can do that. You just need to check the lightgallery plugin documentation found here and then connect your buttons with the proper lightgallery command via a jQuery selector and event handler.

For example, for the first button -autoplay-, the code would be look like this:

$(document).ready(function() {
  $('#lightgallery').lightGallery({
    pager: true
  });

  $("li.autoplay-trigger").on("click", function(){

    $("#lightgallery a:first-child > img").trigger("click");

  });

  $("li.autoplay-fullscreen").on("click", function(){

    $("#lightgallery a:first-child > img").trigger("click");

  });

});

Since, the plugin does not seem to have an option to trigger the gallery with custom settings, one solution is to destroy the gallery when the buttons are clicked and re-initialize it with custom settings.

Here's a codepen to demonstrate this approach.

Upvotes: 1

Related Questions