Bind featherlight gallery to a button?

Question

I'm trying to bind a featherlight.js image gallery to a button.

See this pen: https://codepen.io/jasonbradberry/pen/aqjLbw

I've bound a lightbox to the button (.lightbox-trigger) with the following code:

$('#gallery-trigger').featherlightGallery('#gallery a', {});

But it just places the gallery thumbnails into the lightbox instead of the image.

What am I missing here?

score 3 · Accepted Answer · answered Feb 24 '18 at 02:09

3

Simplest is simply that click on button == click on first image.

$('#gallery-trigger').click( function() { $('#gallery a:first').click() } )

answered Feb 24 '18 at 02:09

Marc-André Lafortune

78,216
16
166
166

Much more straight forward and cleaner than trying to bind the gallery function to the button directly :-) – jasonbradberry Feb 27 '18 at 09:44

score 0 · Answer 2 · answered Aug 30 '19 at 18:52

Great answer, Marc-André, thank you for help. I want such a design that click into some large container (almost full page) will start a gallery at :first picture, but click into single picture inside that container will start with that picture. I had some problems with it (fire twice,..) and finally with your help I did:

$('#page-container').click(function(evt) {
    if ($(evt.target).closest('.gallery').length === 0) {
        $('.gallery:first').click();
    }
});
$('.gallery').featherlightGallery();

Bind featherlight gallery to a button?

2 Answers2