How To Implement Isotope

TODO

See:

• http://isotope.metafizzy.co/
• http://codepen.io/desandro/pen/nFrte

 

 

HTML

<section id="isotope-example" class="content-block content-1-3">
    {{require type="javascript" library="isotope"}}
    {{json assign_to="categories"}}
        [
            {"color": "red"},
            {"color": "blue"},
            {"color": "green"},
            {"color": "orange"}
        ]
    {{/json}}  
                
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Isotope - filtering</h1>
                <div id="filters" class="btn-group" role="group"> 
                    <button class="btn btn-default active" data-filter="*">show all</button>
                    {{foreach $categories as $cat}}
                    <button class="btn btn-default" data-filter=".{{$cat.color}}">{{$cat.color}}</button> 
                    {{/foreach}}
                </div> 
            </div>

            <div class="col-md-12">
                <div class="grid">              
                    {{for $i=0 to 23}}
                    <div class="element-item {{$categories[$i%4].color}}">
                        <h1 class="index">{{$i}}</h1>
                        <p class="module text-center">Module {{$i%4}}</p>
                    </div>
                    {{/for}}
                </div>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

 

CSS:

/* css */
#isotope-example #filters {
    margin-top: 30px;
    margin-bottom: 30px;
    }
    #isotope-example #filters button {
        outline: none;
        }


/* isotope */
#isotope-example .grid {
    border: 1px solid #ddd;
    }



/* .element-item */
#isotope-example .element-item {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 5px;
    padding: 10px;
    background: #888;
    color: #fff;
    }
#isotope-example .element-item.red {
    background: #ea4335;
    }
#isotope-example .element-item.blue {
    background: #4285f4;
    }
#isotope-example .element-item.green {
    background: #34a853;
    }
#isotope-example .element-item.orange {
    background: #fbbc05;
    }
#isotope-example .element-item > * {
    margin: 0;
    padding: 0;
    }
    
    #isotope-example .element-item .index {
        left: 10px;
        top: 30px;
        width: 80px;
        text-transform: none;
        letter-spacing: 0;
        font-weight: normal;
        text-align: center;
        position: absolute;
        }
    #isotope-example .element-item .module {
        left: 10px;
        bottom: 5px;
        width: 80px;
        text-transform: none;
        letter-spacing: 0;
        font-size: 12px;
        font-weight: normal;
        text-align: center;
        position: absolute;
        opacity: 0.6;
        }

 

Javascript:

/* js */
(function() {
    try {
        // init Isotope
        var $grid = $('#isotope-example .grid').isotope({
            itemSelector: '.element-item',
            layoutMode: 'fitRows'
        });

        // bind filter button click
        $('#isotope-example #filters button').on('click', function() {
            // set active class
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            
            // send filter option
            var filterValue = $(this).attr('data-filter');
            $grid.isotope({
                filter: filterValue
            });
        });

    } catch (e) {
        if ('console' in window) {
            console.log(e);
        }
    }
})();