[Résolu] Carrousel d'images avec vignettes

(reprise du message précédent)

Hello,

Désolé de t'ennuyer encore...

gcyrillus a écrit :
En redonnant le focus à cet onglet, sans fermer la popup, ta vignette 2 est bien celle qui a le focus

Ben non, pas sur le codepen...

Ce serait pourtant un comportement assez sympa.

gcyrillus a écrit :
edit : tu devrais donner une reference à la popup pour n'en ouvrir qu'une et la rafraichir si le visiteur à oublié de la fermer, par exemple:

Un client peut-il vouloir ouvrir plusieurs popup ?
Il me semble que non et donc ton idée est bonne.
Là ça marche, après copier-coller de ton code.
Modifié par boteha_2 (03 Aug 2025 - 18:52)

gcyrillus a écrit :
En redonnant le focus à cet onglet, sans fermer la popup, ta vignette 2 est bien celle qui a le focus

J'ai dû changer un peu le code, voir le codepen.

Le seul changement concerne le contenu des méthodes addEventListener :

imax.addEventListener('mousedown', function () {
	
let activeImg = document.activeElement.getAttribute('src');
focused[0] = activeImg; // on sauvegarde la valeur dans la constante focused[].
PopGrand(ca_id, tist, height, img_format); 
});
  
imax.addEventListener("mouseup", function () {
document.querySelector('img[src="' + focused[0] + '"]').focus ();
});

mousedown
Sauvegarde de activeImg et ouverture de la popup.

mouseup
Envoi du focus sur l'image active.

Rien à redire ?

Dernier détail, dans la popup j'ai un button "Fermer" activé par un petit, javascript :

const ferme = document.querySelector ('button');

ferme.addEventListener ('click', function ()
{
window.close ();
}
);

Quand je clique sur ce bouton, d'abord le carrousel va à l'image principale (ce qui est demandé par le CSS), puis il faut un deuxième clic pour fermer.

Vois-tu un moyen de fermer au premier clic quelle que soit l'image active ?
Modifié par boteha_2 (03 Aug 2025 - 20:41)

boteha_2 a écrit :


Quand je clique sur ce bouton, d'abord le carrousel va à l'image principale (ce qui est demandé par le CSS), puis il faut un deuxième clic pour fermer.

Vois-tu un moyen de fermer au premier clic quelle que soit l'image active ?

Bonjour,

Je ne comprend pas vraiment. si il s'agit de redonner le focus à l'onglet qui à ouvert la popup, tu peut tenter window.opener.focus() depuis la popup quand tu la referme.

l'usage d'une modale serait probablement mieux pour tout le monde , le dev et les visiteurs
A propos de window.open : https://developer.mozilla.org/fr/docs/Web/API/Window/open

Bonjour gcyrillus,

gcyrillus a écrit :
l'usage d'une modale serait probablement mieux pour tout le monde , le dev et les visiteurs Smiley cligne

Une modale est-elle redimensionnable plein écran en 1 clic ?
C'est le principal intérêt du popup.
Par ailleurs une popup peut être ouverte dans un nouvel onglet avec Control-Click.
Est-ce le cas d'une modale ?

gcyrillus a écrit :
Je ne comprend pas vraiment. si il s'agit de redonner le focus à l'onglet qui à ouvert la popup, tu peut tenter window.opener.focus() depuis la popup quand tu la referme.

Il s'agit juste de fermer la popup, tu peux le faire bien sûr par le bouton généré par le navigateur (x en haut à droite avec Firefox). mais j'ai ajouté un bouton Fermer en bas à droite.

Il y a une sorte de conflit avec le code CSS du carrousel dans le pop-up.

En gros il faudrait que :

const ferme = document.querySelector ('button');

ferme.addEventListener ('click', function ()
{
window.close ();
}
);

Soit exécuté avant le code CSS :

figure > img:not([tabindex]):nth-child(2),
{
display: block; order: 1; grid-column: 1/-1; padding: 20px 0; outline: none;
}

Est-ce plus clair ?

Encore merci pour ton suivi.

