jQuery Plugin For Interactive and Filterable Portfolio

An awesome jQuery gallery plugin that enables you to create a Interactive & Filterable Portfolio website. Each item of the Portfolio is able to be in multiple categories and we can link to certain filters with a url hash.

How to use it:

1. Include jQuery javascript library and filterable.pack.js on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/filterable.pack.js" type="text/javascript" charset="utf-8"></script>

2. Markup html structure

<div class="boundingBox" id="content">

<ul id="portfolio-filter">
<li><a href="#all" title="">All</a></li>
<li><a href="#design" title="" rel="design">Design</a></li>
<li><a href="#partner" title="" rel="partner">Agency Partner</a></li>
<li><a href="#political" title="" rel="political">Political</a></li>
<li><a href="#university" title="" rel="university">University</a></li>
<li><a href="#nonprofit" title="" rel="nonprofit">Non-Profit</a></li>
<li><a href="#business" title="" rel="business">Business</a></li>
<li><a href="#econdev" title="" rel="econdev">Economic Development</a></li>
<li><a href="#jquery" title="" rel="jquery">jQuery</a></li>
</ul>

<ul id="portfolio-list">

<li style="display: block;" class="business ecommerce partner cms programming jquery search"> 
<a href="#" title=""><img src="portfolio_files/SaranacThumb.gif" alt=""></a>
<p> Saranac </p>
</li>

...

<li style="overflow: hidden; clear: both; height: 0px; position: relative; float: none; display: block;"></li>
</ul>
</div>

3. The CSS

/* Layout */
.boundingBox {
margin: 0 auto;
width: 916px;
}
/* Content */

#content {
padding: 20px 0;
}
/* Content - Portfolio Listing */

ul#portfolio-filter {
margin: -20px 0;
padding: 0;
height: 64px;
padding-left: 70px;
line-height: 64px;
background: transparent url(../images/icon-tag-green.png) left no-repeat;
}
ul#portfolio-filter li {
display: inline;
}
ul#portfolio-filter a {
margin-right: 0.5em;
padding: 0.5em 1em;
background: #FFF;
color: #AAA;
font-weight: bold;
text-decoration: none;
}
ul#portfolio-filter a:hover, ul#portfolio-filter a.current {
color: #888;
}
ul#portfolio-filter a.current {
background-color: #DDD;
}
ul#portfolio-list {
margin: 36px 0 0 0;
padding: 0;
list-style: none;
}
ul#portfolio-list li {
width: 165px;
height: 160px;
display: block;
float: left;
margin-right: 18px;
overflow: hidden;
}
ul#portfolio-list li a {
display: block;
width: 163px;
height: 120px;
overflow: hidden;
border: 1px solid #CDCDCD;
background: #eee;
}
ul#portfolio-list li p {
font-size: 11px;
line-height: 15px;
color: #AAA;
margin: 5px 0;
}

4. Settings

$(document).ready(function(){
$('portfolio-list').filterable({
useHash: true,
animationSpeed: 1000,
show: { width: 'show', opacity: 'show' },
hide: { width: 'hide', opacity: 'hide' },
useTags: true,
tagSelector: '#portfolio-filter a',
selectedTagClass: 'current',
allTag: 'all'
});
});

---

This awesome jQuery plugin is developed by gethifi. For more Advanced Usages, please check the demo page or visit the official website.