jQuery Plugin For Interactive and Filterable Portfolio

jQuery Plugin For Interactive and Filterable Portfolio
File Size: 678KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

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'
});
});

For more Advanced Usages, please check the demo page or visit the official website.