Можно ли запустить data-featherlight-gallery из другого элемента? - PullRequest
Новая
       41

Можно ли запустить data-featherlight-gallery из другого элемента?

0 голосов
/ 09 мая 2018

Я пытаюсь вызвать скрытую галерею «лайтбокс» из другого элемента. В этом сценарии есть триггер и data-featherlight-gallery . Триггер должен открыть лайтбокс, как если бы вы щелкали ссылки внутри data-featherlight-gallery .

HTML 

// when you click on this div
<div class="trigger"> 
  <a href="#"></a><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
</div>
<hr>
// you should be able to trigger the behaviour of this featherlight gallery
<div class="toggle">
  <h3>Gallery</h3>
  <div data-featherlight-gallery data-featherlight-filter="a">
    <a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
    <a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg"><img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /></a>
    <a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg"><img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /></a>
  </div>
</div>

Я сделал JSfiddle: http://jsfiddle.net/joaoalvesmarrucho/JNsu6/595/

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 09 мая 2018

Я не очень знаком с библиотекой данных-перьев, но похоже, что вам нужно только показать первое изображение в галерее. Если это так, мы можем сделать это с некоторыми незначительными CSS, такими как: 

#gallery>a ~ a {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.js"></script>
<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.gallery.js"></script>

<link href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.css" rel="stylesheet"/>
<link href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.gallery.css" rel="stylesheet"/>

<div>
  <h3>Gallery</h3>
  <div id="gallery" data-featherlight-gallery data-featherlight-filter="a">
    <a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
    <a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg"><img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /></a>
    <a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg"><img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /></a>
  </div>
</div>

Обратите внимание на добавление идентификатора gallery в div data-feather и стиль css, который скрывает все дочерние элементы a, кроме первого.

...