A jQuery Portfolio Plugin that's Interactive and Filterable

July 8, 2009

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.



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.


<ul id="portfolio-filter">
<li><a href="#all">All</a></li>
<li><a href="#jquery" rel="design">jQuery</a></li>
<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>

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:


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:

		animationSpeed: 2000,
		show: { height: 'show' }
		useTags: false,

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:

		$('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.


indrajit's avatar
how to change effect of filter.....?
Frank's avatar
Hi, this plugin is very easy to use. Thanks for that.
BUT the standard animation is cruel. In your demo "See a Demo" the effect is very smooth, how can we use it?
Théo's avatar
Thank you soooo much ! I just spent 1 hour looking for this plugin :) Hope it'll be easy to set.
Théo from France
hafi's avatar
Hi, this is great, thanks.
I just wanted to be sure, I couldn't find a license for this plugin. is this free for commercial use as well?

thanks again,
Simon's avatar
First - great plugin!
Secondly, and I'm sorry for being slow – but where can I get that $40 version? I'm confused.

Regards, Bag of rocks
Don's avatar
Good script but the filter does not work on my Android phone so I guess it's not responsive
Patrik's avatar
I would also want to know how to change the animation to the one in the demo. Anyone had any luck with this?
van Leijden's avatar
van Leijden
Nice work. I have a question. I would like to show only 10 li's at one page. And a previous and next button for the previous or next 10 pages. Does anyone know how i can doe this?
robert's avatar
I have found this which works pretty good and has everything I need, I think is definetly worth it http://goo.gl/sQ6yXj
Torben's avatar
Thanks for this, I've used it for my online-portfolio!
Is there any way to change the effect? I'd like something simple like fade-in/fade-out.
Fabio's avatar
Hi, good jquery! But I have a question...
How do I change the effect of the animation?...I don't like default effect, I would prefer the one which you have in your demo.
Thank you!
Krystian's avatar

This looks awesome. Is it possible to filter the content by more than one category?

Raghib suleman's avatar
Raghib suleman

Thanks for sharing this project cooooooool!

James's avatar

Has anyone managed to get multiple filters working with this?

I am trying to have a second menu appear once you select the first filter, and in answer to Joels question, this is an AND select...

I basically want to break a list down by Area, then Country, then type of Service...

Anyone got any ideas?



Xander's avatar

Nevermind, solved my problem, forgot to put in showposts= into the loop

Xander's avatar

I've incorporated this into my websites portfolio, using wordpress query_posts, but it only shows 10 items out of the Portfolio category. any idea as to why the limit would be on 10?

Nathan Dailo's avatar
Nathan Dailo


I was just wondering if there was a way to implement this into WordPress? Im working on a project that needs to emulate the filtration function of this link http://www.dalealcock.com.au/New-Homes/#/Content/New-Homes/Browse-Tool - It needs to display the filtered products without having to reload the page. Any ideas?

Kind regards,
Nathan Dailo

run's avatar

please, we would terribly need a solution with pagination of the filterd ( and unfiltered)

we have over 300 items in our portfolio!

thanx in advance

nashekrashe's avatar

Thanks for sharing. Filter works great.

Chris Beaman's avatar
Chris Beaman

This looks great. Pending easy implementation, I plan to use this for my own portfolio. Please check here sometime in the next month or two for some linklove: http://www.chrisbeaman.com/credits

jonath's avatar

This was what I've been looking for so long. Pretty impressive and easy to implement.

Pancho's avatar

Joel, script is great. I have implemented it to my portfolio.
But i have one big problem.

I heve added a hover function to portfolio elements. And when portfolio is sorted (animation of width), hover animation stop sorting animation.

The second one is:

$(document).ready(function() {
$('ul.portfolio-list li').hover(function() {
}, function() {

joseph Jin's avatar
joseph Jin

thank you take us so better tutls, i read this post "Creating a Filterable Portfolio with jQuery" (http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/), inspired both!

Joel Sutherland's avatar
Joel Sutherland NMC team member


The issue is not the code difficulty, but the UI. When multiple categories are selected should it do an AND as you suggest, or an OR? How should this be shown in the filters?

Keiron Roberts's avatar
Keiron Roberts

Great plugin.

Like James asked (July 22, 2009) is there an easy way to have multiple options so a user could select an option in one list to reduce the images and then another option in a second list to further filter the images, and then again (and again) until they reduce it to a very small gallery.

Chris's avatar
Joel Sutherland's avatar
Joel Sutherland NMC team member


Thanks for the callout!


Thanks for the complements. Let me know when you get it launched.


It´s a really beauty jquery plugin code;clear explanations, and very useful and elegant resource.

Thanks for sharing with us your knowledge and code skills; with this action we are getting an internet more friendly for all.

Thanks again !

nachomaans's avatar

Thank you for the script and clear explanations!

We are using a tweaked version here: http://www.id3.co.th
(and you are credited here: http://id3.co.th/copyright.php)

 Emrah's avatar


ovaxio's avatar

Oh thank you, i just find your script and it is exactly what i need :) Really good job.

 dlv's avatar

great! it's really useful, easy and shiny way to filter items!!
I read others jquery filter scripts, but this is more easy and better explained than others

thanks for share !!!
to bookmarks

 James's avatar

Would it be easy to provide multiple tags for items so a user could make multiple selections?

e.g could a user choose shoes (show all shoes), then choose red?

 Joel Sutherland's avatar
Joel Sutherland

@Xavier: Thanks! I like the illustration on your site.

 Xavier's avatar

Wow! It's a wonderful work!! Thanks for sharing!

Leave a comment