Remplacer le src d'une image par les images provenant de la boucle while

Version imprimable

10/01/2020, 13h24
gaelfrancky

Remplacer le src d'une image par les images provenant de la boucle while

Salut, je suis un débutant en développement web et je viens à peine de commencer l'apprentissage du Jquery voici mon problème : je voudrais changer le src d'une image provenant d'un lien enregistré dans la BDD, par d'autres images provenant aussi de la BDD, l'image principale est affiché grâce à une requête sql et une boucle PHP.
Les autres images aussi sont afficher de la même manière, je voudrais qu'en cliquant sur l'une de ces images, l'image principale soit remplacer .
10/01/2020, 18h03
javatwister

Bonjour,

Donc,

Code:

image_principale.src=image_cliquee.src;

voici le code qui ne marche pas

Code:

1
2
3
4
5
6
7
8
9
10
11
<img src= '<?php echo "administrateur/" .$photo; ?>'  id="photo_principale" /> 
 
// les images  qui doivent remplacer  l’image principale sur clique 
 
<?php $req = $bdd-> query ("SELECT * FROM couleur_article WHERE heure='$date' "); ?> <?php while($donnees = $req -> fetch()) { ?> <img src= '<?php echo "administrateur/" .$donnees['couleur']; ?>’  id="photochoix"  /> <?php } ?>
 
 <script>
 
 /* le script jquery qui permet de remplacer l’image principale en cliquant sur n’importe quel autre image provenant de la boucle while */ 
 
$(function() { $('#photochoix').on('click',function(){ $('#photo_principale').attr('src','<?php echo "administrateur/" .$donnees['couleur'];  ?>'); }); }); </script>

16/01/2020, 14h22
javatwister

Ne mets pas d'instruction php dans une fonction javascript!
Pense que quand javascript commence à agir, la page est écrite en HTML donc php n'a plus de sens...
Quand tu cliques sur #photochoix, le src de l'image principale doit être celui de #photochoix... (this ou event.target selon la méthode d'appel)

Bonjour,

Il faut mettre une classe commune (pas un id) :

Code:

1
2
3
4
5
6
7
8
<img src="<?php echo "administrateur/" .$photo; ?>" id="photo_principale" /> 
 
<?php   // les images  qui doivent remplacer  l’image principale sur clique 
$req = $bdd-> query ("SELECT * FROM couleur_article WHERE heure='$date' ");
while( $donnees = $req->fetch() ) { 
?>
	<img src="<?php echo "administrateur/" .$donnees['couleur']; ?>" class="photochoix" />
<?php } ?>

Code:

1
2
3
4
5
6
7
8
<script>
/* le script jquery qui permet de remplacer l’image principale en cliquant sur n’importe quel autre image provenant de la boucle while */ 
$(function() { 
	$('.photochoix').on('click', function(){ 
		$('#photo_principale').attr('src', $(this).attr('src') ); 
	}); 
});
</script>

16/01/2020, 21h39
gaelfrancky

Ça marche enfin, merci beaucoup à vous.