Block filter

use on gallery

by secretgspot

HTML

<div id="header"></div>
        <div id="nav">
            <ul>
                <li><a href="" data-filter="*">All</a></li>
                <li><a href="" data-filter=".cat1">Category 1</a></li>
                <li><a href="" data-filter=".cat2">Category 2</a></li>
                <li><a href="" data-filter=".cat3">Category 3</a></li>
            </ul>
        </div>
        
        <div id="content">
            <div class="box cat1 cat3">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Ut aliquet integer sed enim ac amet nunc? Tincidunt sit, cum ridiculus, placerat cum, vut magna ridiculus ut phasellus ridiculus? Eu hac, mattis adipiscing, montes adipiscing urna montes rhoncus!
                </div>
            </div>
            
            <div class="box cat1">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Ut aliquet integer sed enim ac amet nunc? Tincidunt sit, cum ridiculus, placerat cum, vut magna ridiculus ut phasellus ridiculus? Eu hac, mattis adipiscing, montes adipiscing urna montes rhoncus! Odio placerat pellentesque risus urna elit, odio phasellus, rhoncus, est ridiculus purus etiam, penatibus integer! 
                </div>
            </div>
            
            <div class="box cat2 cat3">
                <h2 class="box-title">Lorem Ipsum</h2>
                <div class="box-text">
                    Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur?
  ...

CSS

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/**** Isotope filtering ****/

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    transition-property:         transform, opacity;
}

/*==============================
MY STYLES
==============================*/
body {
    background: #f8f8f8;
    font-family: arial;
    font-size: 15px;
    line-height: 28px;
}


.box-title {
    font-size: 30px;
    margin-bottom: 10px;
}

.box {
    color: #212121;
    padding: 15px;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    width: 200px;
    background: #ffffff;
    border: 2px solid #787878;
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#nav {
    margin-left: 20px;
    margin-top: 20px;
    position: fixed;
    z-index: 99999;
    background: pink;
    top: 10px;
    left: 10px;
}

#nav a {
    text-decoration: none;
    font-size: 15px;
    line-height: 25px;
    color: #595959;
}

#nav a:hover {
    color: #393939;
}

#nav a:active {
    color: #151515;
}

JavaScript

$(document).ready(function() {
    var $container = $('#content');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });

    $('#nav a').click(function() {
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false,

            }
        });
        return false;
    });

});



/**
 * Isotope v1.4.110721
 * An exquisite jQuery plugin for magical layouts
 * http://isotope.metafizzy.co
 *
 * Commercial use requires one-time license fee
 * http://metafizzy.co/#licenses
 *
 * Copyright 2011 David DeSandro / Metafizzy
 */
/*jshint curly: true, eqeqeq: true, forin: false, immed: false, newcap: true, noempty: true, undef: true */
/*global Modernizr: true */
(function(a,b,c){function f(a){var b=document.documentElement.style,c;if(typeof b[a]=="string")return a;a=d(a);for(var f=0,g=e.length;f<g;f++){c=e[f]+a;if(typeof b[c]=="string")return c}}function d(a){return a.charAt(0).toUpperCase()+a.slice(1)}var e="Moz Webkit Khtml O Ms".split(" "),g=f("transform"),h={csstransforms:function(){return!!g},csstransforms3d:function(){var a=!!f("perspective");if(a){var c=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d="@media ("+c.join("transform-3d),(")+"modernizr)",e=b("<style>"+d+"{#modernizr{height:3px}}"+"</style>").appendTo("head"),g=b('<div id="modernizr" />').appendTo("html");a=g.height()===3,g.remove(),e.remove()}return a},csstransitions:function(){return!!f("transitionProperty")}};if(a.Modernizr)for(var i in h)Modernizr.hasOwnProperty(i)||Modernizr.addTest(i,h[i]);else a.Modernizr=function(){var a={_version:"1.6ish: miniModernizr for Isotope"},c=" ",d,e;for(e in h)d=h[e](),a[e]=d,c+=" "+(d?"":"no-")+e;b("html").addClass(c);return a}();if(Modernizr.csstransforms){var...