Carrousel d'images avec vignettes

(reprise du message précédent)

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 ?

boteha_2 a écrit :
Bonjour gcyrillus,

Merci de ton suivi.



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 ?

:not() et :has() fonctionnent trés bien aujourd'hui

Mon premier exemple utilise un grid-layout et positionne la première(en position 2) grande image aussitôt dans la première cellule.

en y ajoutant :hover et le positionnement relatif, cela fonctionne.
Pour passer sur plusieurs lignes, c'est aussi quelque chose que grid sait faire:

https://codepen.io/gc-nomade/pen/ogXrzpY

Je trouve grid plus adapté et facile à reconfigurer que flex pour cet exemple Mais c'est personnel

Cordialement

Bonjour gcyrillus,

Cela m'a l'air excellent, je m'y mets au plus vite.

Encore merci.

Bonjour gcyrillus,

Ton carrousel CSS fonctionne très bien, très rapide.

J'ai adapté le code selon mes contraintes, un aperçu vite-fait dans le codepen.

Je pense que l'action au :focus ET au :hover est très sympa.

Superposition avec :hover, cela m'échappe un peu.
Étrange, en version DARK sous Firefox, les images superposées restant visibles, même en position: relative et background: white.

Il faut forcer le masquage des images, ce que j'ai fait avec ces déclarations :

.photos:has(img:nth-child(n+3):focus) > img.picture {opacity: 0}
.photos:has(img:nth-child(n+3):hover) > img.picture {opacity: 0}
.photos:has(img:first-child:hover) > img.picture {opacity: 1}

.photos:has(img[tabindex]:hover) > img:focus:not(:hover) + img {opacity: 0}

J'ai voulu employer display: none au lieu de opacity: 0 mais cela fait tout casser.

J'ai pensé à visibility: hidden.

Sous Firefox et avec des images webp les déclarations ci-dessus provoquent un petit bogue de cette animation

img {opacity: .75; transition: opacity .5s ease-in-out}
img:hover {opacity: 1}

L'image s'allume, puis s'éteint, puis se ré-allume si le pointeur est bougé.

As-tu une idée pour ce petit bogue que je n'ai pas reproduit avec Chrome ?
Modifié par boteha_2 (07 Jul 2025 - 23:06)

Bonjour,

Pour le "masquage des image, c'est dû à la différence de taille de la première image..

Pour le soucis thème light/dark , et l'effet :hover + webp , as tu un codepen qui met ces défauts en évidence. ? Peut-être est ce du a l'empilement ou d'une transition/animation ? là pour le moment je ne vois pas.

cdt,
Modifié par gcyrillus (08 Jul 2025 - 13:00)

Bonjour gcyrillus,

gcyrillus a écrit :
Pour le soucis thème light/dark , et l'effet :hover + webp , as tu un codepen qui met ces défauts en évidence. ?

Si je demande le mode DARK par Firefox cela n'a aucun effet sur le codepen.

Et dans le codepen je ne vois pas de bouton pour actionner le mode DARK.

Je vais essayer de contourner le petit bug en passant par visibility au lieu d'opacity.

Je vous tiens informés.

boteha_2 a écrit :
Je vais essayer de contourner le petit bug en passant par visibility au lieu d'opacity.

Cela fonctionne bien et le bogue de l'animation a disparu.

Codepen corrigé en conséquence.

"gcyrillus" a écrit :
Pour le "masquage des image, c'est dû à la différence de taille de la première image..

Peux-tu expliquer en deux mots ?

boteha_2 a écrit :

Peux-tu expliquer en deux mots ?

:)
1. taille
2. images.

Lorsque tu passes en survol lentement d'une image à une autre, la première image apparaît brièvement Il y a parfois un gap entre la fin et le début des transitions au survol d'une image à une autre.

Bonjour gcyrillus,

gcyrillus a écrit :
Lorsque tu passes en survol lentement d'une image à une autre, la première image apparaît brièvement Il y a parfois un gap entre la fin et le début des transitions au survol d'une image à une autre.

