Blog

Where we discuss our work, thoughts, and process

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

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:

  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 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.

Download the Zip

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

To see the sample project first, click here.

Comments

's avatar
Xavier

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

's avatar
Joel Sutherland

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

's avatar
James

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?

's avatar
dlv

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

's avatar
ovaxio

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

's avatar
Emrah

Thanks.

's avatar
nachomaans

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)

's avatar
ELCODIGODEBARRAS

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 !

's avatar
Joel Sutherland NMC team member

@nachomaans

Thanks for the callout!

@Elcodigodebarras

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

's avatar
Chris
'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.

's avatar
Joel Sutherland NMC team member

Keiron,

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?

'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!

's avatar
Pancho

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() {
$(this).siblings().stop().fadeTo(500,0.7);
}, function() {
$(this).siblings().stop().fadeTo(500,1);
});
});

's avatar
jonath

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

'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

's avatar
nashekrashe

Thanks for sharing. Filter works great.

's avatar
run

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

we have over 300 items in our portfolio!

thanx in advance

's avatar
Nathan Dailo

Hi,

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

's avatar
Xander

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?

's avatar
Xander

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

's avatar
James

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?

Cheers

Jim
http://www.thetwopercent.co.uk

's avatar
Raghib suleman

Thanks for sharing this project cooooooool!

's avatar
Krystian

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

's avatar
Fabio
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!
F.
's avatar
Torben
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.
's avatar
robert
I have found this which works pretty good and has everything I need, I think is definetly worth it http://goo.gl/sQ6yXj
'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?

Leave a comment

Real Time Web Analytics