Откройте lightgallery.js программно - PullRequest
Новая
       28

Откройте lightgallery.js программно

0 голосов
/ 19 февраля 2019

Так что я использую https://sachinchoolur.github.io/lightgallery.js/ для своей галереи, и это здорово.

Когда пользователь нажимает и изображение открывается, и все хорошо. 

<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery')); 
</script>

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

Давайте представим, что это тег 

<a id="magic_start" href="">

Я думал, что я 'Я мог бы сделать это: 

$("#magic_start").click(function(e) {
  e.preventDefault();
  $("#lightgallery li:first-child a").trigger();
});

Я также пытался нажать, () и вызвать ('щелкнуть'), но они не работают.

Я думаю, потому что lightgallery.Это мой собственный человек, так сказать.

Но это ничего не делает.Нет ошибок, но ничего не происходит.

Есть предложения?

Редактировать:

Мой текущий обходной путь ... 

window.location.href = window.location.href + "#lg=1&slide=0";
location.reload();

Но это требуетиз UX из-за необходимости перезагрузки страницы.

1 Ответ

0 голосов
/ 19 февраля 2019

Функция trigger должна вызываться для элемента img, а не для внешнего элемента a. 

lightGallery(document.getElementById('lightgallery'));

$("#magic_start").on("click", () => {
    $("#lightgallery a:first-child > img").trigger("click");
});
<!-- lightgallery and jQuery vendor CSS/JS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/css/lightgallery.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/sachinchoolur/lightgallery.js/master/dist/js/lightgallery.js"></script>

<a id="magic_start" href="#">CLICK TO OPEN</a>

<div id="lightgallery">
    <a href="https://via.placeholder.com/350">
        <img src="https://via.placeholder.com/150" />
    </a>
    <a href="https://via.placeholder.com/350">
        <img src="https://via.placeholder.com/150" />
    </a>
</div>
...