In this tutorial I will show you how to create a filterable portfolio using jQuery. The idea is to display all of your work in a single page that would have a filtering option allowing visitors to filter portfolio items by category. Limiting your portfolio to a single page helps to display all the portfolio items quickly and effectively and the filter makes it easy to navigate.

To filter portfolio items we will use Quicksand plugin. Additionally, we will need Easing Plugin to give advanced easing options and PrettyPhoto plugin to view full-size protfolio items.

The beautiful photos used in the demo are from the portfolio of fashion and beauty photographer Yulia Gorbachenko.

Source » Demo »

The Markup

Say we have a number of photos in our portfolio and they can be classified in these categories: Beauty, Hannah, On Fire, Traction, Wavelength or Hair. Let’s create a category filter to navigate through our photos. A simple unordered list will perfectly work:

<ul class="filter">
  <li class="current all"><a href="#">All</a></li>
  <li class="beauty"><a href="#">Beauty</a></li>
  <li class="hannah"><a href="#">Hannah</a></li>
  <li class="onfire"><a href="#">On Fire</a></li>
  <li class="traction"><a href="#">Traction</a></li>
  <li class="wavelength"><a href="#">Wavelength</a></li>
  <li class="hair"><a href="#">Hair</a></li>
</ul>

We assign classes equal to the category name to each list item for later use in jQuery. Additionally, we add one more list item “All” to view all portfolio items. We also assign the class "current" to this item because we want to show all portfolio items in the default view.

Now when we have our filter let’s move on and create one more list to hold our portfolio items:

<ul class="portfolio">
  <li data-id="id-1" data-type="hannah">
    <a href="images/hannah_yg.jpg" rel="prettyPhoto[portfolio]">
      <img src="images/hannah_yg_thumb.jpg" />
    </a>
  </li>
  <li data-id="id-2" data-type="hair">
    <a href="images/bianca_yg.jpg" rel="prettyPhoto[portfolio]">
      <img src="images/bianca_yg_thumb.jpg" />
    </a>
  </li>
  <li data-id="id-3" data-type="traction">
    <a href="images/heather_yg.jpg" rel="prettyPhoto[portfolio]">
      <img src="images/heather_yg_thumb.jpg" />
    </a>
  </li>
  ...
</ul>

Each list item contains the thumbnail image with an anchor tag around it. The anchor’s href attribute defines the URL of the full-size image and the rel attribute is necessary for the PrettyPhoto plugin that we will use later.

You may have also noticed that every list item has data-id and data-type attributes. Both are necessary for the Quicksand plugin. data-id is a unique identifier and data-type defines the category to which the portfolio item is assigned. Note that data-* is a perfectly valid HTML5 attribute.

The CSS

This isn’t a tutorial on CSS, so I won’t go into great detail about how to style the gallery. You can see my stylesheet in the source files attached to this post. I would just like to note that I have used several selectors and properties that are not supported in the earlier versions of IE.

The jQuery

First, we include the latest version of jQuery library and necessary plugins in the head of our document. For the prettyPhoto plugin we also need to include prettyPhoto stylesheet that comes with the plugin:

<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"/>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

Next, when the document is loaded we initialize the prettyPhoto plugin. The prettyPhoto plugin accepts a number of parameters so you can easily customize it:

$(document).ready(function(){
  $(".portfolio a[rel^='prettyPhoto']").prettyPhoto({
    theme:'light_square',
    autoplay_slideshow: false,
    overlay_gallery: false
  });

Then we add some code to handle the Quicksand plugin:

var $portfolioClone = $(".portfolio").clone();
$(".filter a").click(function(e){
  $(".filter li").removeClass("current");
  var $filterClass = $(this).parent().attr("class");
  if ($filterClass == "all") {
    var $filteredPortfolio = $portfolioClone.find("li");
  } else {
    var $filteredPortfolio = $portfolioClone.find("li[data-type~="+$filterClass+"]");
  }

Quicksand works by comparing two collections of items and replacing them with a nice shuffling animation. By appending .clone() to our portfolio list and assigning it to $portfolioClone, we get a copy of the original list items that we will use later.
Once the link in the category filter is clicked, we want to remove the class current from the list item that has it and to determine which link has been clicked by taking the class value and assigning it to the $filterClass. In the case if the “All” link has been clicked, we want to show all of the portfolio items. Otherwise, we want to show only those list items that have data-type attribute with a value containing $filterClass.

    $(".portfolio").quicksand( $filteredPortfolio, {
      duration: 800,
      easing: 'easeInOutQuad'
    }, function(){
      $(".portfolio a[rel^='prettyPhoto']").prettyPhoto({
        theme:'light_square',
        autoplay_slideshow: false,
        overlay_gallery: false
      });
    });
    $(this).parent().addClass("current");
    e.preventDefault();
  })
});

Finally, we call quicksand. $filteredPortfolio which was assigned in the if statement contains filtered portfolio items that are to be displayed instead of the original portfolio items. We can also specify how long the animation will take, the easing type for the animation (don’t forget to include jQuery Easing Plugin for this) and other optional parameters. As the last argument we include a callback function to apply prettyPhoto on newly cloned portfolio items as well.

In the last lines of code we add the class current to the parent of the clicked link and call preventDefault() to prevent the browser jump to the link anchor.

With that our filterable portfolio is finished. I hope you enjoyed the tutorial and find it useful! I tried to explain everything as best as I can and if you have any questions, please feel free to ask.

Follow us on Twitter, or subscribe to RSS Feed for more tutorials and posts.