ansaurus

Question

How can I build a filterable jquery slider for a portfolio?

Answer 1

+1 A:

This should work for you.

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

Please note that I've changed your filter-portfolio a elements so they work on class name rather than innerHTML. The one with the id of startup is the one that gets pseudo-clicked by the startup function.

Now this bit is important!

You need to add the following to easySlider.1.7.js after line 199 and line 208 in order to get this to work.

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

Basically what you're doing is wherever a setTimeout() is called, you copy the returned value timeout into the rel attribute of your #slider. That way, we can kill off any pending animations by doing a clearTimeout() before we reset the slider.

Or you can just download the modified easySlider.1.7.js from here

Hope this helps!

Cheers,

Iain

Iain Fraser 2009-12-15 02:45:46

ansaurus

tags:

views:

answers:

How can I build a filterable jquery slider for a portfolio?

related questions