18082 sujets

Questions générales et questions de débutants

Carrousel d'images avec vignettes

Pages :
(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)
Modérateur
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 Smiley cligne
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.
Modérateur
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,

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é.
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à