Dynamic Web - Class 9 - Photo Filter

by lasha

HTML

<ul class="filter-menu">
    <li data-filterby="all" class="active">All</li>
    <li data-filterby="web">Web</li>
    <li data-filterby="print">Print</li>
    <li data-filterby="identity">Identity</li>
</ul>

<div class="photo-grid">
    <img data-categories="web" src="http://placekitten.com/100/100"/>
    <img data-categories="web" src="http://placekitten.com/100/100"/>
    <img data-categories="print" src="http://placekitten.com/100/100"/>
    <img data-categories="web" src="http://placekitten.com/100/100"/>
    <img data-categories="identity" src="http://placekitten.com/100/100"/>
    <img data-categories="identity" src="http://placekitten.com/100/100"/>
    <img data-categories="print" src="http://placekitten.com/100/100"/>
    <img data-categories="web" src="http://placekitten.com/100/100"/>
    <img data-categories="print" src="http://placekitten.com/100/100"/>
    <img data-categories="print" src="http://placekitten.com/100/100"/>
</div>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    float: left;
    margin-right: 20px;
}

ul li.active {
    text-decoration: underline;
    font-weight: bold;
}

.photo-grid {
    padding-top: 5px;
    clear: both;
}

.photo-grid img {
    display: inline-block;
    margin-right: 5px;
}

.photo-grid img.inactive {
    opacity: .2;
}

JavaScript

$(".filter-menu").find("li").on("click", function(e){
    var selected = $(this).data("filterby");
    filterGrid(selected);
});

var filterGrid = function(itemType){    
    $("img").addClass("inactive");
    $("img[data-categories=" + itemType + "]").removeClass("inactive");
};