Is it possible to trigger a data-featherlight-gallery from another element?

Question

I am trying to trigger a hidden "lightbox" gallery from another element. In this scenario there is a trigger and a data-featherlight-gallery. The trigger should pop the light box just as if you would be clicking the links inside the 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>

I have made a JSfiddle: http://jsfiddle.net/joaoalvesmarrucho/JNsu6/595/

Would appreciate any help.

I think only fancybox has built-in functionality for this, see last example here - https://codepen.io/fancyapps/pen/VyLOJX?editors=1000 — Janis, May 11 '18 at 06:44

score 0 · Accepted Answer · answered May 09 '18 at 20:42

I'm not very familiar with the data-feather library, but it seems like what you want to do is only display the first image in the gallery. If that is the case, we can do this with some minor CSS like:

#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>

Note the addition of an gallery id to the data-feather div and the css style that hides all a child elements except for the first.

Is it possible to trigger a data-featherlight-gallery from another element?

1 Answers1