Jquery cycle plugin

Bonjour,

J'utilise le "Jquery cycle plugin".
J'ai pris comme base l'exemple suivant : http://jquery.malsup.com/cycle/adv2.html
que j'ai modifié pour avoir une image qui en pousse une autre, ce qui donne cela : http://ultra-annuaire.fr/help/index.html

Mon problème c'est que lorsque les 3 images ont défilé et que le cycle recommence, l'image suivante ne reste pas au dessus comme les précédentes.

Est-ce que cela ne viendrait pas de la propriété zIndex de CSS ?
Si la valeur zIndex de l'image suivante est plus petite, et elle l'est lorsqu'elle a fait le tour et recommence un cycle, alors elle passe en dessous. Si c'est ca, je ne vois pas comment faire. Ca fait plusieurs jours que je galère. J'ai fait de nombreux essais, mais sans succès.

Merci d'avance pour votre aide.

Voici les paramètres que j'utilise pour mon diaporama :

$('#s1').cycle({
    fx: 'custom',
    cssBefore: { 
        top:  0,
        left: 0,
        width: 0,
        height: 0, 
        zIndex: 1
    },
    animIn:  { 
        width: 300,
        height: 400
    },
    animOut: { 
        top:  0,
        left: 332,
        width: 300,
        height: 400
    },
    cssAfter: { 
        top:  0,
        left: 332,
        width: 300,
        height: 400, 
        zIndex: 0
    }
});

Modifié par jfnoe (11 Nov 2010 - 21:59)

Bonjour,

Je pense que c'est plutôt un problème avec le paramètre opacity

J'ai essayé en faisant cela :

$('#s1').cycle({
    fx: 'custom',
    speed: 500,
    delay: 1000,
    cssBefore: { 
        top:  0,
        left: 0,
        width: 0,
        height: 0, 
        opacity : 0,
        zIndex: 1
    },
    animIn:  { 
        width: 300,
        opacity : 1,
        height: 400
    },
    animOut: { 
        top:  0,
        left: 332,
        width: 300,
        opacity : 2,
        height: 400
    },
    cssAfter: { 
        top:  0,
        left: 332,
        width: 300,
        height: 400,
        opacity : 3,
        zIndex: 0
    }
});

Cela ne règle pas le problème mais on voit apparaitre la photo 1 juste avant que la photo 2 ne prenne sa place.

Donc c'est peut-être une piste...

Bonjour mab07,
merci pour ta réponse.

J'ai décalé et ralenti l'animation pour mieux voir le problème : http://ultra-annuaire.fr/help/index1.html

animOut: {  
top:  60,

Là on voit bien que l'image 1 ne reste pas sur l'image 3 à la fin du cycle. L'image 1 vient bien dessus mais disparait pour réapparaitre ensuite. Est-ce que le problème viendrait du cssAfter vu que c'est à ce moment là que l'image n'apparait pas pour apparaitre plus tard ?
Ce qui n'est pas logique, c'est que cela fonctionne avec toutes les autres images sauf avec la 1 et 3. Et si je mets plus d'image, le problème est toujours avec la dernière et la 1ere image. C'est donc avec le recommencement du cycle qu'il y a l'erreur, non ?
Modifié par jfnoe (15 Nov 2010 - 10:41)