Open posts grid featured images in lightbox

This is a Beaver Builder Posts module showing only posts featured images in a grid.
Click an image to display it in a custom BB Lightbox with animations and gallery mode.

HTML

This is the Posts module custom layout.
Images open in BB Lightbox thanks to the lightbox class set on the link.

[wpbb-if post:featured_image]
	<a href="[wpbb post:featured_image size='full' display='url']" class="lightbox"><img decoding="async" src="[wpbb post:featured_image size='large' display='url']" /></a>
[/wpbb-if]

Custom BB Lightbox init (Magnific Popup) to handle animations and gallery mode.
See Magnific Popup documentation

jQuery(document).ready(function($) {
    $('.lightbox').magnificPopup({ 
        type: 'image',
        removalDelay: 300,
        gallery:{
            enabled:true, 
            navigateByImgClick: true,
        }
    });
});

CSS

BB Lightbox custom styles for animations.

/* overlay at start */
.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
}
/* overlay animate in */
.mfp-bg.mfp-ready {
    opacity: 0.85;
}
/* overlay animate out */
.mfp-bg.mfp-removing {
    opacity: 0;
}

/* content at start */
.mfp-wrap .mfp-content {
    opacity: 0;
    transform: translate(0, -40px);
    transition: all 0.3s ease-out;
}
/* content animate it */
.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
    transform: translate(0, 0);
}
/* content animate out */
.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

/* Gallery animation */

@Keyframes fadeIn {
    0% { opacity: .75; left: 50px; }
    100% { opacity: 1; left: 200px; }
}
@Keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.mfp-gallery.mfp-ready .mfp-content {
    animation-name: fadeIn;
    animation-duration: .5s;
    animation-fill-mode: both;
}
.mfp-gallery.mfp-removing .mfp-content {
    animation-name: fadeOut;
    animation-duration: 0;
    animation-fill-mode: both;
}

.mfp-content .mfp-close {
    display: none;
}
img.mfp-img {
    max-height: 90vh !important;
}

Open posts grid featured images in lightbox

Open posts grid featured images in lightbox

WP Gridbuilder Facets for BB Posts module (WPGB add-on)

WP Gridbuilder Facets for BB Posts module (custom)

Format numbers

Custom columns

Custom Tabs module

Slanted row edges

Open posts grid featured images in lightbox

Animated letters with anim.js

QA Accordion Grid

Clickable row with JS

Reveal elements on scroll with Waypoints

Panorama with Paver

CSS animation

CSS visual effects

Categories grid with Custom Content Shortcode

Beaver Builder custom module: Photo Swap

Bootstrap plugins

WooCommerce

Menu modules

Highlight menu items on a One Page

Beaver Builder: hide row if empty field connection

Ajax Search in modal box