Pages :
Bonjour,

Je veux créer ce que l'on voit partout.

Une image principale, des images alternatives en vignettes.

Quand on clique sur une vignette elle devient l'image principale.

Et la zone d'image principale peut fonctionner comme un diaporama avec boutons pour avancer dans un sens ou dans l'autre.

J'aimerais un code avec le minimum de JS possible.

Ce ne doit pas être trop compliqué mais autant s'inspirer de codes déjà existants.

Je crois savoir que cela a un nom, j'ai cherché Diaporama sur ce forum, ce n'est pas exactement ce que je cherche.

Un exemple simple, sans les boutons de défilement.

upload/1749489264-58253-2025-06-09190711-window.png

Si j'ai pour commencer j'ai le nom de ce truc cela peut m'aider (et je changerais le titre de la discussion).

Merci d'avance.
Modifié par boteha_2 (10 Jun 2025 - 11:51)
Bonjour Mathieuu,

Carrousel, merci pour le nom.

Je n'utilise pas boostrap, le code est fait à la main.

Je vais chercher.
Bonjour,

gcyrillus a écrit :
Voici un exemple basique pour 3 images (thumb + taille normale) avec :focus et un display en grid : https://codepen.io/gc-nomade/pen/WbvdLzG


Je me suis inspiré de ton code et j'ai quelques problèmes.

Première chose à laquelle je ne comprends rien, cela fonctionne avec :hover mais pas avec :focus.

Sans voir mon code, avez-vous une idée ?

Par ailleurs, quand les images sont en display: none, sont-elles quand même chargées (il me semble que oui) ?
Si oui cela m'ennuie un peu car il peut y avoir pas mal d'images et cela alourdit la page.
Dans ce cas je préférerais une solution JS si elle permet de ne charger qu'une seule fois les images.

Ou une transition pour déplacer la vignette dans la zone de l'image principale en changeant sa taille, et inversement placer l'image principale en vignette, est-ce une piste viable ?
Modifié par gcyrillus (22 Jun 2025 - 21:03)
Modérateur
boteha_2 a écrit :
Bonjour,

Première chose à laquelle je ne comprends rien, cela fonctionne avec :hover mais pas avec :focus.

Sans voir mon code, avez-vous une idée ?


Bonjour,

As tu disposé l'attribut tabindex sur les images à cliquer ?
cela évite
- de les mettre dans un lien
- de poser des id sur les images de grandes tailles.
- de faire sauté/scrollé la page à hauteur de l'image en :target
- de faire usage de js comme tu le souhaitais Smiley cligne

cdt

edit Voici un exemple en incluant une animation https://codepen.io/gc-nomade/pen/PwqxJGK
Modifié par gcyrillus (22 Jun 2025 - 21:14)
Bonjour,

gcyrillus a écrit :
As tu disposé l'attribut tabindex sur les images à cliquer ?


Ben non...
Effectivement il suffit d'ajouter un attribut tabindex pour que :focus fonctionne parfaitement.

Bon à savoir, merci beaucoup.

Je reviens plus tard avec d'autres questions.

PS : très sympa ton animation.
Mais je voulais dire une animation qui évite de devoir charger des images en display: none.
Modifié par boteha_2 (22 Jun 2025 - 23:09)
Bonjour gcyrillus,

Merci de ton suivi.

Dans le code html les images restent chargées en double : l'image et sa vignette.

Pas moyen de ne charger qu'une seule image ?

C'est juste une remarque, ce n'est pas en soi trop pénalisant de charger deux images.
gcyrillus a écrit :
l'attribut loading devrait faire l'affaire en rejetant l'image en dehors de l'écran par défaut avec le risque de perdre l'animation au premier chargement/affichage de l'image.


Très intéressant.
Bonjour,

Petit détour avant de poursuivre le carrousel, l'organisation de la page.

Un peu compliqué, voir le codepen

div.main = afin de pouvoir changer l'ordre des éléments en version mobile, ce qui n'est pas codé dans le codepen.
Et aussi max-width: min-content.

Mon problème concerne ul.voir

Pourquoi n'est-ce pas aligné à gauche ?

Et le fonctionnement quand la fenêtre se rétrécit.

Doit passer sur une colonne, puis sur deux colonnes entre le carrousel et le tableau, puis sur une colonne sur écran minuscule.

