Its been a while since I wrote my last tutorial in 2007 ” play youtube videos in flash tutorial “and now im back with a different topic jQuery *tsk tsk* now lets get started!

What we are trying toachieveis a filterable portfolio based on its categories ( all, web & print ) using quicksand and jQuery…

Demo | Download

Download required files first:

  1. jQuery 1.3+
  2. QuickSand Plugin
  3. jQuery easing ( yes Robert Penners )
  4. Rotation and Scaling Plugin

The HTML:

i omitted the head section with the includes, you can find it in the source code downloadable above!

[cc lang=”html” tab_size=”2″ lines=”60″]

[/cc]

A closer look at the filter menu:

[cc lang=”html” tab_size=”2″ lines=”2″]

  • web
  • [/cc]

    Notice that i added a title attribute for each, in our case here the title attribute is “web”, which will be pulled by jQuery later in a conditional statement…

    A closer look to the list items of the portfolio:

    [cc lang=”html” tab_size=”2″ lines=”2″]

  • [/cc]

    notes the [data-id=”id-1″] which is used for sorting and the [data-type=”web”] used for filtering

    The CSS:

    Nothing fancy below just few lines of basic CSS styling

    [cc lang=”css” tab_size=”2″ lines=”10″]
    #content {width:960px; border: 1px solid #ddd; margin-left: auto ; margin-right: auto ; overflow:hidden; height:auto;}
    #content ul { float:left;}
    #content li { float:left; padding:3px; list-style:none; overflow:hidden;}
    .box { width: 950px;}
    [/cc]

    And finally The jQuery “sortable.js”:

    [cc lang=”jquery” tab_size=”2″ lines=”60″]
    $(document).ready(function() {
    // Custom sorting plugin // — No Need to edit this —\\
    (function($) {
    $.fn.sorted = function(customOptions) {
    var options = {
    reversed: false,
    by: function(a) { return a.text(); }
    };
    $.extend(options, customOptions);
    $data = $(this);
    arr = $data.get();
    arr.sort(function(a, b) {
    var valA = options.by($(a));
    var valB = options.by($(b));
    if (options.reversed) {
    return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
    } else {
    return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
    }
    });
    return $(arr);
    };
    })(jQuery);

    //—————————————- EDIT BELOW ——————————\\

    // Filter Handler
    var $filter = $(‘#menu a’);

    // define portfolio “#div” with the portfolio list ( li ) elements in
    var $portfolio = $(‘#content #items’);

    // clone the “#div”
    var $data = $portfolio.clone();

    // attempt to call Quicksand on every click event handler
    $filter.click(function(e) {

    //check if the title attr is set to “all”
    if ($($(this)).attr(“title”) == ‘all’) {

    //if all then show all list ( li )
    var $filteredData = $data.find(‘li’);

    } else {

    //get the title attribute dynamically using $(this)
    var $filteredData = $data.find(‘li[data-type=’ + $($(this)).attr(“title”) + ‘]’);

    }
    // finally, call quicksand and dump the $fileredData in
    $portfolio.quicksand($filteredData, {
    duration: 800,
    easing: ‘easeInOutQuad’
    });

    });
    });
    [/cc]

    A closer look at the jQuery code :

    the code below defines $filter, thats where the filter requests will come from based on clicks, now remember that each link element has a unique title attribute.

    [cc lang=”jquery” tab_size=”2″ lines=”5″]
    var $filter = $(‘#menu a’);
    [/cc]

    This one defines the path to the portfolio list and adds it to $portfolio

    [cc lang=”jquery” tab_size=”2″ lines=”5″]
    var $portfolio = $(‘#content #items’);
    [/cc]

    Clone the portfolio list

    [cc lang=”jquery” tab_size=”2″ lines=”5″]
    var $data = $portfolio.clone();
    [/cc]

    Add/bind a click event to the function where it first checks if the button/link which was clicked has the “all” attribute, if its true then it will locate all list elements and adds it to $filteredData, if it was false then it will grab the title attribute dynamically, it will then find lists with the similar title attributes and adds it to the $filteredData .

    [cc lang=”jquery” tab_size=”2″ lines=”6″]
    $filter.click(function(e) {
    if ($($(this)).attr(“title”) == ‘all’) {
    var $filteredData = $data.find(‘li’);
    } else {
    var $filteredData = $data.find(‘li[data-type=’ + $($(this)).attr(“title”) + ‘]’);
    }
    [/cc]

    time for some magic *tada* call the quicksand and pass it the $filteredData along with Duration & easing type.

    [cc lang=”jquery” tab_size=”2″ lines=”5″]
    $portfolio.quicksand($filteredData, {
    duration: 800,
    easing: ‘easeInOutQuad’
    });
    [/cc]

    Happy filtering 🙂