jGalleryFilter
jQuery plugin for animated filter by tags for your image or photo gallery
Sample
$(document).ready(function () {
$("#gallery").galleryFilter(
{
itemsGroupHeaderTagName:'header',
filters:'#filters',
items:'#items',
itemWidth:'100px',
itemHeight:'75px'
});
}); <section id="gallery">
<div id="filters">
<ul>
<li><a rel="all" href="#">all</a></li>
<li><a rel="flora" href="#">flora</a></li>
<li><a rel="fauna" href="#">fauna</a></li>
<li><a rel="inanimate" href="#">inanimate</a></li>
</ul>
</div>
<div id="items">
<div>
<header>2005</header>
<ul>
<li rel="flora"><img src="img/Tulips.jpg" alt="Tulips"></li>
<li rel="inanimate"><img src="img/Desert.jpg" alt="Desert"></li>
</ul>
</div>
<div>
<header>2006</header>
<ul>
<li rel="inanimate"><img src="img/Lighthouse.jpg" alt="Lighthouse"></li>
<li rel="fauna"><img src="img/Penguins.jpg" alt="Penguins"></li>
<li rel="flora"><img src="img/Chrysanthemum.jpg" alt="Chrysanthemum"></li>
</ul>
</div>
<div>
<header>2007</header>
<ul>
<li rel="flora"><img src="img/Hydrangeas.jpg" alt="Hydrangeas"></li>
<li rel="fauna"><img src="img/Jellyfish.jpg" alt="Jellyfish"></li>
<li rel="fauna"><img src="img/Koala.jpg" alt="Koala"></li>
</ul>
</div>
</div>
</section> Options
itemsGroupHeaderTagName - tag name, class name (like '.myCssClass') or id (like '#myIdName') of group headers.
filters - element id with filters list (like div with ul or ol).
items - container element id with items (images or photos).
itemWidth - with of photos or images using in gallery.
itemHeight - height of photos or images using in gallery.