<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row" style="padding:20px"> <div class="col-xs-12"> <div class="btn-group" role="group" aria-label="filter"> <button type="button" class="btn btn-small btn-info" data-toggle="portfilter" data-target="all">all</button> <button type="button" class="btn btn-small btn-default" data-toggle="portfilter" data-target="art">art</button> <button type="button" class="btn btn-small btn-default" data-toggle="portfilter" data-target="media">media</button> <button type="button" class="btn btn-small btn-default" data-toggle="portfilter" data-target="brand">brand</button> <button type="button" class="btn btn-small btn-default" data-toggle="portfilter" data-target="other">other</button> </div> </div> </div> <div class="col-md-4" data-tag='brand'> <img src="http://placehold.it/450x250" class="img-responsive" alt="1.brand"> <span>1.brand</span> </div> <div class="col-md-4" data-tag='media'> <img src="http://placehold.it/450x250" class="img-responsive" alt="2.media"> <span>2.media</span> </div> <div class="col-md-4" data-tag='art'> <img src="http://placehold.it/450x250" class="img-responsive" alt="3.art"> <span>3.art</span> </div> <div class="col-md-4" data-tag='art'> <img src="http://placehold.it/450x250" class="img-responsive" alt="4.art"> <span>4.art</span> </div> <div class="col-md-4" data-tag='brand'> <img src="http://placehold.it/450x250" class="img-responsive" alt="5.brand"> <span>5.brand</span> </div> <div class="col-md-4" data-tag='media'> <img src="http://placehold.it/450x250" class="img-responsive" alt="6.media"> <span>6.media</span> </div> <div class="col-md-4" data-tag='media'> <img src="http://placehold.it/450x250" class="img-responsive" alt="7.media"> <span>7.media</span> </div> <div class="col-md-4" data-tag='brand'> <img src="http://placehold.it/450x250" class="img-responsive" alt="8.brand"> <span>8.brand</span> </div> <div class="col-md-4" data-tag='other'> <img src="http://placehold.it/450x250" class="img-responsive" alt="9.other"> <span>9.other</span> </div> </div>

/* ============================================================ * bootstrap-portfilter.js for Bootstrap v2.3.1 * https://github.com/geedmo/portfilter * ============================================================*/ //!function(d){var c="portfilter";var b=function(e){this.$element=d(e);this.stuff=d("[data-tag]");this.target=this.$element.data("target")||""};b.prototype.filter=function(g){var e=[],f=this.target;this.stuff.fadeOut("fast").promise().done(function(){d(this).each(function(){if(d(this).data("tag")==f||f=="all"){e.push(this)}});d(e).show()})};var a=d.fn[c];d.fn[c]=function(e){return this.each(function(){var g=d(this),f=g.data(c);if(!f){g.data(c,(f=new b(this)))}if(e=="filter"){f.filter()}})};d.fn[c].defaults={};d.fn[c].Constructor=b;d.fn[c].noConflict=function(){d.fn[c]=a;return this};d(document).on("click.portfilter.data-api","[data-toggle^=portfilter]",function(f){d(this).portfilter("filter")})}(window.jQuery); /* ============================================================ * bootstrap-portfilter.js for Bootstrap v2.3.1 * https://github.com/geedmo/portfilter * ============================================================*/ ! function(d) { var c = "portfilter"; var b = function(e) { this.$element = d(e); this.stuff = d("[data-tag]"); this.target = this.$element.data("target") || "" }; b.prototype.filter = function(g) { var e = [], f = this.target; this.stuff.fadeOut("fast").promise().done(function() { d(this).each(function() { if (d(this).data("tag") == f || f == "all") { e.push(this) } }); d(e).show() }) }; var a = d.fn[c]; d.fn[c] = function(e) { return this.each(function() { var g = d(this), f = g.data(c); if (!f) { g.data(c, (f = new b(this))) } if (e == "filter") { f.filter() } }) }; d.fn[c].defaults = {}; d.fn[c].Constructor = b; d.fn[c].noConflict = function() { d.fn[c] = a; return this }; d(document).on("click.portfilter.data-api", "[data-toggle^=portfilter]", function(f) { d(this).portfilter("filter") }) }(window.jQuery);