A jQuery Portfolio Plugin that's Interactive and Filterable

22 Comment(s) | Posted July 08, 2009 by Joel Sutherland |

Joel Sutherland

Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.

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


	All
	jQuery
	...

Portfolio Items


	
		
		Saranac
	
	...

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

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.
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 http://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.