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:
6 comments
Harry Thomas
Tried the new code – still not working. But I thank you for writing it; my JS skills are not the best.
David Browne
Unless I’m misunderstanding what you’re trying to do, it all appears to be working now on your page.. all the gallery buttons are opening up the galleries inside a lightbox.
https://www.loom.com/share/815e34c96aae490986d6c9bb225b68bf
Harry Thomas
Hmm – guess I was thrown off by the fact that the pointer didn’t change when I moused over it. Thank you for your help!
David Browne
Ideally, make it a link or button so it’s clickable / focusable.
Harry Thomas
On Step 2 – don’t we have to define the “Link” status on the button?
I created, then hid the gallery on Step 1, then created a button and added in the JS code for the page. But the Bricks button is not a button, nor does the JS code define it as such.
Please advise.
https://staging.hmt3design.com/portfolio/graphics/
David Browne
The only reason it isn’t working on your page is because you have multiple buttons, all with the same ID. So the JS will only pick up the first one. If using multiple, use the classes instead and use forEach to loop through them..
ie replace step 3 with this..
https://gist.github.com/wplit/d40d920d5ddb1885a51bb1fa0bb9000b