Filters - jscraft.net/plugins/filters.html

Filtros é um plugin jQuery que permite filtrar os itens usando animação personalizada. Você pode usar CSS3 transições ou apenas fadeIn / Out efeito. Ir para os demos e ver o quão simples é isso.

by Jairo Fontes

HTML

<script src="http://www.jscraft.net/demo/plugins/filters/js/filters.js"></script>
<script src="http://www.jscraft.net/demo/plugins/filters/js/jquery.easing.js"></script>
<div class="filters demo1">
    <div class="filter">	<a href="#" rel="city">City</a>
	<a href="#" rel="cars">Cars</a>
	<a href="#" rel="other">Other</a>
	<a href="#" rel="all">All</a>

    </div>
    <div class="container">
        <ul>
            <li class="cars">	<a href="#"><img src="http://www.jscraft.net/demo/plugins/filters/assets/img1.jpg" alt="" /></a>

            </li>
            <li class="city">	<a href="#"><img src="http://www.jscraft.net/demo/plugins/filters/assets/img6.jpg" alt="" /></a>

            </li>
            <li class="cars">	<a href="#"><img src="http://www.jscraft.net/demo/plugins/filters/assets/img5.jpg" alt="" /></a>

            </li>
            <li class="city">	<a href="#"><img src="http://www.jscraft.net/demo/plugins/filters/assets/img7.jpg" alt="" /></a>

            </li>
            <li class="cars">	<a href="#"><img src="http://www.jscraft.net/demo/plugins/filters/assets/img3.jpg" alt="" /></a>

            </li>
            <li class="cars">	<a href="#"><img src="http://www.jscraft.net/demo/plugins/filters/assets/img4.jpg" alt="" /></a>

            </li>
            <li class="city">	<a href="#"><img src="http://www.jscraft.net/demo/plugins/filters/assets/img8.jpg" alt="" /></a>

            </li>
            <li class="cars">	<a href="#"><img src="http://www.jscraft.net/demo/plugins/filters/assets/img2.jpg" alt="" /></a>

            </li>
            <li class="other">	<a href="#"><img src="http://www.jscraft.net/demo/plugins/filters/assets/img10.jpg" alt="" /></a>

            </li>
            <li class="city">	<a href="#"><img src="http://www.jscraft.net/demo/plugins/filters/assets/img12.jpg" alt="" /></a>

            </li>
        </ul>
    </div>
</div>

CSS

body{
    background:#000;
}
/* ------ filtrey
-----------------------------------------------*/
.filters {
float:left;
clear:both;
width:1000px;
}

.filters .filter {
float:left;
clear:both;
width:960px;
padding:20px;
margin-bottom:20px;
background:#545454;
background:rgba(255, 255, 255, .1);
}

.filters .filter a {
float:left;
display:block;
padding:5px;
margin-right:20px;
font-size:11px;
text-transform:uppercase;
outline:none;
}

.filters .filter .active {
background:#eee;
color:#111;
}

.filters .container {
float:left;
clear:both;
width:100%;
position:relative;
}

.filters .container ul,
.filters .container ul li {
display:block;
list-style:none;
padding:0;
margin:0;
}

.filters .container ul li {
float:left;
margin:0 8px 8px 0;
font-size:0;
line-height:0;
}

.filters .container a {
display:block;
float:left;
width:192px;
height:192px;
}

a {
color:#eee;
text-decoration:none;
}

JavaScript

$(function(){
	$('.filters.demo1').filters();
});