Je ne saisis pas trop mais l'important est que le carrousel fonctionne bien, ce qui est le cas avec ton code et les paramètres actuels.

Bonjour,

Une parenthèse pour un problème de positionnement dont j'ai déjà parlé et que je n'arrive pas à résoudre.

Il faut que ce soit RESPONSIVE.

div class="droite" doit être à droite à la même hauteur de div glass="gauche' s'il y a la place et en-dessous si pas la place.

Le plus simple me semble être de transformer div class="droite" en float: left.

Mais div class="droite" est le carrousel, pas de width en dur, et ça ne marche pas, le carrousel se déploie sous une seule colonne.
Autre piste j'ai essayé colums: 2 mais là encore ça ne marche pas.

J'ai créé un codepen qui présente les différents éléments.
Modifié par boteha_2 (11 Jul 2025 - 12:10)

Bonjour,

Sans réponse, j'essaie de poser la question autrement.

Dans le codepen j'ai rendu le carrousel flottant à gauche.

Rien ne se passe comme prévu...

Comportement espéré : largeur auto pour le carrousel.
En rétrécissant la fenêtre les éléments à gauche passent en dessous, le carrousel conservant sa largeur auto, puis les vignettes passent sur deux lignes, trois si nécessaire.

J'espère que c'est à peu près clair...

Bonjour,

oups, je n'avais pas vu tes derniers posts.

Les flottants n'existent pas dans une grille, ils restent des éléments occupant une cellule de la grille.
De plus, ta boite est en flex en colonne + width:min-content (deux raisons empêchant des éléments frères de se mettre cote à cote), les éléments seront affichés les uns aux dessus des autres.

Pour dimensionner ton flottant (sans parent grille) , tu pourrait te servir de clamp() ou min() / max() pour le contenir sur les petites résolutions et lui attribué une taille maximale ou absolue lorsqu'il y assez de place.

cdt


edit : un exemple possible : https://codepen.io/gc-nomade/pen/vENLgWy
p.s. le défaut évoqué au survol n’apparaît que lorsque j'ai de nombreuses fenêtres et onglets ouverts.
Modifié par gcyrillus (19 Jul 2025 - 13:30)

Bonjour gcyrillus,

Merci de ton suivi.

gcyrillus a écrit :
Les flottants n'existent pas dans une grille, ils restent des éléments occupant une cellule de la grille.
De plus, ta boite est en flex en colonne + width:min-content (deux raisons empêchant des éléments frères de se mettre cote à cote), les éléments seront affichés les uns aux dessus des autres.

Avec cette structure :

<div class="main">

<div class="image">

<img class="picture" />

<ul class="voir">

</ul>

</div>

</div>

.main est display: flex; max-width: min-content; flex-direction: column;
Cela sert à réordonner les éléments en petit écran, il y a plus d'éléments que ceux que je donne ici.

img est float: left

ul est grid

Et cela fonctionne très bien, ce qui m'étonne beaucoup...
ul déborde de main et va se placer sous div class="image" quand il n'y pas assez de place en largeur.
Dans mon problème la seule différence est que <img class="picture" /> est remplacé par le carrousel.

Ton code aussi fonctionne très bien, il me semble qu'il repose sur deux clés seulement :

div.main {/* pas de grille pour les flottants */}

figure.photos {float: left; width: min(335px,100%);}

Je fais mes tests et reviens au plus vite.
Modifié par boteha_2 (19 Jul 2025 - 15:48)

Bonjour,

Je n'ai pas eu le temps de m'attaquer au problème des flottants.

Je reviens au carrousel proprement dit.

Dans le codepen de gcyrillus comme dans le mien il y a une action que je cherche à corriger.

