Animation jQuery ne fonctionne pas en php
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:
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:
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> |
il manquait le fichier jQuery dans le dossier du fichier php
Merci
Effectivement il manquait le fichier jQuery dans le dossier du fichier php
