JQuery : Un slide show capricieux

[Dadou]

Bonjour a tous

J'ai réalisé un double slideshow sous jquery, il fonctionne niquel sous Firefox, Chrome et Safari, mais comme d'hab, IE fait son petit malin.

<script type="text/javascript">
    var curritem = 0;
    var speed = 10000

    $(document).ready(function() {        
    NbElement = $(".slider li").length;
    $(".slider")
        .wrap('<div class="slider-conteneur"></div>')
        .css("width", (721 * NbElement) );

    $(".min-slider")
        .wrap('<div class="min-slider-conteneur"></div>');

    $(".slider-conteneur")
        .width(  579  )
        .height( 402 )
        .css("overflow", "hidden")
        .css("margin-right", "2px");


    $(".slider-conteneur li")
        .css( "float", "left" );

    $(".slider-conteneur li a img")
        .css( "border", "none" );

    $(".min-slider-conteneur")
        .width(140)
        .height(402)
        .css( "float", "right" )
        .css("overflow", "hidden");

    $(".min-slider-conteneur li")
        .css( "float", "left" )
        .css( "margin-bottom", "-1px" );

    $(".min-slider-conteneur li img[slide]").click(function(){
        curritem = $(this).attr("slide");
        next();
        clearInterval(timer);
        timer = setInterval(next,speed);
    });


    var timer = setInterval(next,speed);

    function next() {
        curritem++;
        if(curritem == NbElement ) {
            curritem = 0;
            $(".slider").css("margin-left", "0px");
            $(".min-slider").css("margin-top", "0px");
        }
        $(".slider").animate({
            marginLeft : - (579 * (curritem))
        });
        $(".min-slider").animate({
            marginTop : - (101 * (curritem))
        });
    }

});
</script>
<div id="slideshow" style="width:723px;height:402;overflow:hidden;">
            <ul class="min-slider">

                <li><img src="images/carousel/thumbs/img1.jpg" width="140" height="99" alt="" slide="1"  /></li>
                <li><img src="images/carousel/thumbs/img2.jpg" width="140" height="99" alt="" slide="2"  /></li>
                <li><img src="images/carousel/thumbs/img3.jpg" width="140" height="99" alt="" slide="3"  /></li>
                <li><img src="images/carousel/thumbs/img4.jpg" width="140" height="99" alt="" slide="4" /></li>
                <li><img src="images/carousel/thumbs/img5.jpg" width="140" height="99" alt="" slide="5" /></li>
                <li><img src="images/carousel/thumbs/img6.jpg" width="140" height="99" alt="" slide="6" /></li>
                <li><img src="images/carousel/thumbs/img1.jpg" width="140" height="99" alt="" slide="1"  /></li>
                <li><img src="images/carousel/thumbs/img2.jpg" width="140" height="99" alt="" slide="2"  /></li>
                <li><img src="images/carousel/thumbs/img3.jpg" width="140" height="99" alt="" slide="3"  /></li>
                <li><img src="images/carousel/thumbs/img4.jpg" width="140" height="99" alt="" slide="4" /></li>

            </ul>
            <ul class="slider">
                <li><a href="en/offer/technology-ip"><img src="images/carousel/img1.jpg" width="579" height="402" alt="" /></a></li>
                <li><a href="en/offer/pmatrix"><img src="images/carousel/img2.jpg" width="579" height="402" alt="" /></a></li>
                <li><a href="en/offer/touchpark"><img src="images/carousel/3.jpg" width="579" height="402" alt="" /></a></li>
                <li><a href="en/offer/professional-services"><img src="images/carousel/img4.jpg" width="579" height="402" alt="" /></a></li>
                <li><a href="en/offer/technology-ip"><img src="images/carousel/img5.jpg" width="579" height="402" alt="" /></a></li>
                <li><a href="en/offer/technology-ip"><img src="images/carousel/img6.jpg" width="579" height="402" alt="" /></a></li>
                <li><a href="en/offer/technology-ip"><img src="images/carousel/img1.jpg" width="579" height="402" alt="" /></a></li>
            </ul>

Le grand glissant vers la gauche fonctionne parfaitement, le petit avec 4 vignettes et glissant vers le haut, ne remonte qu'une fois, j'en ai un peu ras le de ce navigateur de .

Quelqu'un aurait une idée de ce qui vient le perturber dans son fonctionnement?

[captain_torche]

Tu as une URL de test ?

[Dadou]

Pas sous la main tout de suite

[captain_torche]

Je viens de regarder sans les images, effectivement ça bloque

C'est le animate du .min-slider qui semble poser problème, je regarde ça.

[Dadou]

Oui, c'est effectivement le .min-slider qui bloque mais alors pourquoi et pourquoi uniquement sous IE, le vilain pas beau

[captain_torche]

Avec le debugger sous IE, je vois pourtant bien les propriétés CSS modifiées. C'est vraiment bizarre.

[Dadou]

Je ne suis pas fou alors.

Surtout que j'ai appliqué strictement le même type d'effets que pour le slide horizontal, ça marche dans un cas et pas dans l'autre.

[captain_torche]

