Open a Gallery (lightbox) from a button or hyperlink

the button is there too!

It turns out to be very complex if you first want to open the gallery preview in the modal window, and then the items with the next click.

Example Page :
give to the button element a custom class f.e.: link_to_lightbox and link to an ID.
( or if you got many links inside to perform : give that class to a parent-elment (f.e. color-section) )

place your galleries on your page (preferably behind your other content on the site.)
Style them as lightbox galleries!
those galleries must have now a unique ID (that corresponds with your link ID’s) and a custom class: mfp-hide

put this to your child-theme functions.php:

function link_to_gallery_first_item_in_lightbox() {
?>
<script type="text/javascript">
(function($) {
    $(document).on('click', '.link_to_lightbox a', function(event) { 
        event.preventDefault();
        var linkTarget = $(this).attr('href');
        $(linkTarget).find("a.first_thumb").click();
    });
})(jQuery);
</script>
<?php
} 
add_action('wp_footer', 'link_to_gallery_first_item_in_lightbox');

try this first instead:

function link_to_gallery_first_item_in_lightbox() {
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
(function($) {
  $('.link_to_lightbox a').addClass('no-scroll');
    $(document).on('click', '.link_to_lightbox a', function(event) { 
        event.preventDefault();
        var linkTarget = $(this).attr('href');
        $(linkTarget).find("a.first_thumb").click();
    });
})(jQuery);
}); 
</script>
<?php
} 
add_action('wp_footer', 'link_to_gallery_first_item_in_lightbox');

If you have installed a plugin like “Page scroll to id” – then we had to adjust it too.