Load more button for Bricks Gallery and Limiting the Number of Displayed Images

min read / Bricks Builder, Custom Code, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: If you like to hide your Bricks Builder gallery until user click on show more button, let’s do it! Step 1: Structuring the Gallery Ensure your gallery in Bricks Builder is structured with a specific class, like .product__gallery. By default, each image item has a consistent class .bricks-layout-item. Just ensure if it doesn’t changed in…

If you like to hide your Bricks Builder gallery until user click on show more button, let’s do it!

Step 1: Structuring the Gallery

Ensure your gallery in Bricks Builder is structured with a specific class, like .product__gallery. By default, each image item has a consistent class .bricks-layout-item. Just ensure if it doesn’t changed in meantime.

I use .product__gallery in the example code below.

Step 2: Adding the ‘Show More’ Button

Add a ‘Show More’ button with unique class, such as .product__gallery__more.

I use .product__gallery__more in the code example below.

Step 3: Writing the JavaScript

Add a code block to utilize JavaScript to initially limit the display to a specific number of images. I use 4 images in example (feel free to change it). And then reveal the rest upon clicking the ‘Show More’ button.

document.addEventListener('DOMContentLoaded', function () {
    var maxVisibleImages = 4; // change to your needed count
    var galleryItems = document.querySelectorAll('.product__gallery .bricks-layout-item');
    var loadMoreButton = document.querySelector('.product__gallery__more');

    // Hide images
    galleryItems.forEach(function (item, index) {
        if (index >= maxVisibleImages) {
            item.style.display = 'none';
        }
    });

    // Add listener
    loadMoreButton.addEventListener('click', function () {
        galleryItems.forEach(function (item) {
            item.style.display = 'block';
        });

        // Hide button after displaying all images
        loadMoreButton.style.display = 'none';
    });
});

4. Test it!

After reload, your images should be hidden after page load and displayed after click on the button.

0 comments