Immer Shuffle.js und filtern arbeiten

Bin ich überfragt. Hab die Mauerwerk-Teil eingerichtet, kann aber nicht verstehen, warum die Filterung funktioniert nicht. Ich habe durch das Skript, im Vergleich zu dem auf der demo-Website, und ich bin auf Männerjagd.

Ich bin mit : https://github.com/Vestride/Shuffle und Bootstrap 3. Dies hat wohl nichts mit Bootstrap.

DEMO w/Bearbeiten: http://jsbin.com/vaquci/1/edit

DEMO: http://jsbin.com/vaquci/1/

HTML enthält alle Abhängigkeiten :: jQuery 1.9.1 oder höher, Modernizr, etc.,

HTML

<div class="container">

     <div class="filter-options">
      <button class="btn btn-default" data-group="wallpaper">Wallpapers</button>
      <button class="btn btn-default" data-group="graphics">Graphic Design</button>
      <button class="btn btn-default" data-group="photography">Photos</button>
      <button class="btn btn-default" data-group="3d">3D Renders</button>
    </div>      



<div id="grid" class="row">
    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
       <img src="http://placehold.it/400x534" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x566" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
        <img src="http://placehold.it/400x600" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
        <img src="http://placehold.it/400x504" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
        <img src="http://placehold.it/400x316" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
        <img src="http://placehold.it/400x600" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["photography"]'>
        <img src="http://placehold.it/400x594" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
        <img src="http://placehold.it/400x400" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
        <img src="http://placehold.it/400x400" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["3d"]'>
        <img src="http://placehold.it/400x796" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x534" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x566" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x600" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x504" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x316" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x600" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x594" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x400" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x400" alt="" class="img-responsive">
    </div>

    <div class="col-xs-6 col-sm-4 col-md-3" data-groups='["graphics"]'>
        <img src="http://placehold.it/400x796" alt="" class="img-responsive">
    </div>

          <!-- sizer -->
      <div class="col-xs-6 col-sm-4 col-md-3 shuffle_sizer"></div>          


    </div><!-- /#grid -->
</div><!-- /.container -->

jQuery:

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 && 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();
});

CSS

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