title: Getting Shuffle.js and filtering to work
body: <p>I am stumped. Got the masonry part set up but can't understand why filtering doesn't work. I've been through the script, compared to the one on the demo site, and I'm going nuts.</p>
  
  <p>I'm using : <a href="https://github.com/Vestride/Shuffle">https://github.com/Vestride/Shuffle</a> and Bootstrap 3. This probably has nothing to do with Bootstrap.</p>
  
  <h2>DEMO w/edit: <a href="http://jsbin.com/vaquci/1/edit">http://jsbin.com/vaquci/1/edit</a></h2>
  
  <h1>DEMO: <a href="http://jsbin.com/vaquci/1/">http://jsbin.com/vaquci/1/</a></h1>
  
  <p><em>HTML contains all dependencies :: jQuery 1.9.1 or higher, Modernizr, etc.,</em></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  
       &lt;div class="filter-options"&gt;
        &lt;button class="btn btn-default" data-group="wallpaper"&gt;Wallpapers&lt;/button&gt;
        &lt;button class="btn btn-default" data-group="graphics"&gt;Graphic Design&lt;/button&gt;
        &lt;button class="btn btn-default" data-group="photography"&gt;Photos&lt;/button&gt;
        &lt;button class="btn btn-default" data-group="3d"&gt;3D Renders&lt;/button&gt;
      &lt;/div&gt;      
  
  
  
  &lt;div id="grid" class="row"&gt;
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'&gt;
         &lt;img src="http://placehold.it/400x534" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x566" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'&gt;
          &lt;img src="http://placehold.it/400x600" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'&gt;
          &lt;img src="http://placehold.it/400x504" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'&gt;
          &lt;img src="http://placehold.it/400x316" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'&gt;
          &lt;img src="http://placehold.it/400x600" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'&gt;
          &lt;img src="http://placehold.it/400x594" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'&gt;
          &lt;img src="http://placehold.it/400x400" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'&gt;
          &lt;img src="http://placehold.it/400x400" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'&gt;
          &lt;img src="http://placehold.it/400x796" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x534" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x566" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x600" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x504" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x316" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x600" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x594" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x400" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x400" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'&gt;
          &lt;img src="http://placehold.it/400x796" alt="" class="img-responsive"&gt;
      &lt;/div&gt;
  
            &lt;!-- sizer --&gt;
        &lt;div class="col-xs-6 col-sm-4 col-md-3 shuffle_sizer"&gt;&lt;/div&gt;          
  
  
      &lt;/div&gt;&lt;!-- /#grid --&gt;
  &lt;/div&gt;&lt;!-- /.container --&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>var shuffleme = (function( $ ) {
    'use strict';
  
    var $grid = $('#grid'),
        $filterOptions = $('.filter-options'),
        $sizer = $grid.find('.shuffle_sizer'),
  
    init = function() {
  
      // None of these need to be executed synchronously
      setTimeout(function() {
        listen();
        setupFilters();
      }, 100);
  
      // instantiate the plugin
      $grid.shuffle({
        itemSelector: '[class*="col-"]',
        sizer: $sizer    
      });
    },
  
    // Set up button clicks
    setupFilters = function() {
      var $btns = $filterOptions.children();
      $btns.on('click', function() {
        var $this = $(this),
            isActive = $this.hasClass( 'active' ),
            group = isActive ? 'all' : $this.data('group');
  
        // Hide current label, show current label in title
        if ( !isActive ) {
          $('.filter-options .active').removeClass('active');
        }
  
        $this.toggleClass('active');
  
        // Filter elements
        $grid.shuffle( 'shuffle', group );
      });
  
      $btns = null;
    },
  
    // Re layout shuffle when images load. This is only needed
    // below 768 pixels because the .picture-item height is auto and therefore
    // the height of the picture-item is dependent on the image
    // I recommend using imagesloaded to determine when an image is loaded
    // but that doesn't support IE7
    listen = function() {
      var debouncedLayout = $.throttle( 300, function() {
        $grid.shuffle('update');
      });
  
      // Get all images inside shuffle
      $grid.find('img').each(function() {
        var proxyImage;
  
        // Image already loaded
        if ( this.complete &amp;&amp; this.naturalWidth !== undefined ) {
          return;
        }
  
        // If none of the checks above matched, simulate loading on detached element.
        proxyImage = new Image();
        $( proxyImage ).on('load', function() {
          $(this).off('load');
          debouncedLayout();
        });
  
        proxyImage.src = this.src;
      });
  
      // Because this method doesn't seem to be perfect.
      setTimeout(function() {
        debouncedLayout();
      }, 500);
    };      
  
    return {
      init: init
    };
  }( jQuery ));
  
  
  
  $(document).ready(function() {
    shuffleme.init();
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#grid {margin-left:-5px;margin-right:-5px;position:relative; overflow: hidden;}
  #grid [class*="col-"] {padding:5px;}
  
  @media (max-width:320px) {
     #grid [class*="col-"] {width:100%;}
  }
  
  
  .shuffle_sizer {
    position: absolute;
    opacity: 0;
    visibility: hidden;
  }
  </code></pre>