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.
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.
Comments
Xavier
Wow! It's a wonderful work!! Thanks for sharing!
Joel Sutherland
@Xavier: Thanks! I like the illustration on your site.
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?
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
ovaxio
Oh thank you, i just find your script and it is exactly what i need :) Really good job.
Emrah
Thanks.
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)
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 !
Joel Sutherland
@nachomaans
Thanks for the callout!
@Elcodigodebarras
Thanks for the complements. Let me know when you get it launched.
Chris
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.
Joel Sutherland
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?
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!
chetan
nice work... almost same as
http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/
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);
});
});
jonath
This was what I've been looking for so long. Pretty impressive and easy to implement.
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
nashekrashe
Thanks for sharing. Filter works great.
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
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
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?
Xander
Nevermind, solved my problem, forgot to put in showposts= into the loop
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
Raghib suleman
Thanks for sharing this project cooooooool!
Krystian
This looks awesome. Is it possible to filter the content by more than one category?
Aaron Fooshee
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.
Joel Sutherland
Jesse Kaminski
CyberFox
Phil S
Jason Day
seularts
Jepser
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!
steven costello
Thanks,
Steve C
Alex
Jon
Thanks for the awesome plugin. I will definitely link to this from my site!
Alex
After clicking again on the same filter-tag you get the items listet.
Any ideas why the plugin sets all items to display: none when you come from the subpage?
Best regards
Lee
Joel Sutherland
This should easily be possible by opening up the plugin code and using .attr('rel') instead of .class().
pama
i have some problems with this
When i click on items noting happens
Any help? Thanks
Moonwalker
Thanks for the great script. I'm loving it. :)
Just one question though. Is it possible to not use the anchor "#" in the address? Just a click function can do the magic?
I'm asking this because I use Mod_rewrite on my server, and as you probably know anchors doesn't work when mod_rewrite is on. I'm still trying to find out a solution for this problem.
Thanks in advance.
mw
Rishi Patel
One Question:
I tried to put a lightbox effect on the items, but the lightbox script cancels out the filterable script. Has anyone gotten this to work, and if so, what am I missing?
Thanks in advance,
Rishi Patel
Raghibsuleman
ste
I'm new in this...
Lukas
I would like to use this script together with some other anchor tags on the same page.. But that doesn't seem to work.
Does anyone know how I could fix this? I'll probably have to change some javascript?
Regards,
Lukas
Memur
creative web design
Muhammad Faisal
Its a great plugin, its effect it amazing. i want to implement this in one of my site. but the problem is that i also want to add a class (etc '.last') to every 5th li item of this portfolio to clear any right-margin on last item of every row. But i dont know how to implement this.
Does anyone know how can i do this?
Regards
ASK Technologies
stephan
First of all, its a great plugin!!
But I dont know much about jquery but how can i modified this plugin....?
I want no animation on the projects but if i click on a subject class, the project must stand there immediately.
Can anybody help me please?
Kind regards
Thomas Griffin
This is an excellent plugin! I absolutely love it! I wanted to see if it would be possible to somehow hide everything on the page load, and then once you select a category, then the category will be displayed. So instead of the original page loading with #all, I would want it to load with #null or something to that effect in order to hide everything. Then the people can choose between categories if they so wish.
Thanks,
Thomas
Kevin Hughes
Sample site is up at www.kevinhughesdesign.net/brandlab
Joel Sutherland
JQuery is not loading on that page. (404 error).
I suggest using a tool like Firebug while developing to help catch things like this.
Ahmad
When my main page gets loaded. I don't want to show all the items. Just a specific page. For example I want 10 pages to show 10 items per page and while it is loaded for the first time, page 1 gets loaded with its relevant 10 items. Right now I have like 50 Items and all the page is filled up with it. Any solution please??
Gregg
- Is it possible to have "no results" text appear if someone selects something that has no content? I can of course take it off the menu, but that would require ongoing updating. Would prefer some kind of text appear.
- Is it possible to not display a specific class of items by default. i.e. show all EXCEPT a specific class.
THANKS!
ILLNeSs
i recently updated to firefox 5 and the filters all of a sudden don't work any more in the browser.
any suggestions as to what is causing this? and maybe how i can go about fixing this?
www.illness-illustrated.com (not sure why but it kept telling me my site was not valid in the comment section)
DG
awesome script!
One question: Is it possible not to show "all" on the first page landing. I want to show a other category?!
thanks
Maikel
Great tutorial, just what I was looking for. Maybe I wil create a WordPress plugin with your script, so everybody can insert it in his or her WordPress with just a few clicks.
Articulos Promocionales
Xavi Ivars
I've found a very small bug in your code. It seems you can use any "id" to make the portfolio, but inside the javascript code, when setting up tags, "#portfolio-list" is hard-coded.
I'm sure there will be most eficient ways to do it, but replacing
/* ============ Setup Tags ====================*/
if(settings.useTags){
$(settings.tagSelector).click(function(){
$('#portfolio-list').trigger("filter", [ $(this).attr('href') ]);
$(settings.tagSelector).removeClass('current');
$(this).addClass('current');
});
}
with
if(settings.useTags){
t = $(this);
$(settings.tagSelector).click(function(){
t.trigger("filter", [ $(this).attr('href') ]);
$(settings.tagSelector).removeClass('current');
$(this).addClass('current');
});
}
does the trick ;)
Wagner
Thanks for the great plugin! Very easy to implement! I was just wondering whether would be possible to change the animation. If yes, how?
Thanks and keep up with the great work!
Shel
Great plugin!
But it seems that many of us are having a problem with pagination (multiple page list for the different actegories or just the "all" page.
I have over 400 items to use in this plugin but can you imagine what this would look like in the "all" page without pagination?
Mike
I've created a list of drop down menus that aren't playing too nicely on an ipad, so i am trying to implement your code using a select drop down instead. Any insight would greatly help out me. Much appreciated. BTW, I am pretty much a JS novice.
Regards.
Béla
sorry, my english is not very well :/
but coul you explain me how i could get the easing effect to run?
thank u very much!!!!!!!!
greats
Khalid
This is a great plugin!! It also works after I created my own custom post-type. Just had a question and that's how to get it as smooth as you have it.
Mine is only smooth in Internet Explorer. I hope someone can help me: http://kawani.kelkhouani.com
Thank you so much!!
Ty
Appreciate any feedback you can offer.
abubakar
thanks
needhelp
I would really like to use it in my wordpress website. Can someone please let me know how to install this plugin in wordpress?
Alex
Jeremy
Is there a way to add a dropdown filter for the categories ?
stefan
can anyone tell me how to change the animation like in the example poste here http://www.newmediacampaigns.com/portfolio#non-profit.
I´m not so familar with Jquery, but i would like to use it in my portfolio site.
web design nepal
Travis
I can't for the life of me get two portfolios to work on one page! I'm no jquery expert, but is this possible?
Thanks!
Mohammed Fellak
i like this Portfolio
i'm asking if this Project is OpenSource
zara
Andy GH
Andy GH
Jamie
Babatunde
مداحی
and the
Best article for making filterable portfolio on the web.
Agung Wiseso
freelance web designer kerala
mrto2
Peter Cunningham
Ather
Ben
When click on the tab, may i know how to remove the moving animation?
px
i want exactly this effect: http://www.newmediacampaigns.com/portfolio
Please joel, please.
Tracy
Leave a Comment