Slide les images se superposent

Version imprimable

Bonjour,

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

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

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

Code:

1
2
3
4
5
6
.slide { display: none; 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;}

Code:

1
2
3
4
5
6
7
8
9
10
11
var jObjSlides = $( '.slide' ),
    n = jObjSlides.length,
    bis = function( ){
        n = ( --n >= 0 ) ? ( n ) : ( jObjSlides.length - 1 );
 
        jObjSlides.eq( n ).fadeIn( 2000, function(){
            $( this ).fadeOut( 2000, bis );
        });
    };
 
setTimeout( bis, 2000 );

22/12/2014, 05h11
binco

Toutes les images apparaissent en même temps lors du 1er tour ???
Ensuite: ça marche
22/12/2014, 11h29
danielhagnoul

Citation:

Envoyé par binco

Toutes les images apparaissent en même temps lors du 1er tour

Impossible avec le "display:none;" !

Manifestement, le mettre en rouge n'a servi à rien. :calim2:
22/12/2014, 11h56
binco

Ça marche

Merci Daniel

Pouvez vous m'expliquer la ligne
n = ( --n >= 0 ) ? ( n ) : ( jObjSlides.length - 1 )

Si n décrémenté est supérieur ou égal à 0 Alors n vaut n Sinon n vaut n-1
Si le nombre d'image décrémenté est supérieur ou égal à 0 Alors le nombre d'image vaut le nombre d'image Sinon le nombre d'image vaut le nombre d'image moins un
22/12/2014, 22h44
danielhagnoul

Au départ, n = jObjSlides.length, donc il faut retirer 1 pour avoir le nombre d'éléments, c'est la raison du --n.

On calcule ainsi la bonne valeur pour le démarrage et pour la suite du cycle.

Si --n (n - 1) est égal ou supérieur à zéro, on garde n, sinon n = jObjSlides.length - 1 (le nombre d'éléments).
22/12/2014, 22h59
binco

Daniel y a un truc (subtil) qui m’échappe

" Au départ, n = jObjSlides.length, donc il faut retirer 1 pour avoir le nombre d'éléments, c'est la raison du --n "

si j'ai 5 images de classes "slide"
alors n = jObjSlides.length = 5 donc on a 5 éléments non?
Donc pourquoi retirer 1 pour avoir le nombre d'éléments (5-1=4 alors qu'on a 5 images)?
22/12/2014, 23h25
danielhagnoul

Numérotation des éléments de 0 à x pas de 1 à Y = x + 1.

Je suis perdu

Daniel je croix que je me perds

cas Nbr image .slide eq(index de 0 à x) length(nombre de 1 à x) n-1 (index=length-1)

cas0 0 image 0 -1

cas1 1 image 0 1 0

cas2 2 images 1 2 1

cas3 3 images 2 3 2

cas4 4 images 3 4 3

cas5 5 images 4 5 4

Si n-1>=0 <=> n>=1 (au moins une image) alors n=n
Si n-1<0 <=> n<1 ou n=0 (pas d'image) alors n=n-1

cas	Nbr image .slide	eq(index de 0 à x)	length(nombre de 1 à x)	n-1 (index=length-1)
cas0	0 image		0	-1
cas1	1 image	0	1	0
cas2	2 images	1	2	1
cas3	3 images	2	3	2
cas4	4 images	3	4	3
cas5	5 images	4	5	4