My client wants a thumbnail gallery on his website and I just noticed that the Bricks “Image Gallery” is very basic and doesn´t seem to have this option… From my experience as web developer over the years this is something that I´ve implemented a lot for clients when I still worked with Elementor. For these websites I used Crocoblock and their image gallery which worked perfectly. Unfortunately Crocoblock isn´t fully compatible with Bricksbuilder yet and my client wants to keep the costs as low as possible which is why I´m looking for a different way to do this.
I´m actually a bit surprised that this doesn´t seem to be possible natively with Bricks cause it has been requested by clients a lot.
Does anyone have an idea how this can be solved? I really appreciate any help here!
You can easily build your own using a loop, just loop through your images and make sure to set the image that is part of your loop to open in a lightbox and set a lightbox:ID so that they can be linked in the lightbox for navigation.
Means you have your “slider” with the thumbnails below and once you click on the image, the image opens in a lightbox and the thumbnails below disappear.
I´m sorry if my original post was a bit misleading cause I probably described it more as an “Image Gallery” even though it´s probably a thumbnail slider. I´ll quickly change the title.
You can kind of get that effect in the lightbox by enabling Thumbnail navigation, otherwise you would have to build your own JS to change the large image as per your example.
I’m in the same boat as you. I have clients wanting this too. It should be possibly natively by Bricks because the Carousel element (e.g gallery) is using the SwiperJS library that already has this functionality. So it’s only about implementation by Bricks.
There are other great functionalities that SwiperJS already has but not implemented by Bricks. But lets hope they do!
The easiest solution (at least for me) is to use SplideJS’s native thumbnail function: https://splidejs.com/ (Scroll down a bit to see it.)
It requires a bit of custom code, but it has worked perfectly on my clients’ websites—even with multiple thumbnail sliders on one page.
I’ve tried other solutions as well, but unfortunately, none of them worked great for me. And since SplideJS offers this feature by default, why not use it?
I’m not a programmer, but the code ChatGPT provided works perfectly for me:
<script>
document.addEventListener("DOMContentLoaded", async () => {
// Dynamically define slider pairs
const sliderPairs = [
{ main: '#main-slider1', thumb: '#thumbnail-slider1' },
{ main: '#main-slider2', thumb: '#thumbnail-slider2' }
];
// Loop through each slider pair
for (const { main, thumb } of sliderPairs) {
let attempts = 0;
const maxAttempts = 20; // Maximum number of attempts
const intervalDelay = 200; // Delay between attempts (in milliseconds)
// Try to synchronize sliders until the instances are available
while (attempts < maxAttempts) {
const mainEl = document.querySelector(main);
const thumbEl = document.querySelector(thumb);
const mainScriptId = mainEl?.dataset.scriptId;
const thumbScriptId = thumbEl?.dataset.scriptId;
if (mainScriptId && thumbScriptId) {
const mainInstance = bricksData.splideInstances[mainScriptId];
const thumbInstance = bricksData.splideInstances[thumbScriptId];
if (mainInstance && thumbInstance) {
console.log(`Synchronizing sliders: ${mainScriptId} and ${thumbScriptId}`);
mainInstance.sync(thumbInstance); // Perform synchronization
break;
}
}
attempts++;
await new Promise(resolve => setTimeout(resolve, intervalDelay));
}
if (attempts >= maxAttempts) {
console.error(`Synchronization failed for sliders ${main} and ${thumb}.`);
}
}
});
</script>
Honestly, I like this approach even more than simply having a checkbox like “Enable thumbnails” on the slider element or adding a separate thumbnail slider in Bricks.
This method with synced sliders gives you maximum flexibility in styling both the main slider and the thumbnail slider.
Of course, this is just my personal opinion—others might prefer a different solution. I just like to stick with what SplideJS already offers.
