1 Dernière modification par rutabaga (24-07-2014 21:30:55)

Sujet : plugin slider multiple

Bonjour,

Je dois faire cohabiter trois sliders (classe: diaporama) sur une même page. J'ai donc écris le code suivant le problème est que lorsque je change de slider via les boutons de filtrage, la fonction animate n'utilise pas la bonne valeur pour le déplacement des slides. Il y a un conflit entre les sliders car lorsqu'un seul slider est présent il fonctionne bien. C'est mon premier test de création d'un plugin, je pense m'y être très mal pris. Quelqu'un peut-il m'expliquer mes erreurs de conception? Merci d'avance.

// html // seulement deux pour sliders pour l'exemple

<div class="filtres">filtres <hr/><div><a href="#" id="defbtn">defense</a><a href="#" id="enerbtn">energie</a><a href="#" id="espbtn">espace</a></div></div>
<div class="diaporama" id="energie">
    <div class="navigation"><div class="nav_left"></div><div class="nav_right"></div></div>
    <div id="slide">
        <img class="diapo" src="img/diapo/energie.jpg"><img class="diapo" src="img/diapo/espace.jpg"><img class="diapo" src="img/diapo/energie.jpg">
    </div>
    <div class="container_slide">
        <div class="slide_title"><span>PROJET energie 1</span></div>
        <div class="slide_subtitle">PARTENAIRE PRIVILEGIE DU PROJET ITER</div>
    </div>
    <div class="container_slide">
        <div class="slide_title"><span>PROJET energie 2</span></div>
        <div class="slide_subtitle">PARTENAIRE PRIVILEGIE DU PROJET ITER</div>
    </div>
    <div class="container_slide">
        <div class="slide_title"><span>PROJET energie 3</span></div>
        <div class="slide_subtitle">PARTENAIRE PRIVILEGIE DU PROJET ITER</div>
    </div>
</div>
<div class="diaporama" id="espace">
    <div class="navigation"><div class="nav_left"></div><div class="nav_right"></div></div>
    <div id="slide">
        <img class="diapo" src="img/diapo/energie.jpg"><img class="diapo" src="img/diapo/espace.jpg"><img class="diapo" src="img/diapo/energie.jpg">
    </div>
    <div class="container_slide">
        <div class="slide_title"><span>PROJET ITER</span></div>
        <div class="slide_subtitle">PARTENAIRE PRIVILEGIE DU PROJET ITER</div>
    </div>
    <div class="container_slide">
        <div class="slide_title"><span>PROJET 2</span></div>
        <div class="slide_subtitle">PARTENAIRE PRIVILEGIE DU PROJET ITER</div>
    </div>
    <div class="container_slide">
        <div class="slide_title"><span>PROJET 3</span></div>
        <div class="slide_subtitle">PARTENAIRE PRIVILEGIE DU PROJET ITER</div>
    </div>
</div>

// js pour les filtres //

$(window).load(function(){
    var oldfilter = $( "#defbtn" );
    $( "#defbtn" ).css('background','#d73d3e');
    $( "#defbtn" ).css('color','#ffffff');
    
    // Change slider:
    var obj = $("#defense");
    $("#energie").css('display','none');
    $("#espace").css('display','none');
    $('#defense').diaporama();
    
    $( "#espbtn" ).click(function( event ) {
    event.preventDefault();
    obj.css('display','none');
    obj = $("#espace");
    obj.css('display','block');
    oldfilter.removeAttr('style');
    $( "#espbtn" ).css('background','#d73d3e');
    $( "#espbtn" ).css('color','#ffffff');
    oldfilter = $( "#espbtn" );
    $('#espace').diaporama();
    });
    
    $( "#defbtn" ).click(function( event ) {
    event.preventDefault();
    obj.css('display','none');
    obj = $("#defense");
    obj.css('display','block');
    oldfilter.removeAttr('style');
    $( "#defbtn" ).css('background','#d73d3e');
    $( "#defbtn" ).css('color','#ffffff');
    oldfilter = $( "#defbtn" );
    $('#defense').diaporama();
    });
    
    $( "#enerbtn" ).click(function( event ) {
    event.preventDefault();
    obj.css('display','none');
    obj = $("#energie");
    obj.css('display','block');
    oldfilter.removeAttr('style');
    $( "#enerbtn" ).css('background','#d73d3e');
    $( "#enerbtn" ).css('color','#ffffff');
    oldfilter = $( "#enerbtn" );
    $('#energie').diaporama();
    });
    
});    

