popup miniature vers l'image en grand

Version imprimable

06/08/2025, 16h12
zool.bzh

popup miniature vers l'image en grand

Bonjour

j'ai un diaporama où je voudrais en cliquant ouvrir l'image minaiture en grand ->PopUp ( 320*240 ) et cliqer su cettte image pour fermer la PopUp
Avez-vous une piste

merci
06/08/2025, 18h48
casperweb

Bonjour, pour ouvrir un popup cela ce fait avec window.open() ce qui ouvre une nouvelle fenêtre fille. Lire https://www.toutjavascript.com/refer...indow.open.php
Mais la plupart de navigateur bloque cette option, on utilise alors une "popin" c'est une fenêtre modale. (fait des recherches si tu ne connais pas ce terme). C'est une <div> qui apparait ou dessus de tout.
Pour ce que tu souhaites faire il existe des librairies à implémenter sur ton site, fait une recherche sur le terme "lightbox".
Par exemple :
https://lokeshdhakar.com/projects/lightbox2/
https://fslightbox.com/
08/08/2025, 13h13
eleydet

Bonjour,
Et si vous présentiez deux ou trois captures d'écran pour que nous comprenions mieux ce que vous voulez obtenir?

Merci casperweb
j'ai opter pour une popupen cliqhant sur un bouton le problem est que je voudrais lancer un popup a chaque image comme avec le bouton
voici le code source qui fonctionne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head> 
    <body>
 
	<button onclick="togglePopup()">activer la popup</button>
 
 
	<div id="popup-overlay">
 
	    <div class="pop-cont">
 
	    <h2>hello world</h2>
    	<p>1fst edition de base</p>
 
	    <a href="javascript:void(0)" onclick="togglePopup()">fermer</a>
 
		</div>
	</div>
 
    <script src="app.js"></script>
 
 
</body>
</html>

Voici mon code avec une boucle pour les miniatures

Code:

1
2
3
4
5
6
7
8
9
10
11
 
$url = 'monFichier.xml';
$xml = simplexml_load_file($url);
for($b=$lot1; $b<=$init; $b++) {
    $picXml = "picture".$b;
    $resu = $xml->performer[$numGirl]->$picXml;
    $size = getimagesize($resu);
    $widthSave = ceil(($size[0]*100)/$size[1]);
        echo '<a href='.$resu.' onclick="togglePopup()"><img  src='.$resu.' width='.$widthSave.'/></a>';
  	    echo '<a href="javascript:void(0)" onclick="togglePopup()"></a>';
	}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
*{
	margin: 0;
	padding: 0;
}
#popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.7);
	z-index: 98;
 
	display: none
 
	}
#popup-overlay.open {
display: block !important;
 
}
 
 
 
.pop-cont {
		max-width: 300px;
		width: 100%;
		padding: 30px;
		box-sizing:boder-box;
		background: #FFF;
        position: absolute;
        top: 100px;
		right:50%;
transform: translate( 50%, 50%);
}
.popexit {
	position: absolute;
	top: 0;
	right: 0;
}

Code:

1
2
3
4
5
function togglePopup() {
	let popup = document.querySelector("#popup-overlay");
    popup.classList.toggle("open");
 
}

je ne sais pas ou placer le onclick="togglePopup()" pour ouvrir la popup en cliquant sur la miniature

ps Pour fermer je vourais que toute la photos du popup soit cliquable

voyer-vous ?

Bonjour, plusieurs mauvaise pratique dans ce code. En JS éviter les événement onclick en ligne, voir ce que dit la doc MDN à ce sujet => https://developer.mozilla.org/fr/doc...deventlistener Utiliser addentlistener.

En CSS utiliser le sélecteur universel pour un restet des mages n'est pas une bonne pratique. Reset au cas par cas ou utiliser une feuille de style de type normalize.css => https://necolas.github.io/normalize.css/
Pour plus d'info lire : https://www.alsacreations.com/astuce...reset-css.html et https://www.alsacreations.com/articl...alisation.html