Tu donnes le focus à une vignette qui n'est pas la première, par exemple la vignette marron chez gcyrillus.
La grande image marron s'affiche, parfait.
Quand maintenant tu cliques sur la grande image marron c'est l'image principale (bleu foncé chez gcyrillus) qui apparaît.

Je ne vois quelle ligne CSS provoque ce comportement que j'aimerais annuler.
Le clic sur une grande image ne doit pas changer la grande image en place.

Autrement dit le changement ne peut se faire que par les vignettes, focus ou hover.

Merci d'avance.

boteha_2 a écrit :
Bonjour,
....
Je ne vois quelle ligne CSS provoque ce comportement que j'aimerais annuler
...

Bonjour,

La grande image s'affiche lorsque la petite a le focus, en perdant le focus, le diaporama reprend son état initial en affichant la première grande image par défaut.

boteha_2 a écrit :
Bonjour,
....
Le clic sur une grande image ne doit pas changer la grande image en place.
...

La grande image ne peut pas prendre le focus et rester en avant. La méthode CSS utilisée via le markup(structure HTML du conteneur) ne le permet pas.

Quelle action attends tu au clic sur l'image ?

cdt

Bonjour gcyrillus,

Encore merci pour le suivi.

gcyrillus a écrit :
Quelle action attends tu au clic sur l'image ?

Le clic sur l'image doit si possible :
1) rester sur l'image
2) provoquer l'ouverture du carrousel en pop-up, de façon à pouvoir l'agrandir pleine page (mieux qu'une loupe selon moi).

Actuellement, si la grande image n'est pas l'image principale (img.picture)
Clic sur l'image : l'image principale s'affiche
Clic sur l'image principale : le pop-up s'ouvre.

Voilà à quoi peut ressembler le html :

<figure>
<img tabindex="0" src="im/pr/2128G.jpg" alt="" width="78" height="75" loading="lazy" />
<img class="picture" src="im/pr/2128G.jpg" id="2128X645Xjpg" alt="Mon super produit" />
<img tabindex="0" src="im/mu/2128-1G.webp" alt="" width="100" height="75" loading="lazy" decoding="async" />
<img src="im/mu/2128-1G.webp" id="2128X645Xwebp" alt="" width="280" height="210" loading="lazy" decoding="async" />
<img tabindex="0" src="im/mu/2128-2G.webp" alt="" width="100" height="75" loading="lazy" decoding="async" />
<img src="im/mu/2128-2G.webp" id="2128X645Xwebp" alt="" width="280" height="210" loading="lazy" decoding="async" />
<img tabindex="0" src="im/mu/2128-3G.webp" alt="" width="100" height="75" loading="lazy" decoding="async" />
<img src="im/mu/2128-3G.webp" id="2128X645Xwebp" alt="" width="280" height="210" loading="lazy" decoding="async" />
</figure>

J'ai le code javascript qui fonctionne bien pour l'image principale.
Dans mon esprit il devrait aussi bien fonctionner pour les autres image sauf que non, c'est le comportement expliqué plus haut en deux clics : image principale puis pop-up.

const trouve_ca_id = document.querySelector('img.picture');

const idImg = trouve_ca_id.id.split ('X');
const ca_id = idImg[0];

const imaxes = document.querySelectorAll('img.picture, img[src^="im/mu/' + ca_id + '-"] + img');
 
imaxes.forEach(imax => {
const tist = imax.alt;
const idImg = imax.id.split('X');
if (idImg.length < 3) {return;}
const ca_id = idImg[0];
const height = idImg[1];
const img_format = idImg[2];

imax.addEventListener('click', function() {PopGrand(ca_id, tist, height, img_format);});
});

function PopGrand (ca_id, tist, height, img_format)
{
if (!mobile.matches) {return false;}
else
{
const win = window.open ('popup.php?nom='+ encodeURI (ca_id+'G.'+img_format+'&tit='+tist), '', 'popup=yes,scrollbars=yes,resizable=yes,width=420,height='+height);
}
}

J'espère que c'est clair.
Modifié par boteha_2 (21 Jul 2025 - 19:04)

Bonsoir,

j'ai remis à jour le codepen https://codepen.io/gc-nomade/pen/ogXrzpY en reprenant l'évenement onmousedown pour récupérer la class de l'image qui à encore le focus , puis au lieu d'ouvrir une popup, je me sert d'une boite de dialog redimensionnable avec resize(css) . Le js est simplifié pour la relecture.

Ce qui t’intéresse c'est de récupérer l'image qui à le focus avant qu'elle le perde avec mousedown et document.activeElement

https://developer.mozilla.org/fr/docs/Web/API/Document/activeElement

Cdt
Modifié par gcyrillus (21 Jul 2025 - 18:35)

Hello gcyrillus,

gcyrillus a écrit :
j'ai remis à jour le codepen https://codepen.io/gc-nomade/pen/ogXrzpY en reprenant l'évenement onmousedown pour récupérer la class de l'image qui à encore le focus , puis au lieu d'ouvrir une popup, je me sert d'une boite de dialog redimensionnable avec resize(css) . Le js est simplifié pour la relecture.

Je suppose qu'il est facile d'adapter ton code pour ouvrir le pop-up au lieu d'une boite de dialogue ?

Si oui je devrais y arriver.

Je m'y mets au plus vite, je te tiens informé.

Encore merci.

boteha_2 a écrit :
Hello gcyrillus,
Je suppose qu'il est facile d'adapter ton code pour ouvrir le pop-up au lieu d'une boite de dialogue ?
Encore merci.

De rien,
oui, :

a écrit :
Ce qui t’intéresse c'est de récupérer l'image qui à le focus avant qu'elle le perde avec mousedown et document.activeElement

https://developer.mozilla.org/fr/docs/Web/API/Document/activeElement

;)

