Recently for a client project, we had to create a tailor-made photo gallery, via Elementor, based on our client’s graphic model.
Here is the requested rendering opposite.
When you click on the images below, this will automatically change the large image, almost as if you were in a product sheet with WooCommerce for example.
Natively Elementor does not offer such rendering.
To do this, we have two widgets: Image Widget & for the small images below, the Gallery widget.
We then add in the advanced tab then css classes in the first widget: image-preview and in the second widget we will put the class: img-gallery
All you have to do is inject the code below into Elementor > CustomCode > Add:
<script>
document.addEventListener('DOMContentLoaded', function() {
const galleryItems = document.querySelectorAll('.e-gallery-item');
const previewImage = document.querySelector('.image-preview img');
galleryItems.forEach(item => {
item.addEventListener('click', function() {
const imageUrl = item.querySelector('.e-gallery-image').style.backgroundImage.slice(5, -2);
previewImage.src = imageUrl;
previewImage.srcset = imageUrl; // Mettre à jour également srcset
});
});
});
</script>
