Isotope Test

by tsdexter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
  {{#each this}}
  <div class="entry {{#tags}}{{slug}} {{/tags}}">
    <h1>{{_title}}</h1>
    <div class="body">
      {{{_thumbnail}}}
    </div>
  </div>
  {{/each}}
</script>
<script id="filters-template" type="text/x-handlebars-template">
{{#each this}}
	{{#tags}}
  	<button class="filter" data-filter="{{slug}}">{{name}}</button>
  {{/tags}}
{{/each}}
</script>
<div id="filter-container"></div>
<div id="isotope">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
</div>

CSS

.entry img {max-width: 100%;height:auto;}
h1 {font-size:14px;}
.entry { width: 22%; }
.gutter-sizer { width: 4%; }

JavaScript

var data = [{"tags":[{"term_id":28,"name":"Recent","slug":"recent","term_group":0,"term_taxonomy_id":29,"taxonomy":"post_tag","description":"","parent":0,"count":21,"object_id":12470,"filter":"raw"},{"term_id":28,"name":"ADMC","slug":"admc","term_group":0,"term_taxonomy_id":29,"taxonomy":"post_tag","description":"","parent":0,"count":21,"object_id":12470,"filter":"raw"},{"term_id":29,"name":"BUSINESS AND MANAGEMENT","slug":"business-and-management","term_group":0,"term_taxonomy_id":30,"taxonomy":"post_tag","description":"","parent":0,"count":168,"object_id":12470,"filter":"raw"}],"id":"12470","_edit_last":["14"],"_edit_lock":["1396027680:14"],"_thumbnail_id":["12471"],"_wpb_vc_js_status":["false"],"_wpb_vc_js_interface_version":["2"],"_photo_caption":["Tree Fort Creative Advertising"],"_title":"Tree Fort Creative Advertising","_full_title":"Tree Fort Creative Advertising","_id":12470,"_post_type":"student_experience","_excerpt":"Tree Fort Creative Advertising gives Georgian students hands-on experience working with real clients and creating advertising and marketing materials and strategies.","_thumbnail":"<img width=\"400\" height=\"300\" src=\"http://ww6.georgiancollege.ca/wp-content/uploads/LibbyFrank4-e1384182733888.jpg\" class=\"attachment-400x600 wp-post-image\" alt=\"Tree Fort Creative Advertising\" />","_thumbnail_src":"12471","_published_date":"Tuesday, Aug. 27, 2013","_content":"<p><img class=\"thumbnail alignleft size-medium wp-image-32559\" alt=\"A group of students gather around a computer with their instructor.\" src=\"http://ww6.georgiancollege.ca/wp-content/uploads/Advertising-and-Marketing-Communications-TreeFort-Student-group-Georgian-College-2014-03-300x120.jpg\" width=\"300\" height=\"120\" />Tree Fort Creative Advertising gives Georgian students hands-on experience working with real clients and creating advertising and marketing materials and...