Isotope

by geobarney

HTML

<script src="//isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<ul id="sorts">
    <li><a href="#" data-sort=".item" class="sorting_a-z">Sort A-Z</a></li>
    <li><a href="#" data-sort=".item" class="sorting_z-a">Sort Z-A</a></li>
    <li><a href="#" data-sort=".item" class="all_items current">All (Back to original position)</a></li>
    <li><a href="#" data-sort=".teamA">Team A</a></li>
    <li><a href="#" data-sort=".teamB">Team B</a></li>
</ul>

<div id="item-container">

    <div class="item teamA">
        <a href="#">
            <img src="http://lorempixel.com/230/140/food" alt="test01"/>
            <p class="name">C</p>
        </a>
    </div>
    
    <div class="item teamB">
        <a href="#">
            <img src="http://lorempixel.com/230/140/people" alt="test01"/>
            <p class="name">B</p>
        </a>
    </div>
    
    <div class="item teamB">
        <a href="#">
            <img src="http://lorempixel.com/230/140/nature" alt="test01"/>
            <p class="name">D</p>
        </a>
    </div>
    
    <div class="item teamA">
        <a href="#">
            <img src="http://lorempixel.com/230/140/" alt="test01"/>
            <p class="name">A</p>
        </a>
    </div>
    
    
</div>

CSS

#item-container .item{
    float: left;
    margin-right: 10px;
}

#sorts li a.current{
     font-weight:bold;
}

/* isotope transition styles */

.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;
}

JavaScript

$(window).load(function(){
    
    //Configure
    var $container = $('#item-container');

    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        },
        
        getSortData : {  
              name : function ( $elem ) {
                return $elem.find('.name').text();
              }  
        },
        
    });
     

    //Sorting
    $('#sorts li a').click(function(){
            $('#sorts li a.current').removeClass('current');
            $(this).addClass('current');
     
            var selector = $(this).attr('data-sort');
            $container.isotope({
                filter: selector,
             });
             return false;
    }); 
    
    //Ascending
    $('.sorting_a-z').on( 'click', function( event ) {

        $container.isotope({ 
            itemSelector : '.item',
             sortBy: 'name', sortAscending : true
        }); 
        
    });
    
    //Descending
    $('.sorting_z-a').on( 'click', function( event ) {

        $container.isotope({ 
            itemSelector : '.item',
             sortBy: 'name', sortAscending : false
        }); 
        
    });
    
    
    //Put on original Position
    $('.all_items').on( 'click', function( event ) {

         $container.isotope({ 
             sortBy : 'original-order', sortAscending : true
         });
        
    });
    
    
    
    

    

});