Bonjour

J'ai une page web qui comporte 5 boutons
Je veux qu'en cliquant sur un bouton on affiche uniquement les images ayant une certaine classe (gravure, peinture, monotype ...)

Les animations jQuery fonctionnent bien en html

Mais en php l'animation jQuery ne marche pas
Pouvez vous m'aider?
Cordialement

codage php:
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
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
91
92
93
94
95
96
97
98
99
100
101
 
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<style type="text/css">
.petitportrait
{ 
width:58px; 
height:77px;
margin-top:2px;
margin-right:2px;
margin-bottom:2px;
margin-left:2px;
}
</style>
 
<head>
 
<body>
<button id="b_tout">Tout afficher</button>
<button id="b_gravure">Gravures</button>
<button id="b_peinture">Peinture</button>
<button id="b_monotype">Monotype</button>
<button id="b_dessin">Dessin</button>
 
<br><br><br>
 
<?php
try{
$chaine_connexion='mysql:host=localhost;dbname=images_site';					
$utilisation_UFT8=array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8");		
$connexion_bdd = new PDO($chaine_connexion, 'root', '', $utilisation_UFT8);			
$connexion_bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);		
}
catch(PDOException $e){
$msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
die($msg);
}
 
$sql = 'SELECT type,numero,taille,titre,technique FROM liste_images WHERE taille = ?';
$requete1 = $connexion_bdd ->prepare($sql);	
$requete1->bindValue(1, 'petit', PDO::PARAM_STR);		
$requete1->execute();		
 
foreach($requete1->fetchAll() as $donnee)		
{
    echo utf8_encode('<img src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="petitportrait ' . $donnee['type'] . '"/>');	
}
 
$requete1 -> closeCursor();	
$requete1 = NULL;			
 
?>
 
<script src="jquery.js"></script>
<script>
 
 
$(function(){
	$('#b_tout').click(function(){	
		$('.gravure').show(2000);	
		$('.peinture').show(2000);
		$('.monotype').show(2000);
		$('.dessin').show(2000);
	});
	$('#b_gravure').click(function(){
		$('.gravure').show(2000);
		$('.peinture').hide(2000);	
		$('.monotype').hide(2000);
		$('.dessin').hide(2000);
	});
	$('#b_peinture').click(function(){
		$('.gravure').hide(2000);
		$('.peinture').show(2000);
		$('.monotype').hide(2000);
		$('.dessin').hide(2000);
	});
	$('#b_monotype').click(function(){
		$('.gravure').hide(2000);
		$('.peinture').hide(2000);
		$('.monotype').show(2000);
		$('.dessin').hide(2000);
	});
	$('#b_dessin').click(function(){
		$('.gravure').hide(2000);
		$('.peinture').hide(2000);
		$('.monotype').hide(2000);
		$('.dessin').show(2000);
	});
});
 
</script>
 
</body>
 
</html>
code source de la page:
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
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
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<style type="text/css">
.petitportrait
{ 
width:58px; 
height:77px;
margin-top:2px;
margin-right:2px;
margin-bottom:2px;
margin-left:2px;
}
</style>
 
<head>
 
<body>
<button id="b_tout">Tout afficher</button>
<button id="b_gravure">Gravures</button>
<button id="b_peinture">Peinture</button>
<button id="b_monotype">Monotype</button>
<button id="b_dessin">Dessin</button>
 
<br><br><br>
 
<img src="gravure1petit.jpg" class="petitportrait gravure"/><img src="gravure2petit.jpg" class="petitportrait gravure"/><img src="gravure3petit.jpg" class="petitportrait gravure"/><img src="dessin1petit.jpg" class="petitportrait dessin"/><img src="dessin2petit.jpg" class="petitportrait dessin"/><img src="monotype1petit.jpg" class="petitportrait monotype"/><img src="peinture1petit.jpg" class="petitportrait peinture"/><img src="peinture2petit.jpg" class="petitportrait peinture"/>
<script src="jquery.js"></script>
<script>
 
 
$(function(){
	$('#b_tout').click(function(){	
		$('.gravure').show(2000);	
		$('.peinture').show(2000);
		$('.monotype').show(2000);
		$('.dessin').show(2000);
	});
	$('#b_gravure').click(function(){
		$('.gravure').show(2000);
		$('.peinture').hide(2000);	
		$('.monotype').hide(2000);
		$('.dessin').hide(2000);
	});
	$('#b_peinture').click(function(){
		$('.gravure').hide(2000);
		$('.peinture').show(2000);
		$('.monotype').hide(2000);
		$('.dessin').hide(2000);
	});
	$('#b_monotype').click(function(){
		$('.gravure').hide(2000);
		$('.peinture').hide(2000);
		$('.monotype').show(2000);
		$('.dessin').hide(2000);
	});
	$('#b_dessin').click(function(){
		$('.gravure').hide(2000);
		$('.peinture').hide(2000);
		$('.monotype').hide(2000);
		$('.dessin').show(2000);
	});
});
 
</script>
 
</body>
 
</html>