cat isotope

by Shiran Dror

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<span class="menu-button" id="food-button">Food</span>
<span class="menu-button" id="staff-button">Staff</span>
<span class="menu-button" id="all-button">All</span>
<div class="container">
  <div class="row grid">
           <div class="col-md-4 food">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 food">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 food">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 staff">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 food">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 staff">
               <a class="gallery-image-a"></a>
           </div>
  </div>
</div>

CSS

.gallery-image-a {
  display: block;
  height: 360px;
  min-width: 100px;
  background-position: center center;
  transition: ease all 950ms;
  background-repeat: no-repeat;
  box-sizing: border-box;
  border: 10px solid #fff;
  background-size: cover;
  background-image: url('http://animalpetdoctor.homestead.com/acat1.jpg');
}

JavaScript

$(document).ready(function () {
$grid = $('.grid');
$grid.isotope();

$('#food-button,#staff-button, #all-button').click(function() {

  var id = $(this).attr('id');
  var className = id.replace("-button", "");

  if (className == 'all') {
    $grid.isotope({
      filter: '*'
    });
    return false;
  }
  $grid.isotope({
    filter: '.' + className
  });
});
});