Pour ce qui est du problème de la modale qui s'ouvre au clique sur chaque mignature et se ferme ou click sur la grande image plusieurs solutions possibles. En fonction du peu de code HTML transmit de votre projet, je vous propose ceci :
Fichier de test

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image en grand dans une modale</title>
    <style>
        #popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 98;
 
            display: none
        }
 
        #popup-overlay.open {
            display: block !important;
 
        }
 
        .pop-cont {
 
            width: max-content;
            padding: 30px;
            box-sizing: boder-box;
            background: #FFF;
            position: absolute;
            top: 100px;
            right: 50%;
            transform: translate(50%, 50%);
        }
 
        .popexit {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
 
<body>
 
 
    <img class="thumbnail" src="https://picsum.photos/id/237/200/300" alt=""
        data-imgSrc="https://picsum.photos/id/237/500/500">
    <img class="thumbnail" src="https://picsum.photos/id/147/200/300" alt=""
        data-imgSrc="https://picsum.photos/id/147/500/500">
    <img class="thumbnail" src="https://picsum.photos/id/24/200/300" alt=""
        data-imgSrc="https://picsum.photos/id/24/500/500">
    <img class="thumbnail" src="https://picsum.photos/id/23/200/300" alt=""
        data-imgSrc="https://picsum.photos/id/23/500/500">
 
 
    <div id="popup-overlay">
 
        <div class="pop-cont">
 
            <img src="" alt="" id="image">
 
 
 
        </div>
    </div>
 
 
    <script>
 
        const thumbnail = document.querySelectorAll(".thumbnail");
        const img = document.querySelector("#image");
        img.addEventListener("click", () => {
            togglePopup(null);
        });
 
 
 
 
        thumbnail.forEach(element => {
            console.log(element);
            element.addEventListener("click", function () {
 
                const img = this.dataset.imgsrc; // URL Grande image
                togglePopup(img);
            });
 
        }, false);
 
 
        function togglePopup(image) {
            const popup = document.querySelector("#popup-overlay");
            const img = document.querySelector("#image");
            if (image != null) {
                img.src = image;
            }
            popup.classList.toggle("open");
 
        }
    </script>
 
 
</body>
 
</html>

En espérant que vous puissiez adapter ceci à votre projet. Si vous avez des questions?

10/08/2025, 03h43
zool.bzh

J'ai quelques question consernant la compréhension du <script> app.js
A quoi corespond #image et .thumbnail la console me met "img" erreur lors de img.addEventListener

Bonjour, #image corresponds à la grande image dans la modale.
La class .thumbnail comme son nom l'indique concerne les images miniatures.
En fonction du HTML posté dans votre code PHP, vous ne semblez pas avoir de correspondance entre la petite et la grande image. Si bien que pour réaliser cette correspondance j'ai placé l'URL de la grande image dans l’attribut data-imgSrc de chaque miniatures.

En cliquant sur la miniature, JS passe l'URL de attribut data-imgSrc à #image et modifie le CSS pour que la modale s'affiche.
Un clique sur l'image de la modale et celle-ci se ferme. Est-ce bien cela que vous vouliez?

D'autre possibilité en JS s'offre avec la balise <dialog>. Je vous l'aisse lire la documentation MDN à ce propos => https://developer.mozilla.org/fr/doc...lements/dialog

Je reposte mon code avec quelques corrections.

Le consol.log() qui trainait à été supprimer
Centrage de la modale grâce à flexbox en CSS
Retrait du !important en CSS, cela devrait être utiliser avec parcimonie et dans certains cas bien particulier ou la surcharge est nécessaire. (ce n'est pas le cas ici)
Commentaire de ci de la pour une meilleur compréhension du code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image en grand dans une modale</title>
    <Style>
        #popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 98;
            display: none
        }
 
        #popup-overlay.open {
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .pop-cont {
            width: max-content;
            height: max-content;
            padding: 30px;
            background: #FFF;
        }
 
        .popexit {
            position: absolute;
            top: 0;
            right: 0;
        }
    </Style>
</head>
 
<body>
 
    <!-- Liste des images miniatures -->
    <img class="thumbnail" src="https://picsum.photos/id/237/200/300" alt=""
        data-imgSrc="https://picsum.photos/id/237/500/500">
    <img class="thumbnail" src="https://picsum.photos/id/147/200/300" alt=""
        data-imgSrc="https://picsum.photos/id/147/500/500">
    <img class="thumbnail" src="https://picsum.photos/id/24/200/300" alt=""
        data-imgSrc="https://picsum.photos/id/24/500/500">
    <img class="thumbnail" src="https://picsum.photos/id/23/200/300" alt=""
        data-imgSrc="https://picsum.photos/id/23/500/500">
 
    <!-- La modale -->
    <div id="popup-overlay">
        <div class="pop-cont">
            <!-- contenu de la modale  -->
            <img src="" alt="" id="image">
        </div>
    </div>
    <script>
 
        const thumbnail = document.querySelectorAll(".thumbnail"); // Liste des miniatures 
        const img = document.querySelector("#image"); // L'image dans la modale
 
        // Gestionnaire d'évènement sur l'image dans la modale
        img.addEventListener("click", () => {
            togglePopup(null);
        }, false);
 
        // Gestionnaire d'évènement sur chaque miniature
        thumbnail.forEach(element => {
            element.addEventListener("click", function () {
                // Insertion de la grande image dans la modale 
                const img = this.dataset.imgsrc; // URL Grande image
                togglePopup(img);
            });
        }, false);
 
 
        function togglePopup(image) {
            const popup = document.querySelector("#popup-overlay");
            const img = document.querySelector("#image");
            if (image != null) {
                img.src = image;
            }
            popup.classList.toggle("open");
 
        }
    </script>
</body>
</html>