Animation jQuery ne fonctionne pas en php

**binco** · 18/12/2014, 23h27

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>

**vandenn3** · 19/12/2014, 00h46

Bonsoir,
Que çe passe-t-il si tu remplace ton code PHP par celui-ci ?

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
 
<?php
 
$requete = array(
             array("type"=>"gravure", 
                   "numero"=>"1"), 
             array("type"=>"peinture", 
                   "numero"=>"2"), 
             array("type"=>"monotype",
                   "numero"=>"3"));
 
foreach($requete as $donnee)       
{
    echo utf8_encode('<img src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="petitportrait ' . $donnee['type'] . '"/>');   
}
?>

jquery est-il bien dans le dossier du fichier php?

**binco** · 19/12/2014, 12h01

Merci
Effectivement il manquait le fichier jQuery dans le dossier du fichier php

Animation jQuery ne fonctionne pas en php

jQuery

Vue hybride

Discussions similaires

Partager

Partager