Bonjour,

Je fais appel a une bdd pour faire défiler les images de classe "slide" avec une animation jQuery

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
 
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<style type="text/css">
.slide { position: absolute; left: 0px; top: 200px; }
#img1 {z-index: 1;}
#img2 {z-index: 2;}
#img3 {z-index: 3;}
#img4 {z-index: 4;}
#img5 {z-index: 5;}
</style>
 
<head>
<body>
 
<?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 * FROM liste_image WHERE slide=?';
$requete1 = $connexion_bdd ->prepare($sql);
$requete1->bindValue(1, 'ok', PDO::PARAM_STR);
$requete1->execute();
$az=0;
 
foreach($requete1->fetchAll() as $donnee)
{
	$az==$az++;
	echo utf8_encode('<img src="' . $donnee['type'] . '' . $donnee['numero'] . 'petit.jpg" class="slide" id="img' . $az . '"/>');
}
$requete1 -> closeCursor();
$requete1 = NULL;
?>
 
<script src="jquery.js"></script>
<script>
$( function(){ 
 
    var bis = function( ){
        $( '.slide' ).fadeIn( 2000 );
 
        var jObj = $( '.slide:first' );	
 
        jObj.fadeOut( 2000, $.proxy( suivante, jObj ) );
    }
 
 
    var suivante = function( ){
        var jObj = this.next( '.slide' );
 
        if ( jObj.length > 0 ){		
            jObj.fadeOut( 2000, $.proxy( suivante, jObj ) );
        } else {				
            bis();
        }
    }
 
    bis();
});
</script>
 
</body>
 
</html>
En regardant le code source de la page, l'appel des images du slide semble fonctionner :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<img src="dessin2petit.jpg" class="slide" id="img1"/>
<img src="gravure17petit.jpg" class="slide" id="img2"/>
<img src="monotype 1petit.jpg" class="slide" id="img3"/>
<img src="gravure41petit.jpg" class="slide" id="img4"/>
<img src="peinture10petit.jpg" class="slide" id="img5"/>

Par contre, toutes les images se superposent.
Avez-vous une solution ?

Cordialement