// plugin diaporama //

(function($){
    $.fn.diaporama = function() {
 
        var current_txt=1;
        var current_slide=1;
        var obj = $(this);
        var total_slide = obj.children('#slide').children('.diapo').length;
        obj.children().removeAttr('style');
        obj.children().children().removeAttr('style');
        var largeur = obj.children('#slide').children('.diapo').width()+30;
        defineNav();
        
        //define nav
        function defineNav(){
            if(current_slide==1){
                $(".nav_left").css('display','none');
            }
        else if(current_slide==total_slide){
            $(".nav_right").css('display','none');
            }
        else{
            $(".nav_left").css('display','block');
            $(".nav_right").css('display','block');
            }
        }
        
        //navigation
        $(".nav_left").click(function() {
            var largeur = $('.diapo').width()+30;
            obj.children('#slide').children('.diapo').animate({left: '+='+largeur }, 1200);
            obj.children('.container_slide').css('display','none');
            current_txt--;
            obj.children('.container_slide').eq(current_txt-1).fadeIn("slow");
            current_slide--;
            defineNav();
        });
        
        $(".nav_right").click(function() {
            obj.children('#slide').children('.diapo').animate({left: '-='+largeur }, 1200);
            obj.children('.container_slide').css('display','none');
            current_txt++;
            obj.children('.container_slide').eq(current_txt-1).fadeIn("slow");
            current_slide++;;
            defineNav();
        });                       
    };
})(jQuery);

Bizarrement après avoir appliqué un style sur les images avec des transitions css le problème est résolu mais j'imagine que le bug est toujours présent et le animate jquery ne se déclenche qu'après la fin de la transition css. Y-aurait-il une interaction entre l'évènement js déclenché par la transition css et le code jquery ?

le css //

#slide img{width:100%;height:auto;max-width:735px;max-height:386px;display:inline_block;position:relative;z-index:2;filter: brightness(1);-webkit-filter: brightness(1);-moz-filter: brightness(1);-o-filter: brightness(1);-ms-filter: brightness(1);-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.myfilter{filter: brightness(0.2) !important;-webkit-filter: brightness(0.2) !important;-moz-filter: brightness(0.2) !important;-o-filter: brightness(0.2) !important;-ms-filter: brightness(0.2) !important;}

la fonction jquery modifiée //

function defineNav(){
            if(current_slide==1){
                obj.children().children('.nav_left').css('display','none');
                obj.children('#slide').children('.diapo').eq(0).removeClass('myfilter');
                obj.children('#slide').children('.diapo').eq(1).addClass('myfilter');
                obj.children('#slide').children('.diapo').eq(2).addClass('myfilter');
            }
        else if(current_slide==total_slide){
            obj.children().children('.nav_right').css('display','none');
            obj.children('#slide').children('.diapo').eq(2).removeClass('myfilter');
                obj.children('#slide').children('.diapo').eq(1).addClass('myfilter');
                obj.children('#slide').children('.diapo').eq(0).addClass('myfilter');
            }
        else{
            obj.children().children('.nav_left').css('display','block');
            obj.children().children('.nav_right').css('display','block');
            obj.children('#slide').children('.diapo').eq(1).removeClass('myfilter');
                obj.children('#slide').children('.diapo').eq(0).addClass('myfilter');
                obj.children('#slide').children('.diapo').eq(2).addClass('myfilter');
            }
        }