Create a custom gallery layout + lightbox functionality including next / prev navigation buttons

*Custom gallery and Magnific Popup.md

You need a custom layout of images instead of an 'out of the box' gallery layout, but then you still want them clickable inside a lightbox with navigation buttons to go between images while staying inside the lightbox

Requirements:

1. Put your photos in a container/row with ID of #gallery
2. If you're using BB with photo modules, make sure Link Type is set to none in the module settings (not Lightbox)
3. Have magnificPopup enqueued. If you're using BB Theme, you can enable it in Customizer > Content > Lightbox. If not, you can enqueue it yourself
4. line 14 in the js is telling it to look at data-src to get the image URL - this is because I use lazy loading and this is where the URL is stored before loading. If you aren't using lazy loading, change line 14 to item.src = item.el.attr('src');

Customize as you need: https://dimsemenov.com/plugins/magnific-popup/documentation.html#gallery

custom-beaver-builder-gallery-styles.css

/* Hide gallery nav when first/last */
.mfp-gallery .mfp-first .mfp-arrow-left, 
.mfp-gallery .mfp-last .mfp-arrow-right {
    display: none;
}

/* Normal cursor on gallery images since 'click to navigate' is disabled */
.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: default;
}

/* Pointer cursor since we are doing a custom Magnific Popup gallery */
#gallery .fl-photo{
    cursor: pointer;
}

custom-beaver-builder-gallery.js

jQuery(document).ready(function($) {
    $('#gallery img').magnificPopup({ // Selector for your gallery images
        type: 'image',
        gallery: {
            enabled: true,
            navigateByImgClick: false
        },
        image: {
          titleSrc: '' // Removes the caption from the lightbox markup -> mfp-title
        },
        callbacks: {
            elementParse: function(item) {
                item.src = item.el.attr('data-src'); // Use the "data-src" attribute because of lazy loaded images
            },
            
            // Eliminate Gallery Loop - https://github.com/dimsemenov/Magnific-Popup/issues/342
            open: function() {
                var mfp = jQuery.magnificPopup.instance;
                var proto = $.magnificPopup.proto;

                // Extend function that moves to Next button
                mfp.next = function() {

                    // If index is not last, call parent method
                    if (mfp.index < mfp.items.length - 1) {
                        proto.next.call(mfp);
                    }
                };

                // Same with Previous button
                mfp.prev = function() {
                    if (mfp.index > 0) {
                        proto.prev.call(mfp);
                    }
                };

                // Hide gallery nav when on and first/last image
                if (mfp.index >= mfp.items.length - 1) {
                    $(".mfp-container").addClass("mfp-last");
                } else {
                    $(".mfp-last").removeClass("mfp-last");
                }
                if (mfp.index == 0) {
                    $(".mfp-container").addClass("mfp-first");
                } else {
                    $(".mfp-first").removeClass("mfp-first");
                }

            },

            // Repeat because there's not a callback that encompasses both 'open' and 'change'
            change: function() {
                var mfp = jQuery.magnificPopup.instance;

                // Hide gallery nav when on and first/last image
                if (mfp.index >= mfp.items.length - 1) {
                    $(".mfp-container").addClass("mfp-last");
                } else {
                    $(".mfp-last").removeClass("mfp-last");
                }
                if (mfp.index == 0) {
                    $(".mfp-container").addClass("mfp-first");
                } else {
                    $(".mfp-first").removeClass("mfp-first");
                }

            }
        }
    });
});