Je ne suis toujours pas certain de comprendre ,
* une modale peut-être redimensionné( ce n'est que des styles)
* passer en fullscreen est aussi possible avec : document.documentElement.requestFullscreen()

exemple possible: https://codepen.io/gc-nomade/pen/bNVWVyP (modale redimensionnable et passage fullScreen à l'ouverture)

Ton codepen est assez convaincant.

Je vais y réfléchir.

Je vais chercher la différence entre une modale et une popup, pas clair pour moi.

Bonjour,

Un peu de documentation sur les modales.

Un article de Raphaël.

Une discussion.

Un blog.

Une vidéo


edit: correction url
Modifié par gcyrillus (05 Aug 2025 - 08:18)

Bonjour,

Je ne me permets pas de parler sur le plan technique mais sur le plan fonctionnel je ne vois pas de différence fondamentale entre une modale et une popup.

Les seules différences que je vois :
La modale bloque l'onglet actif, pas la popup.
La popup s'ouvre dans une page comprenant les boutons de navigation du navigateur (agrandir, fermer, barre de défilement, etc.), pas la modale.
Dans la popup il est possible d'envoyer l'URL d'un script PHP qui va remplir la popup, je suppose que c'est aussi possible avec la modale.

Les deux sont à éviter dès qu'une solution alternative est plus ergonomique.

Un truc pénible avec window.open est que la hauteur de la popup ne peut pas être déterminée automatiquement par le contenu.
J'ai essayé height=auto, sur Firefox cela ouvre à 100 % de la hauteur de la fenêtre.
Il me semble qu'il n'a pas d'autre possibilité que de donner une hauteur en pixel, ce qui oblige à un calcul parfois un peu compliqué.

Bonjour,

J'y suis presque.

Détail un peu fâcheux, quand le carrousel est ouvert dans la popup, j'aimerais que le clic sur la grande image ne provoque rien.

Actuellement il provoque la perte de focus et donc le retour à l'affichage de l'image principale.

J'ai essayé de désactiver le clic par le CSS avec :

pointer-events: none

Ne marche pas.

J'ai essayé avec javascript :

document.querySelector('img:not([tabindex]):nth-child(2)').onfocus = function() {this.blur();}

S'il n'existe pas de méthode pour rendre le clic inopérant, il doit être possible de repérer la vignette active et de lui redonner le focus au clic, ce qui marche pour l'ouverture de la popup (encore merci à gcyrillus).

let activeImg = document.activeElement.getAttribute('src');
focused[0] = activeImg;

imax.addEventListener("click", function () {
document.querySelector('img[src="' + focused[0] + '"]').focus ();
 
});

Je n'ai pas essayé ce dernier moyen, s'il existe une méthode pour désactiver le clic cela me semble plus simple.

Bonjour,

Regarde du coté de window.opener https://developer.mozilla.org/fr/docs/Web/API/Window/opener

a écrit :
La propriété opener, rattachée à l'interface Window, renvoie une référence à la fenêtre ayant ouvert la fenêtre courante, que ce soit avec open(), ou via une navigation avec un lien doté d'un attribut target.

Autrement dit, si la fenêtre A ouvre la fenêtre B, B.opener renvoie A.

Il y a de grande chance que les interactions soient limitées par les navigateurs pour des raisons de sécurités.

Cdt

Bonjour gcyrillus,

Merci pour le suivi.

J'ai dû mal m'exprimer, je ne suis pas sûr que tu aies bien compris la question.

Mon problème n'est pas l'interaction entre le fenêtre A et la fenêtre B.

Mon (petit) problème est la popup, la fenêtre B.

Dans la popup tu sélectionnes vignette 2, Photo 2 s'affiche.
Tu cliques sur Photo 2, vignette 2 perd le focus, tu te retrouves avec Mon beau produit dans la popup.

Je me demandais s'il était possible de désactiver le clic sur la grande image dans la popup, que simplement il ne se passe rien.

Est-ce plus clair ?
Modifié par boteha_2 (11 Aug 2025 - 19:57)

boteha_2 a écrit :
Bonjour gcyrillus,

...

Est-ce plus clair ?

En fait non, tu m'as perdu (il y a quelques posts déjà en fait) et je ne comprend vraiment pas ce que tu décris à propos de la popup .

A ce que j'avais compris , la popup était destinée à afficher une image avec pour seule interaction possible : fermer celle-ci.

Cordialement

Edit:

Peut tu décrire à nouveau tout ce que tu souhaite afficher et quelles interactions veut tu rendre possibles ?
La proposition simple de départ n’est probablement plus la mieux adaptée avec une part JavaScript probablement nécessaire dés le début au vu des interactions que tu souhaites plus nombreuses.

Cdt
Modifié par gcyrillus (11 Aug 2025 - 21:02)

gcyrillus a écrit :
A ce que j'avais compris , la popup était destinée à afficher une image avec pour seul interaction possible : fermer celle-ci.

La popup s'ouvre en largeur 420px avec tout le carrousel présenté un peu différemment avec les vignettes en haut.
L'intérêt est de passer en largeur plein écran avec le bouton du navigateur.
Les vignettes restent petites mais l'image principale est en largeur 100 % donc potentiellement très grande selon la taille de l'écran.
Tu vois bien mieux les détails qu'avec une loupe, tu te balades en hauteur avec le curseur de défilement vertical de la fenêtre.
Mon seul regret est qu'avec la molette de la souris il ne soit pas possible de grossir l'image au delà de 100 % car l'image reste contenue dans son parent.

Donc mon problème est dans ce pop-up de désactiver le clic sur la grande image.
Et si pas possible de l"activer pour garder le focus sur la vignette active, pour ça tu m'as déjà donné un code que je dois pouvoir adapter tout seul.
Mais si possible de désactiver le clic avec un code plus simple cela m'intéresse.

L'interaction est résolue.
Quand tu fermes la popup le carrousel se recale sur l'image sur laquelle tu avais cliqué pour ouvrir cette popup.

Est-ce plus clair ?
Modifié par boteha_2 (11 Aug 2025 - 21:21)

boteha_2 a écrit :

Est-ce plus clair ?

Bonsoir,
alors oui , enfin peut-être, si ta popup reprend la structure et le js de la fenêtre qui l'ouvre.
Si tu passe un paramètre à la popup, tu peut tester si celui-ci existe (et éventuellement si sa valeur est valide) et ainsi appliquer ou non les evenements mousedown et mouseup aux grandes image.

exemple de base à inclure et tester:

// recuperation de l'url demandée
const queryString = window.location.search;
// Analyser la chaîne de requête
const urlParams = new URLSearchParams(queryString);
// recuperation des get
const query = urlParams.get('query');
// test d'un parametre spécifique 
const paramPopup = urlParams.get('nom');
// paramPopup est maintenant egale à null ou nom=imagetruc.img

Puis la modification à effectuer dans ta boucle sur les images:

if(paramPopup == null) {
 // englober ici les addEventListener() mousedown et mouseup  
}

Cdt

Bonjour gcyrillus,

Je pense que tu vas bien comprendre avec le codepen de la popup.

Le code est généré par un script PHP selon les variables $_GET envoyées par window.open, aucun problème.

Mon seul petit souci :

Dans la popup tu sélectionnes vignette 2, Photo 2 s'affiche.
Tu cliques sur Photo 2, vignette 2 perd le focus, tu te retrouves avec Image principale dans la popup.

Je me demandais s'il était possible de désactiver le clic sur la grande image dans la popup, que simplement il ne se passe rien.

Et si pas possible de l"activer pour garder le focus sur la vignette active, pour ça tu m'as déjà donné un code que je dois pouvoir adapter tout seul.
Mais si possible de désactiver le clic avec un code plus simple cela m'intéresse.
Modifié par boteha_2 (12 Aug 2025 - 19:09)

Bonsoir,

En effet, c'est different

En cliquant ailleurs que sur la vignette qui a le focus, elle le perd aussitôt . Ici , il faut encore garder en mémoire la dernière vignette cliquée et lui redonner le focus.

La base pourrait-être:

const imgs = document.querySelectorAll("img[tabindex]");
const imgFocused = [];
for (img of imgs) {
  img.addEventListener("blur", function () {
    // on restore le focus (la derniere cliquée et active, celle ci justement [smile] )
    document.querySelector('img[src="' + imgFocused[0] + '"]').focus();
  });
  img.addEventListener("mousedown", function () {
    // on enregistre l'image cliquée.
    imgFocused[0] = this.getAttribute("src");
  });
}

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

Cdt
Modifié par gcyrillus (12 Aug 2025 - 19:05)

Hello gcyrillus,

Copier-coller de ton code dans mon codepen, fonctionnement idéal et parfait !

En passant j'ai découvert qu'il n'était pas illégal de glisser un élément p comme enfant d'un élément figure, je pensais que l'on avait le droit qu'à img et figure-caption.
En tous cas l'affichage est correct et le validateur du W3C ne trouve rien à redire.

On est presque rendu, je vais bientôt cocher Résolu.

Encore merci beaucoup.
Modifié par boteha_2 (12 Aug 2025 - 19:07)

Ah, un dernier problème.

Afin qu'à l'ouverture du popup ce soit l'image sur laquelle le client a cliqué qui s'affiche le javascript commence par une ligne dont on a déjà parlé.

Par exemple, si le client a cliqué sur Photo 1, à l'ouverture de la popup le focus est donné à la vignette correspondante.

document.querySelector('img[src$="867-1G.webp"]').focus ();

Et là, si tu cliques sur Photo 1, ton script ne fonctionne plus.
Par contre, il refonctionne dès la prochaine vignette sélectionnée.

Autrement dit ton script ne fonctionne pas au premier clic après ouverture de la popup, mais il fonctionne dès le deuxième clic.

Tu peux le voir en faisant un reload du codepen.

Un correctif est-il possible ?
Modifié par boteha_2 (12 Aug 2025 - 19:51)

Bonsoir,

Il te faut initialiser imgFocused qui est vide à l'ouverture de la page:

https://codepen.io/gc-nomade/pen/pvjdJBe (ligne 5 dans la partie js)

cdt

gcyrillus a écrit :
Il te faut initialiser imgFocused qui est vide à l'ouverture de la page:

Ah oui, impeccable, j'aurais pu y penser...

Codepen corrigé.
Modifié par boteha_2 (12 Aug 2025 - 21:34)

Bonjour,

Je me risque à cocher Résolu.

Le code est en production.
Carrousel pouvant gérer un nombre indéterminé de vignettes.
Tous formats d'images et toutes tailles d'images sont possibles grâce à un couche de PHP en amont afin de créer quelques lignes de CSS ou de JS dynamiques.

Encore un grand merci à gcyrillus qui a trouvé ce code original et performant.