Cliquer sur une image pour qu'elle s'agrandisse dans une fenêtre popup

Version imprimable

12/05/2018, 12h09
Rapvz

Cliquer sur une image pour qu'elle s'agrandisse dans une fenêtre popup

Bonjour,

J'ai suivi ce tutoriel qui fonctionne très bien. C'est exactement ce que je cherche.
https://www.w3schools.com/howto/howt...dal_images.asp
Simplement, j'aimerais appliquer ce dispositif à plusieurs images qui se suivent sur la même page. J'ai donc cc le code html plusieurs fois en changeant juste la source de l'image. Lorsque je charge ma page, l'effet de s'agrandir dans une fenêtre popup ne fonctionne que pour la première. Les autres ne réagissent pas. J'imagine donc que le code JavaScript n'est relié qu'à cette première image.

Je cherche donc une idée pour intervenir sur ce code pour qu'il s'applique à toutes mes images.

Mille mercis

Bonjour,

Tu as juste a rajouter les images pas besoin de tout recopier
Essaye avec ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<img class="myImg" src="" alt="Trolltunga, Norway" width="300" height="200">
<img class="myImg" src="" alt="Trolltunga, Norway" width="300" height="200">
<img class="myImg" src="" alt="Trolltunga, Norway" width="300" height="200">
 
<!-- The Modal -->
<div id="myModal" class="modal">
 
  <!-- The Close Button -->
  <span class="close">&times;</span>
 
  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">
 
  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>

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
 
.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
 
.myImg:hover {opacity: 0.7;}
 
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
 
/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}
 
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
 
/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
    animation-name: zoom;
    animation-duration: 0.6s;
}
 
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
 
/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
 
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
 
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
// Get the modal
var modal = document.getElementById('myModal');
 
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName('myImg')[0];
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
 
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
 
// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

12/05/2018, 15h04
Rapvz

Merci pour ta réponse. Je n'arrive malheureusement toujours pas à faire fonctionner.

Si j'analyse ce que tu proposes, c'est de simplement traiter "myImg" comme un élément class plutôt que id dans les trois codes ?

Si j'applique ce changement effectivement dans les trois codes, alors il n'y a plus rien qui s'ouvre en pop-up. Le JavaScript semble ne pas répondre à "ClassName".

Je t'ai ré écris le code, leur site est dépassé^^
fonctionnel à 100%

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div>
<img class="myImg" src="image1.jpg" alt="bonjourajax" width="300" height="200">
<img class="myImg" src="image2.jpg" alt="Trolltunga" width="300" height="200">
<img class="myImg" src="image3.jpg" alt="Trolltunga" width="300" height="200">
<img class="myImg" src="image4.jpg" alt="Trolltunga" width="300" height="200">
<img class="myImg" src="image5.jpg" alt="Trolltunga" width="300" height="200">
</div>
 
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

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
 
/* Style the Image Used to Trigger the Modal */
.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
 
.myImg:hover {opacity: 0.9;}
 
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
 
/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}
 
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
 
/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
    animation-name: zoom;
    animation-duration: 0.6s;
}
 
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
 
/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
 
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
 
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

Dans ton html tu rajoutes ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
  var modal = $('#myModal')
  var span = $(".close")  
  var modalImg = $("#img01")
  var captionText = $("#caption")
 
  var img = $('.myImg')
 
 img.click(function(){
      modal.css('display', 'block')
      modalImg.attr('src', this.src)
      captionText.html(this.alt)
  });
 
  span.click(function() {
    modal.css('display', 'none')
	});
});
</script>

12/05/2018, 17h23
Rapvz

Splendide, ça fonctionne à merveille. Merci beaucoup
12/05/2018, 17h47
bonjourajax

D'acc parfait
12/05/2018, 21h21
Beginner.

Salut,

C'est quand même un peu dommage d'utiliser JQuery juste pour ça...
C'est je pense assez simple d'adapter le code initial en JS pur...

...

Même chose en JS pur

Voilà le code en JS pur, je pense que ça pourrait en intéresser certains :
(je me suis permis de retirer le caption de mon côté je n'en avais pas besoin)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<img class="myImg" src="image-1.png">
   <div class="myModal modal">
      <span class="close">&times;</span>
      <img class="modal-content">
   </div>
 
<img class="myImg" src="image-2.png">
   <div class="myModal modal">
      <span class="close">&times;</span>
      <img class="modal-content">
   </div>
 
<img class="myImg" src="image-3.png">
   <div class="myModal modal">
      <span class="close">&times;</span>
      <img class="modal-content">
   </div>

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
.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }
 
.myImg:hover {opacity: 0.7;}
 
.modal {
    display: none;
    position: fixed;
    z-index: 20;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.8); 
}
 
 
.modal-content {
    margin: 90px auto;
    display: block;
    width: 80%;
    max-width: 1080px;
}
 
 
.modal-content {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}
 
@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}
 
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
 
 
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
 
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
 
 
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

Et pour le JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var modal = document.querySelectorAll(".myModal");
 
 
var img = document.querySelectorAll(".myImg");
var modalImg = document.querySelectorAll(".modal-content");
 
for (let i = 0; i < img.length; i++) {
 
    img[i].addEventListener('click', function(){
        modal[i].style.display = "block";
        modalImg[i].src = this.src;
    })
 
    var span = document.querySelectorAll(".close");
    span[i].addEventListener('click', function() { 
        modal[i].style.display = "none";
    })
 
    modal[i].addEventListener('click', function(){
        modal[i].style.display = "none";
    })
}

Voilà j'espère que ça pourra aider !

05/09/2023, 18h13
NoSmoking

Bonjour,
@Stryteker :

malgré le déterrage de plus de cinq ans, je dirais qu’il n'est peut-être pas utile de créer autant de « modal » qu'il y a d'images.