Comment puis-je créer un curseur jquery filtrable pour un portfolio?

J'essaie de créer un portfolio filtrable en utilisant un curseur jquery, en utilisant easySlider et du code que j'ai adapté à partir de divers didacticiels. Les éléments du portfolio sont rendus comme une liste non ordonnée, et montrés ou cachés en fonction de leur classe css. J'ai réussi à faire fonctionner cette partie correctement, mais je ne sais pas quoi faire à propos du curseur. Il ne montre plus les éléments cachés, mais continue d'afficher des diapositives vides là où ils étaient.Comment puis-je créer un curseur jquery filtrable pour un portfolio?

Toutes les idées sur la façon dont je peux effacer la fonction du curseur, puis l'appeler de nouveau après chaque filtrage du curseur.

Voici mon code à ce jour:

$(document).ready(function(){ 

    $("#slider").easySlider({ 
     auto: true, 
     continuous: true, 
     numeric: true, 
     controlsBefore: '', 
     pause: 3000 
    }); 

    $("#filter-portfolio a").click(function() { 
     $('#filter-portfolio .filteredby').removeClass('filteredby'); 
     $(this).addClass('filteredby'); 

     var filterVal = $(this).text().toLowerCase().replace(' ','-'); 

     if(filterVal == 'both') { 
       $('#slider li.hidden').removeClass('hidden'); 
     } 
     else { 
      $('#slider li').each(function() { 
       if(!$(this).hasClass(filterVal)) { 
        $(this).addClass('hidden'); 
        $(this).remove(); 
       } else { 
        $(this).removeClass('hidden'); 
        $('#slider li').appendTo('#slider ul'); 
       } 
      }); 

      var count = $("#slider ul li:not('.hidden')").length -1; 
      $('#controls li:not(li:lt(' + count + '))').remove(); 
     } 
     return false; 
    }); 
});

Toute aide est très appréciée, comme je déchire mes cheveux ici! Faites-moi savoir si j'ai manqué toute information nécessaire.

EDIT: Comme demandé, voici un exemple du page in action.

Merci, Sam

Source

2009-12-09 Anonymous

Salut Sam, merci pour votre question. Je serais ravi de vous aider si vous pouviez télécharger un exemple d'où vous en êtes maintenant pour que je puisse voir exactement ce qui se passe dans un navigateur. –

Bonne idée, j'ai mis à jour le message original avec un exemple de lien –

Avez-vous eu de la chance avec ce Sam? –

Cela devrait fonctionner pour vous.

<script type="text/javascript"> 


$(document).ready(function(){ 

    //Make a true copy of the UL before we mess with it 
    $("#slider ul").clone().appendTo("body").addClass("hidden").attr("id", "master"); 

    //Set up our click functionality 
    $("#filter-portfolio a").click(function() { 

     classes = $(this).attr("class"); //Get the actual value of the "class" attribute. 
     classes = "#master li."+classes.replace(/[\s]/ig, ", #master li."); //Turn the class attribute into a jquery search string  
     $("#slider ul").empty(); 
     $(classes).clone().appendTo("#slider ul"); 

     //Kill off any previous sliders  
     clearTimeout($("#slider").attr("rel"));//Clear any pending animations 
     $("#slider ul").attr("style", "");//Clear any styles on the slider ul element 
     $("ol#controls").remove();//Remove the clickbar 

     //Fire EasySlider 
     $("#slider").easySlider({ 
      auto: true, 
      continuous: true, 
      numeric: true, 
      controlsBefore: '', 
      pause: 500 
     }); 

     return false; 
    }); 

    //Fire off a fake click event 
    $("#filter-portfolio a#startup").click(); 

}); 


</script> 

</head> 

<body> 

    <div id="content"> 

     <div id="slider"> 

      <ul>     
       <li class="web"><img src="images/01.jpg" alt="Css Template Preview" /></li> 
       <li class="web"><img src="images/02.jpg" alt="Css Template Preview" /></li> 
       <li class="design"><img src="images/03.jpg" alt="Css Template Preview" /></li> 
       <li class="design"><img src="images/04.jpg" alt="Css Template Preview" /></li> 

       <li class="design"><img src="images/05.jpg" alt="Css Template Preview" /></li>   
      </ul> 

     </div> 

     <div id="filter-portfolio"> 

      <p>Filter portfolio by: <a href="" class="design">design</a>, <a href="" class="web">web</a>, <a href="" class="web design" id="startup">both</a>.</p> 

     </div> 


    </div> 

</body>

S'il vous plaît noter que j'ai changé vos filter-portfolio a éléments afin qu'ils travaillent sur le nom de la classe plutôt que innerHTML. Celui avec l'ID de startup est celui qui est pseudo-cliqué par la fonction de démarrage.

Maintenant, ce bit est important!

Vous devez ajouter ce qui suit à easySlider.1.7.js après les lignes 199 et 208 pour que cela fonctionne.

$(obj).attr("rel", timeout);

Fondamentalement, ce que vous faites est chaque fois qu'une setTimeout() est appelée, vous copiez la valeur retournée timeout dans l'attribut rel de votre #slider. De cette façon, nous pouvons tuer toutes les animations en attente en faisant un clearTimeout() avant de réinitialiser le curseur.

Ou vous pouvez simplement télécharger le easySlider.1.7.js modifié de here

Hope this helps!

Cheers,

Iain

Source

2009-12-15 02:45:46

Comment puis-je créer un curseur jquery filtrable pour un portfolio?

Répondre

Questions connexes