Как добавить пользовательские триггеры на Lightgallery?

Question

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

Вот ссылка на кодовую страницу для базовой страницы c lightgallery. Пожалуйста, откройте ссылку и перепроверьте с вопросом.

Как видно на коде, мы можем вызвать всплывающее окно, когда нажимаем на изображение напрямую. Я создал две кнопки с именами «Автоигра» и «Полноэкранный режим» под галереей.

Вопрос здесь в том, как мы можем нацеливать только определенные c задачи с помощью кнопки ?. Например, если мы нажмем кнопку «Автозапуск», то галерея должна автоматически воспроизвести всплывающее окно, и то же самое можно сказать о «Полноэкранном режиме» для полноэкранного задания. Можем ли мы добиться этого с помощью пользовательских кнопок, которые я сделал?

Answer 1

Конечно, вы можете сделать это. Вам просто нужно проверить найденную документацию lightgallery для плагина здесь , а затем соединить ваши кнопки с правильной командой lightgallery через селектор jQuery и обработчик событий.

Например, для первой кнопки -autoplay- код будет выглядеть следующим образом:

$(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");

  });

});

---

Поскольку плагин, похоже, не имеет опции для запуска галереи с пользовательскими настройками, одно из решений уничтожить галерею при нажатии на кнопки и повторно инициализировать ее с пользовательскими настройками.

Вот кодовое поле , чтобы продемонстрировать этот подход.