QuickSand tutorial – Create a filterable portfolio

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 let’s get started!

What we are trying to achieve is 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"]

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

Related posts:

1. Quick Flash “Prealoder” tutorial .

Tags: filterable, jquery, portfolio, quicksand, sortable