Using jQuery and Quicksand plugin to create an animated portfolio filter

  • 0
  • April 19, 2011
Max Shearer

Max Shearer

Designer

Plugins to sort and filter elements using jQuery aren’t exactly few and far between. However, when it came to implementing a filter on our client list page, there weren’t any that looked as smooth and complete as the Quicksand jQuery plugin. Not only does it work very well, but it’s incredibly easy to execute and manipulate.

Essentially, the plugin works by taking an element or group of elements, and replacing them with others. This can be done in several ways which are outlined on the plugin site, but the way I chose involved cloning the original unordered list, and displaying ones with a particular data-type attribute.

The HTML

In ul#filterClients, each of the anchor tags has a class. This class will define what you’re filtering when clicking on that anchor.

ul#clients has all of the items that I want to filter through. You’ll notice that each of these has a ‘data-type’ attribute. This is a perfectly valid attribute in HTML5, and you can technically prepend ‘data-‘ to any string and have a valid attribute. The ‘data-type’ attribute will correspond to the class of whichever link is clicked in ul#filterClients. Each list item must have an individual ‘data-id’ attribute for the plugin to work. I’ve not looked into why this happens, but can only assume that it’s something to do with the positioning of the individual element.

The jQuery

At this point, it’s probably worth going through the jQuery step-by-step.
$('ul.clients') selects any unordered lists with a class of ‘clients’ and assigns them to the variable $clientsHolder. In the next line, by appending .clone() to the variable and assigning it to $clientsClone, we get a copy of the original list items that can be used later on in the function.
In this part of the function, an event handler is assigned to the click event. e.preventDefault() simply stops whatever what was being clicked on from doing what it was meant to. In this case, it is stopping it from jumping to the top of the page due to the # in the href.

The next line is taking the class value from whatever item was clicked and assigning it to the $filterClass variable for use later.

The last two lines are for removing the ‘active’ class from the previous filter list item and adding it to the one that has been clicked.

This if statement sees if the anchor that has been clicked has the class ‘all’. If so, then every list item from the $clientsClone variable that was assigned earlier, should be passed into the Quicksand function call. If not, then only list items that have a data-type containing the class from the clicked anchor.

The last part of the jQuery calls the Quicksand function. $filters which was assigned in the previous if statement contains all the elements that are to be displayed in $clientsHolder — the unordered list that contained the original data. duration: is the number in milliseconds that it will take for the animation to complete, and easing: is the type of ease that the animation uses. Both of these are both optional parameters.

Note: you need to have the jQuery easing plugin referenced in your <head> if you include the easing parameter, otherwise the script will not work!

I deliberately left out any CSS of this walkthrough as it doesn’t make a huge amount of difference, and if you’re good enough to delve into jQuery this far, you can probably write your own CSS!

See it in action on our clients page. Happy filtering!

Free of charge. Unsubscribe anytime.