A jQuery Portfolio Plugin that's Interactive and Filterable
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:
- 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.
Download the Zip
To download this plugin and a sample project, click here.
To see the sample project first, click here.
| Permalink
Wow! It's a wonderful work!! Thanks for sharing!
| Permalink
@Xavier: Thanks! I like the illustration on your site.
| Permalink
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?
| Permalink
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
| Permalink
Oh thank you, i just find your script and it is exactly what i need :) Really good job.
| Permalink
Thanks.
| Permalink
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)
| Permalink
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 !
| Permalink
@nachomaans
Thanks for the callout!
@Elcodigodebarras
Thanks for the complements. Let me know when you get it launched.
| Permalink
| Permalink
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.
| Permalink
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?
| Permalink
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!
| Permalink
nice work... almost same as
http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/
| Permalink
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);
});
});
| Permalink
This was what I've been looking for so long. Pretty impressive and easy to implement.
| Permalink
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
| Permalink
Thanks for sharing. Filter works great.
| Permalink
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
| Permalink
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
| Permalink
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?
| Permalink
Nevermind, solved my problem, forgot to put in showposts= into the loop
| Permalink
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
| Permalink
Thanks for sharing this project cooooooool!
| Permalink
This looks awesome. Is it possible to filter the content by more than one category?
| Permalink
Nice interface. I like the concept and implementation so far.
I used some of your code on a project and thought the hashtags didn't work for a while. Trying to navigate to a anchor via the address bar while already on filterable.html (with any anchor) does nothing, but it does work if you are not on filterable.html already. Would be nice to have it check for changes and submits in the address bar.
Either way, thank you for the ideas and code.
| Permalink
| Permalink
| Permalink
| Permalink
| Permalink
| Permalink
| Permalink
I sell cars, my categories will be the brands, I select BMW but then I want to show only the sedan (and I have other subcategoies) or I want to check all send type cars (no matter the brand)...
Ehat piece of code do I change, I want an AND connector.
Thanks!