Bonjour gcyrillus,

Remplacer click par mousedown est très bénéfique.

Le pop-up s'ouvre au premier clic, sans repasser par la case image principale.

Par contre, étant assez faible en javascript j'ai du mal à bien comprendre ton code et à l'adapter.

Concrètement il me reste deux problèmes.

1) Dans le code PHP du pop-up je récupère le nom de la grande image sur laquelle a cliqué le client.
Mais je ne sais pas comment donner le focus à cette image dans le carrousel du pop-up.
Je ne peux pas le faire par le code html (checked="checked" existe mais à ma connaissance pas focused="focused").
Par le code CSS créé dynamiquement je ne vois pas non plus.
Peut-être par le JS avec ;focus().

document.getElementById('id de la grande image").focus({ preventScroll: true });

Est-ce une bonne piste.?

2) Moins ennuyeux mais allons jusqu'au bout.

let activeImg = document.querySelector( "img." + document.activeElement.className + " + img");// on recupere la grande image

Je suppose que cela sert à bloquer le carrousel de la page sur la grande image sur laquelle le client a cliqué.

Mais je ne vois pas comment l'adapter pour mes quelques lignes de code...

const trouve_ca_id = document.querySelector('img.picture');

const idImg = trouve_ca_id.id.split ('X');
const ca_id = idImg[0];

const imaxes = document.querySelectorAll('img.picture, img[src^="im/mu/' + ca_id + '-"] + img');
 
imaxes.forEach(imax => {
const tist = imax.alt;
const idImg = imax.id.split('X');
if (idImg.length < 3) {return;}
const ca_id = idImg[0];
const height = idImg[1];
const img_format = idImg[2];

imax.addEventListener('mousedown', function() {PopGrand(ca_id, tist, height, img_format);});
});

Modifié par boteha_2 (22 Jul 2025 - 19:26)

Bonsoir,
oui, la fonction .focus() est une bonne piste .

Revoici un exemple qui utilise récupère une valeur de activeElement pour ensuite rendre le focus à l’élément initial une fois l'action terminée. https://codepen.io/gc-nomade/pen/MYayXqo?editors=0010

cdt