Récemment pour un projet client nous avons du réaliser une galerie photo sur mesure, via Elementor, basée sur la maquette graphique de notre client.
Voici le rendu demandé ci contre.
Au clic sur les images en dessous, cela va changer automatiquement la grande image, un peut comme si on était dans une fiche produit avec WooCommerce par exemple.
Nativement elementor ne propose pas un tel rendu.
Pour effectuer cela, nous avons disposé deux widget : Widget Image & pour les petites images en dessous, le widget Galerie.
On ajoute ensuite dans l’onglet avancé puis classes css dans le premier widget : image-preview et dans le second widget on va mettre la classe : img-galerie
Il ne vous reste plus qu’à aller ensuite injecter le code ci-dessous dans Elementor > CodePersonnalisé > Ajouter :
<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>
