How to set Featherlight Gallery current image when calling multiple times?

Question

The main problem I'm looking at right now is the next/previous buttons are not working as expected after featherlightGallery() has been called more than once - The first click on the next button always shows the first image while the previous button always shows the 2nd to last image.

GitHub

The idea is to show the first 4 thumbnails from a gallery on a page.

When one of these thumbnails is clicked, the (hidden) gallery opens via featherlight, a click is triggered on the related image in the gallery, and the gallery behind the image is closed. This leaves the viewer with the image they clicked and the next/previous buttons. (ignore the lack of styling!)

Every time these thumbnails are clicked, the next/previous buttons work as expected, displaying adjacent images in the gallery.

The first 4 images from the gallery shown on the page: (# is substituted for actual numbers. The data-click attr is used in JS to trigger a click on the related gallery image)

<div id="intro-gallery">
    <a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
    <a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
    <a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
    <a data-click="gi-#" class="intro" href="img/#.jpg"><div class="intro" style="background-image: url('img/#.jpg');"></div></a>
</div>

Clicking this link opens the featherlight div without triggering any clicks or hiding the gallery (with JS).

<p><a class="link" href="#main-gallery-container">Gallery</a></p>

The first time the link is clicked, the gallery is shown and the user clicks a thumbnail, the next/previous buttons work as expected. Since the gallery is hidden after user clicks a thumbnail, they need to click the Gallery button again to see all the thumbs - at this point, after clicking another thumbnail, the next button always shows the first image and the previous button shows the 2nd to last image. Seems like the current image is set to the last image in this case.

Inside this #main-gallery div are 12 .gallery-item divs (1 shown for brevity).

<div id="main-gallery" data-featherlight-gallery data-featherlight-filter=".mgi">
    <div class="gallery-item">
        <a class="main" id="gi-#" href="#mgi-#">
            <div class="thumb-holder" style="background-image: url('img/{$x}.jpg');"></div>
        </a>
        <div class="mgi-wrapper">
            <div id="mgi-#" class="mgi">
                <div class="mgi-image" style="background-image: url('img/#.jpg');">
                </div>
                <div class="mgi-text">
                    <p>Some text goes here</p>
                </div>
            </div>
        </div>
    </div>
</div>

JS

"use strict";

(function ($) {
  $(function () {
    $('a.link').click(function (e) {
  e.preventDefault();
  $.featherlight.close();
  $.featherlightGallery.close();
  initGallery();
}); // Add link to view gallery, bind click.

$.featherlightGallery.prototype.afterOpen = function () {
  var link = $('<span class="single-gallery-link"><a class="link" href="#main-gallery-container">View Gallery Images</a></span>');
  $('.featherlight.single .featherlight-content').prepend(link);
  $(link).click(function () {
    $.featherlight.close();
    $.featherlightGallery.close();
    initGallery();
  });
};

$('a.intro').click(function (e) {
  e.preventDefault();
  initGallery(); // get ID from data-att of initial thumbnail

  var id = $(this).data('click'); // Get same thumb in gallery and trigger a click

  var thumb = document.getElementById(id);
  $(thumb).click();
});
$('#link').click(function (e) {
  e.preventDefault();
  initGallery();
});

var switchToGallery = function switchToGallery(e) {
  // prevent triggered click
  e.preventDefault();
  $.featherlight.close();
  $.featherlightGallery.close();
  initGallery();
};

var initGallery = function initGallery() {
  $.featherlight('#main-gallery', {
    variant: 'onclick',
    afterOpen: function afterOpen() {
      $('a.main').featherlightGallery({
        targetAttr: 'href',
        variant: 'single',
        beforeOpen: function beforeOpen() {
          $.featherlight.close();
        }
      });
    }
  });
};
}); 
//https://stackoverflow.com/a/52611202/774793
//$.featherlightGallery($(".column"), {$currentTarget: $('the first item, maybe this in your case?')});
})(jQuery);
//# sourceMappingURL=index.js.map

EDIT: I don't like posting URLs with a limited lifespan here but for the sake of solving the problem - temporary example

Answer 1

The library is confused, $.featherlightGallery.current().$currentTarget[0] seems to be a detached copy and not part of $.featherlightGallery.current().slides() so navigation is lost.

I'm not too sure what is going on and don't have the time to delve into it further. I would try with persist: true. Also looks like you are constantly re-initing the gallery, you should bind it once.