Vendez mieux avec une galerie média produit images et vidéos, en pur CSS
Galerie média produit (images + vidéos, pur CSS) une fonctionnalité du module Boutique e-commerce de Clustraly. La galerie média produit affiche images et vidéos d'une fiche dans une scène commutée par des miniatures en pur CSS, sans JavaScript.
Images et vidéos réunies sur une seule fiche, commutées par des miniatures 100% CSS sans JavaScript, compatibles CSP, et servies à la bonne taille sur chaque écran.
Présentez chaque produit dans une galerie qui donne envie
Vos clients hésitent moins quand ils voient vraiment le produit. La galerie média rassemble toutes les images et vidéos d'une fiche dans une seule scène, mise en avant dès l'ouverture. Quand un produit possède une vidéo, elle passe en premier, avec son poster et ses contrôles de lecture natifs.
- Images et vidéos réunies sur une même fiche
- Vidéo principale affichée en tête
- Lecture native avec contrôles standard
- Scène claire, une seule zone d'attention
Changez de média d'un clic, sans une ligne de JavaScript
La bande de miniatures fonctionne à 100% en CSS. Un clic échange la miniature active et la scène principale, sans dépendance ni script à charger. Résultat : une galerie compatible avec les politiques de sécurité les plus strictes (CSP), qui reste fonctionnelle même quand le JavaScript est bloqué.
- Commutation par boutons radio :checked
- Zéro JavaScript, zéro librairie tierce
- Compatible Content-Security-Policy (CSP)
- Fonctionne même script désactivé
La bonne image pour chaque écran, automatiquement
Chaque visuel est servi en srcset responsive sur trois largeurs (300, 768 et 1200), accompagné d'un indice sizes. Le navigateur choisit la version adaptée à l'appareil mobile, tablette ou grand écran pour un rendu net, sans réglage de votre part.
- srcset sur trois largeurs : 300 / 768 / 1200
- Indice sizes pour guider le navigateur
- Rendu adapté mobile, tablette et desktop
- Aucun réglage manuel à faire
Votre vidéo produit joue en tête et illustre la grille
Pour un produit avec vidéo, la scène s'ouvre sur celle-ci, poster affiché avant le clic. Et pour un produit en vidéo seule, c'est le poster de la vidéo qui sert de vignette dans la grille du storefront. Vos contenus animés gagnent en visibilité, de la liste jusqu'à la fiche.
- Vidéo principale présentée en premier
- Poster affiché avant lecture
- Poster réutilisé comme vignette de grille
- Cohérence entre liste et fiche produit
Jamais de fiche sans visuel, jamais de dépendance fragile
Si un produit n'a pas encore de médias enfants, la galerie retombe proprement sur son image unique historique. Aucune fiche ne s'affiche vide, et rien ne vous force à tout migrer d'un coup. Comme tout repose sur du CSS, il n'y a pas de script à maintenir ni à sécuriser.
- Repli automatique sur l'image legacy
- Aucune fiche produit vide
- Transition en douceur depuis l'existant
- Rien à maintenir côté script
Vous choisissez la mise en scène, la galerie s'occupe du reste
Depuis l'admin, vous sélectionnez les médias et désignez la vidéo principale. La galerie assemble ensuite images et vidéos en pur CSS, les sert à la bonne taille et retombe sur votre image existante si besoin. Vous gardez la main, sans toucher au code.
Questions fréquentes
La galerie a-t-elle besoin de JavaScript ?
Puis-je afficher une vidéo produit ?
Les images sont-elles adaptées aux mobiles ?
Que se passe-t-il si un produit n'a pas de médias ?
Fonctionnalités liées
Une galerie média produit qui vend, sans complexité technique
Réunissez images et vidéos, laissez le navigateur servir la bonne taille et gardez une fiche toujours illustrée le tout en pur CSS, sans JavaScript ni dépendance. Vous décidez de la mise en scène, Clustraly l'affiche proprement sur chaque écran.