How to make featherlight gallery work with custom trigger and different markup?

Question

I looked at many featherlight.js posts already, but just could not work out how to make the gallery work without a tags etc.

My example is here: http://jsfiddle.net/pwLnrmoc/5/

HTML Code:

<h3>Gallery with different Markup</h3>
<p>Works fine as "single" featherlight, but not as a gallery. I do not want to introduce a tags to make this work as a gallery. What needs to change in the JS to make this work as a gallery?</p>
<ul class="gallery">
  <li class="gallery__item">
    <div class="buttons">
      <button class="openLightbox">Open in lightbox</button>
      <button class="openLightboxGallery">Open in lightbox gallery</button>
      <figure class="lightboxContent">
        <h3>Item 1</h3>
        <img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg" />
    </figure>
    </div>
    <img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" />
  </li>
    <li class="gallery__item">
    <div class="buttons">
      <button class="openLightbox">Open in lightbox</button>
      <button class="openLightboxGallery">Open in lightbox gallery</button>
      <figure class="lightboxContent">
        <h3>Item 2</h3>
        <img src="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg" />
    </figure>
    </div>
    <img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" />
  </li>
    <li class="gallery__item">
    <div class="buttons">
      <button class="openLightbox">Open in lightbox</button>
      <button class="openLightboxGallery">Open in lightbox gallery</button> 
      <figure class="lightboxContent">
        <h3>Item 3</h3>
        <img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg" />
    </figure>
    </div>
   
    <img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" />
  </li>
</ul>

JS Code:

$(document).ready(function(){
  $('.openLightbox').click( function(evt) {
    const $target = $(evt.currentTarget);
    const $figure = $target.siblings('figure');
    console.log($figure.length);
    // to open in a single slide
        $.featherlight($figure);
  })
  
  $('.openLightboxGallery').click( function(evt) {
    const $target = $(evt.currentTarget);
    const $figures = $target.closest('.gallery').find('figure');
    console.log($figures.length);
    // to open in a gallery
        $.featherlightGallery($figures);
  })
});

It works fine with the "single" featherlight button, but not with the gallery. I do not know how to set the content filter or target in my case. That's the error: Featherlight: no content filter found (no target specified).

Ideally the way you call featherlight and featherlightGallery should be consistent and work the same way.