popup miniature vers l'image en grand

**zool.bzh** · 06/08/2025, 16h12

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

**casperweb** · 06/08/2025, 18h48

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/

**eleydet** · 08/08/2025, 13h13

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

**zool.bzh** · 09/08/2025, 12h17

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**casperweb** · 09/08/2025, 15h23

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**zool.bzh** · 10/08/2025, 03h43

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

popup miniature vers l'image en grand

JavaScript

Vue hybride

Discussions similaires

Partager

Partager