Discussion :

[Rapvz]

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

[bonjourajax]

Bonjour,

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

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

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
 
// 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";
}

[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".

[bonjourajax]

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

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

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

[Rapvz]

Splendide, ça fonctionne à merveille. Merci beaucoup

[bonjourajax]

D'acc parfait

[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...

...

[Stryteker]

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

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
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 !

[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.