Tout cela fonctionne plus ou moins mal.

Il y a un float: left car je ne suis pas arrivé à tout gérer dans une grille.

S'il faut revoir la conception générale je n'ai rien contre...

Merci d'avance.
Modérateur
Bonjour,

je ne comprend pas trop où tu veut en venir.

Le carrousel à une structure invalide et incompatible avec le CSS que je t'ai proposé En l'état , c'est du javascript dont tu aurais besoin. Le lazy load sur les miniature est , à mon avis, inutile.

Tu aurais 3 éléments à faire cohabiter sur 1 ou deux colonnes ?
Je verrai un truc du genre : https://codepen.io/gc-nomade/pen/JodzGyM en reprenant le carrousel proposé et ton ul.voir + tableau.

Le point de rupture est basé sur 40rem, approximativement la largeur du tableau.

cdt
Modifié par gcyrillus (27 Jun 2025 - 17:58)
Bonjour gcyrillus,

Encore merci pour ton suivi.

gcyrillus a écrit :
Le carrousel à une structure invalide et incompatible avec le CSS que je t'ai proposé


Oui, je sais, pour l'instant le problème est la cohabitation des trois éléments.
Une fois cela réglé je reprendrai le carrousel.

J'étudie avec attention ton nouveau codepen.
Bonjour gcyrillus,

Ton codepen est super mais il ne correspond pas exactement à mes contraintes.

Notamment, il faut que les vignettes du carrousel soient responsive et passent en 2 lignes si nécessaire, voire plus..

Ce nouveau codepen est largement inspiré de ton travail.

Pour être responsive j'utilise auto-fill et cela fonctionne, ainsi d'ailleurs que le carrousel.

À ce stade je n'ai qu'une seule question :
Pourquoi les images ne sont-elles pas alignées à gauche dans leur container (figure) ?

Je n'arrive pas à faire disparaitre cette foutue petite marge gauche entre le filet rouge et le filet vert.
La marge droite est sans importance.

Autrement je remarque que grid-template-columns: repeat(auto-fill, 110px) permet de traiter correctement l'image principale de 280px, ce qui fut une bonne surprise pour moi.

gcyrillus a écrit :
Le lazy load sur les miniature est , à mon avis, inutile.


Les vignettes seront en-dessous de la ligne de flottaison des petits écrans.
Donc je me dis que lazy load est utile dans ce cas, et sauf erreur ne mange pas de pain sur grand écran.
Modifié par boteha_2 (29 Jun 2025 - 22:19)
Bonjour,

Pour se débarrasser de la marge, j'ai trouvé :

figure.photos-alternatives {place-content: start}
/* start au lieu de center */


Corrigé sur le codepen.
Modifié par boteha_2 (30 Jun 2025 - 19:49)
Bonjour,

J'essaye d'avoir en parallèle :hover et :focus.

Comportement étrange pour moi :
:hover fonctionne mais si je donne le focus à un élément :hover ne fonctionne plus pour les frères aînés, il ne fonctionne qu'avec les frères cadets.

Voir le codepen.

Avez-vous une explication, une solution ?
Modérateur
Bonjour,

Pour mettre en avant avec :hover l'image , il faut lui ajouter un positionnement relatif.

Les éléments placés aux même endroits s'empilent les uns sur les autres, le dernier recouvrant les autres.
https://codepen.io/gc-nomade/pen/raVgpwa

:hover sur la première image[ tabindex ] n'aura aucun effet, elle ne précède pas l'image de grande taille qu'elle représente. C'est peut-être voulu ?

cdt
Modifié par gcyrillus (02 Jul 2025 - 15:45)
Bonjour gcyrillus,

Merci de ton suivi.

gcyrillus a écrit :
:hover sur la première image[ tabindex ] n'aura aucun effet, elle ne précède pas l'image de grande taille qu'elle représente. C'est peut-être voulu ?


L'image principale s'affiche par défaut au chargement de la page.
Si je la place en deuxième position après sa vignette je ne vois pas trop comment faire.
Je vais y réfléchir.

Une autre possibilité n'est-elle pas d'utiliser la pseudo-classe :has afin de cibler l'image principale au survol de sa vignette derrière elle ?

À ton avis quelle est la meilleure approche ?