50% discount on BricksLabs Pro Membership Lifetime Access. Use coupon: GOBRICKS

Button to Open Bricks Gallery

This Pro tutorial provides the steps to trigger a click on the first image of a gallery in Bricks when a button is clicked.

We are going to set a fixed height for the gallery with overflow: hidden so that only a few images will be shown and the user can either click on any of the images or on the "View All Photos" button and browse all of them in the lightbox.

Step 1

Edit your Template/Page with Bricks.

Add a Section.

Add a Image Gallery element inside the Section's container.

Select/upload your desired images or if you have a ACF Gallery field or Meta Box Advanced Image field set up, select it as the source of images.

Link to: Lightbox.

STYLE → LAYOUT: Set a Max. height (534px in my test site).

Overflow: hidden

Step 2

Add a Button element below the Image Gallery.

Position: Absolute
Right: 20px
Bottom: 0

Step 3

Click on the Settings (gear) icon → PAGE SETTINGS → CUSTOM CODE and paste the following under Body (footer) scripts:

This is a Pro members-only tutorial.

To get full access, login below or sign up for a Pro Account

Leave the first comment