Javascript dans une pop-up modal

Version imprimable

Bonjour,

j'ai des soucis de programmation javascript dans une pop-up modal.

J'ai 2 photos dans la popup modal (1 visible et 1 masquée) et j'essaye de changer le paramètre css->display.

Lorsque je clique sur une vignette la photo principale ne change pas ?.

Par conte il semble que quelque chose change dans la fenêtre principale....

voici le 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
<div id="myModal<?php echo $i ?>" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog">
		    <div class="modal-content">
 
		    	<div class="modal-header">
			        <h3 class="modal-title c"><?php echo $donnees_messages['marca'] ?></h3>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>
 
			      <script type="text/javascript">
                                function changeG(){   
                                        document.getElementById("deuxieme").style.display = "none";             
                                        document.getElementById("grande").style.display = "block";                
                                }       
                                function changeD(){      
                                        document.getElementById("grande").style.display = "none";          
                                        document.getElementById("deuxieme").style.display = "block";                
                                }                       
                                 </script>
 
		        <div class="modal-body">
		            <?php echo "<img id='grande' src='images/MECC/".$donnees_messages['fotoG']."' /img>" ?>
		            <?php echo "<img id='deuxieme' src='images/MECC/".$donnees_messages['fotoD']."' /img>" ?>
 
		        </div>
 
		        <div>
		        	<?php echo "<a href='#' onClick='changeG()'><img src='images/MECC/".$donnees_messages['fotoG']."' width="."'100px' /img></a>" ?>
		        	<?php echo "<a href='#' onClick='changeD()'><img src='images/MECC/".$donnees_messages['fotoD']."' width="."'100px' /img></a>" ?>
 
		        </div>
 
		    </div>
		  </div>
		</div>

merci d'avance pour les réponses !

:salut:

Du code PHP, pas de code CSS et un code HTML erroné (/img) !

Exemple :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* code du test */
 
                #deuxieme {
                        display: none;
                }
                
                /* fin code du test */
                
        </style>
	<script>
                'use strict';
                
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        // code du test
                        
                        
                        // fin code du test
                
                }, false );
                
                window.addEventListener( "load", ev => {
                        // le DOM est construit et la page web est visible
                        // code du test
 
                        const
                                elemImg1 = document.querySelector( "#img1" ),
                                elemImg2 = document.querySelector( "#img2" ),
                                elemImgGrande = document.querySelector( "#grande" ),
                                elemImgDeuxième = document.querySelector( "#deuxieme" ),
                                imgsVisible = () => {
                                        elemImgDeuxième.style.display = "block";             
                                        elemImgGrande.style.display = "block";                
                                };
                                
                                elemImg1.addEventListener( "click", ev => {
                                        imgsVisible();
                                        
                                        elemImgDeuxième.style.display = "none";             
                                        elemImgGrande.style.display = "block";                
                                }, false );
                                
                                elemImg2.addEventListener( "click", ev => {
                                        imgsVisible();
                                        
                                        elemImgGrande.style.display = "none";          
                                        elemImgDeuxième.style.display = "block";                
                                }, false );
 
                        
                        // fin code du test
                
                }, false );
  </script>
</head>
<body>
	<main>
 
		<div>
			<img id='grande' src='http://danielhagnoul.developpez.com/images/imageTest.png'>
			<img id='deuxieme' src='http://danielhagnoul.developpez.com/images/avatarDVJH.jpg'>
		</div>
		<div>
			<a href='#' id="img1">
				<img src='http://danielhagnoul.developpez.com/images/imageTest.png' width='100px'>
			</a>
			<a href='#' id="img2">
				<img src='http://danielhagnoul.developpez.com/images/avatarDVJH.jpg' width='100px'>
			</a>
		</div>
 
	</main>
</body>
</html>

J'ai testé mais toujours pas de résultat

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
 
<script>
                'use strict';
 
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        // code du test
 
 
                        // fin code du test
 
                }, false );
 
                window.addEventListener( "load", ev => {
                        // le DOM est construit et la page web est visible
                        // code du test
 
                        const
                                elemImg1 = document.querySelector( "#Vpremiere" ),
                                elemImg2 = document.querySelector( "#Vdeuxieme" ),
                                elemImgGrande = document.querySelector( "#premiere" ),
                                elemImgDeuxième = document.querySelector( "#deuxieme" ),
                                imgsVisible = () => {
                                        elemImgDeuxième.style.display = "block";             
                                        elemImgGrande.style.display = "block";                
                                };
 
                                elemImg1.addEventListener( "click", ev => {
                                        imgsVisible();
 
                                        elemImgDeuxième.style.display = "none";             
                                        elemImgGrande.style.display = "block";                
                                }, false );
 
                                elemImg2.addEventListener( "click", ev => {
                                        imgsVisible();
 
                                        elemImgGrande.style.display = "none";          
                                        elemImgDeuxième.style.display = "block";                
                                }, false );
 
 
                        // fin code du test
 
                }, false );
  </script>
 
        <div id="myModal<?php echo $i ?>" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog">
		    <div class="modal-content">
 
		    	<div class="modal-header">
			        <h3 class="modal-title c"><?php echo $donnees_messages['marca'] ?></h3>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>			      
 
 
		        <div class="modal-body">		        	
		            <?php echo "<img id='premiere' src='images/MECC/".$donnees_messages['fotoG']."'>" ?>
		            <?php echo "<img id='deuxieme' src='images/MECC/".$donnees_messages['fotoD']."'".">" ?>
 
		            <?php echo "<br><a href='#' id='img1'><img id='Vpremiere' src='images/MECC/".$donnees_messages['fotoG']."'"." width='80px'></a>" ?>
		            <?php echo "<a href='#' id='img2'><img id='Vdeuxieme' src='images/MECC/".$donnees_messages['fotoD']."'"." width='80px'></a>" ?>            
		        </div>
 
 
 
		    </div>
		  </div>
		</div>

J'ai enfin réussi ! :-)

J'ai employé pour cela Jquery et pris en compte le changement des id dans la boucle while !

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
 
<div id="myModal<?php echo $i ?>" class="modal fade" tabindex="-1" role="dialog">
		  <div class="modal-dialog">
		    <div class="modal-content">
 
		    	<div class="modal-header">
			        <h3 class="modal-title c"><?php echo $donnees_messages['marca'] ?></h3>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>			      
 
		        <div class="modal-body">
		            <?php echo "<img id='premiere$i' src='images/MECC/".$donnees_messages['fotoG']."'>" ?>
		            <?php echo "<img id='deuxieme$i' src='images/MECC/".$donnees_messages['fotoD']."'"." style='display:none'>" ?>
 
		            <?php echo "<br><img id='img1$i' style='cursor:pointer' src='images/MECC/".$donnees_messages['fotoG']."'"." width='80px'>" ?> 
		            <?php echo "<img id='img2$i' style='cursor:pointer' src='images/MECC/".$donnees_messages['fotoD']."'"." width='80px'>" ?>	            
		        </div>
 
		        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 
		        <script type="text/javascript">
                        $(document).ready(function(){                                   
                                                $("#img1<?php echo $i ?>").click(function() {
                                                        $("#deuxieme<?php echo $i ?>").hide();
                                                        $("#premiere<?php echo $i ?>").show();
                                                });
                                                
                                                $("#img2<?php echo $i ?>").click(function() {
                                                        $("#premiere<?php echo $i ?>").hide();
                                                        $("#deuxieme<?php echo $i ?>").show();
                                                });                                             
                                        });
                  </script>   
		    </div>
		  </div>
		</div>