Je regarderai dans la journée s'il y a une autre déclaration qui bloque la marge sous IE, mais c'est vrai que c'est bizarre.

Sinon, il existe des plugins tout prêts pour faire du slideshow avec jquery, si jamais tu veux reprendre le code

[Dadou]

Ok merci, je vais jeter un oeil sur le code du plugin et voir si j'y trouve des trucs intéressants

[Dadou]

Bon, et bien j'ai trituré cela un peu dans tous les sens, et maintenant ça marche, pourquoi je sais pas

voila le JS

 <script type="text/javascript">
    var curritem = 0;
    var speed = 8000;

    $(document).ready(function() {        
    NbElement = $(".slider li").length;
    $(".slider")
        .wrap('<div class="slider-conteneur"></div>')
        .css("width", (721 * NbElement) );

    $(".min-slider")
        .wrap('<div class="min-slider-conteneur"></div>');

    $(".slider-conteneur")
        .width(  579  )
        .height( 402 )
        .css("overflow", "hidden")
        .css("margin-right", "2px");


    $(".slider-conteneur li")
        .css( "float", "left" );

    $(".slider-conteneur li a img")
        .css( "border", "none" );

    $(".min-slider-conteneur")
        .width(140)
        .height(402)
        .css( "float", "right" )
        .css("overflow", "hidden");

    $(".min-slider-conteneur li")
        .css( "float", "left" )
        .css( "margin-bottom", "-1px" );

    $(".min-slider-conteneur li img[slide]").click(function(){

        curritem = $(this).attr("slide")-2;
        next();
        clearInterval(timer);
        timer = setInterval(next,speed);
    });

    var timer = setInterval(next,speed);

    function next() {
        curritem++;
        if(curritem == NbElement ) {
            curritem = 0;
            $(".slider").css("margin-left", "0px");
            $(".min-slider").css("margin-top", "0px");
        }
        $(".slider").animate({
            marginLeft : - (579 * (curritem))
        });
        $(".min-slider").animate({
            marginTop : - (101 * (curritem))
        });
    }

});
</script>
<div id="slideshow" style="width:721px;height:402px;overflow:hidden;">
        <ul class="min-slider">
<li><img src="images/carousel/thumbs/img1.jpg" width="140" height="99" alt="" slide="2" /></li>
                <li><img src="images/carousel/thumbs/img2.jpg" width="140" height="99" alt="" slide="3" /></li>
                <li><img src="images/carousel/thumbs/img3.jpg" width="140" height="99" alt="" slide="4" /></li>
                <li><img src="images/carousel/thumbs/img4.jpg" width="140" height="99" alt="" slide="5" /></li>
                <li><img src="images/carousel/thumbs/img5.jpg" width="140" height="99" alt="" slide="1"  /></li>
                <li><img src="images/carousel/thumbs/img1.jpg" width="140" height="99" alt="" slide="2" /></li>
                <li><img src="images/carousel/thumbs/img2.jpg" width="140" height="99" alt="" slide="3" /></li>
                <li><img src="images/carousel/thumbs/img3.jpg" width="140" height="99" alt="" slide="4" /></li>
                <li><img src="images/carousel/thumbs/img4.jpg" width="140" height="99" alt="" slide="5" /></li>
            </ul>
            <ul class="slider">
                <li><img src="images/carousel/img1.jpg" width="579" height="402" alt="" /></li>
                <li><img src="images/carousel/img2.jpg" width="579" height="402" alt="" /></li>
                <li><img src="images/carousel/img3.jpg" width="579" height="402" alt="" /></li>
                <li><img src="images/carousel/img4.jpg" width="579" height="402" alt="" /></li>
                <li><img src="images/carousel/img5.jpg" width="579" height="402" alt="" /></li>
                <li><img src="images/carousel/img1.jpg" width="579" height="402" alt="" /></li>
            </ul>
        </div>        
    </div>

[captain_torche]

L'essentiel, c'est que ça marche

Tu as pu te pencher un peu sur le plugin?

[paolodelmare]

J'ai déjà eu des bugs inexplicables avec jq/Ie.

J'ai réussi a résoudre quelques soucis avec les options suivantes :

-placer un bon doctype (que j'avais omis parce que je faisais juste un essai)

-placer le code js en fin de page

-vérifier que ma version de js était la dernière à jour

-valider le html

-triturer le code dans tout les sens sans de démarche très logique

et parfois passer à un plugin tout fait (celui de captain_torche) notamment.

[Dadou]

Tu as pu te pencher un peu sur le plugin?

Oui je me suis penché dessus, je vais certainement m'en inspirer pour adapter mon code en plugin, et facilité l'implémentation d'options.

et parfois passer à un plugin tout fait (celui de captain_torche) notamment.

Il y a juste un défaut avec les plugins tout fait en général, c'est la tendance à l'obésité, car ils doivent penser à tous les cas.

[paolodelmare]

Il y a juste un défaut avec les plugins tout fait en général, c'est la tendance à l'obésité, car ils doivent penser à tous les cas.

C'est vrai que c'est souvent leur inconvénient.