A jQuery Portfolio Plugin that's Interactive and Filterable

Update: Since this post was written, we have rebuilt the New Media Campaigns website.  There still is a filtering portfolio, but it is now based on the jQuery isotope plugin.  This is a much better plugin however it does cost $40 for commercial use.  The plugin below still works great, but it doesn't animate quite as nicely.

See a Demo

Read The Documentation

Download the Plugin and Zip

Last week we finally launched our new site design. One of our favorite new features is our filtering portfolio. We've selected 50 of the websites we've done to be featured and we've categorized each one. Using jQuery, it is possible to filter through the big list to see sites that apply to certain categories. Feel free to test it out and sort through it here.

Some of the requirements we had when we built it were:

• It should be easy to update
• Each item should be able to be in multiple categories
• We should be able to link to certain filters with a url hash

To get this done, Josh, Eli and I collaborated on different aspects. We've finally finished it up and wrapped it up in a plugin that can be used by anyone. To download a zip with the plugin, see the bottom of this post.

Documentation

Markup

The plugin is configurable to work with just about any markup. Here is an example of what we used for the filters and the portfolio items.

Filters

<ul id="portfolio-filter">
<li><a href="#all">All</a></li>
<li><a href="#jquery" rel="design">jQuery</a></li>
...</ul>
<p><strong>Portfolio Items</strong></p>
<ul id="portfolio-list">
<li class="business partner jquery"><a href="#"><img src="/hifi/site/edit/blog/" alt="" /></a>
<p>Saranac</p>
</li>
...</ul>

Of course the markup can be completely arbitrary. All of the styling is done in css. There are only two major requirements:

1. Linking Filters to Items - The hashed href of the filter link must match the class of the portfolio item. In the example above, the #jquery filter matches the last class of the only portfolio item.
2. Portfolio Items are Wrapped- As you'll see in the JS section below, the plugin is called on a wrapper of the portfolio items. In this case, the wrapper is the
   .

Javascript/jQuery Setup

The jQuery is really simple to set up. If you use the same markup as I have, you can even leave out the settings and it should work out of the box. Simply do the following after you have included the filterable plugin:

$(document).ready(function(){
	$('portfolio-list').filterable();
});

The plugin will also take a number of optional parameters. These are the defaults:

settings = $.extend({
	useHash: true,
	animationSpeed: 1000,
	show: { width: 'show', opacity: 'show' },
	hide: { width: 'hide', opacity: 'hide' },
	useTags: true,
	tagSelector: '#portfolio-filter a',
	selectedTagClass: 'current',
	allTag: 'all'
}, settings);

To change any of the defaults, just pass them in to the initial call:

$(document).ready(function(){
	$('portfolio-list').filterable({
		animationSpeed: 2000,
		show: { height: 'show' }
		useTags: false,
		etc...
	});
});

Fun Features

Adding a Hash to a Url

If you have the useHash setting enabled, you can link directly to a single filter. You can see this in effect on our portfolio by visiting https://www.newmediacampaigns.com/section/portfolio#jquery.

Exposed Events

Once filterable() has been called, there are a number of events that get bound to the wrapper. Here they are:

/* Handles the state of the filter buttons as well as the portfolio items
 * Expects "tagToShow" to include a hash. */
$(this).bind("filter", function( e, tagToShow ){});

/* Just switches the portfolio items.  Expects a class name */
$(this).bind("filterportfolio", function( e, classToShow ){});
			
/* Shows a tag in addition to those being shown - expects a selector */
$(this).bind("show", function( e, selectorToShow ){});
			
/* Hides a tag - expects a selector */
$(this).bind("hide", function( e, selectorToHide ){});

The most useful of these is the first. It will allow you to programatically change the state of the filters and portfolios. So lets say you have a link somewhere on a page that you want to use to make sure your jQuery tag is shown. You could code something like the following:

$(document).ready(function(){
	$('portfolio-list').filterable();
	$('#linkID').click(function(){
		$('portfolio-list').trigger('filter', [ '#jquery' ]);
	});
});

For more details about these exposed events, feel free to check out the source or ask a question in the comments. If you're ready to test it out, just check out the zip below.

Download the Zip

To download this plugin and a sample project, click here.

To see the sample project first, click here.