Discussion :

[gaelfrancky]

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 .

[javatwister]

Bonjour,

Donc,

Code :

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

image_principale.src=image_cliquee.src;

[gaelfrancky]

Code:

Code HTML :

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

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>

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

[Invité]

Bonjour,

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

Code mixte :

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

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

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

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>

[gaelfrancky]

Ça marche enfin, merci beaucoup à vous.