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:
- jQuery 1.3+
- QuickSand Plugin
- jQuery easing ( yes Robert Penners ?)
- 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 :-)
