Getting Shuffle.js and filtering to work

Question

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.

I'm using : https://github.com/Vestride/Shuffle and Bootstrap 3. This probably has nothing to do with Bootstrap.

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

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

HTML contains all dependencies :: jQuery 1.9.1 or higher, 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;
}

Solution

Apparently, though not in the docs, the script http://benalman.com/projects/jquery-throttle-debounce-plugin/ is a dependency too:

So add:

http://benalman.com/projects/jquery-throttle-debounce-plugin/

Demo: http://jsbin.com/vaquci/2

Comments

[Kiran Dash]

I am getting the following errors: wp.customize is not a function, $grid.shuffle is not a function, $.throttle is not a function. Can you please help Dependency: wp_enqueue_script( 'modernizr_js', get_template_directory_uri() . '/js/modernizr.custom.min.js', array('jquery'), '', true ); wp_enqueue_script( 'jquery_shuffle_js', get_template_directory_uri() . '/js/jquery.shuffle.min.js', array('jquery', 'modernizr_js'), '', true ); wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/main.js', array('jquery','jquery_shuffle_js', 'modernizr_js'), '', true );

[Christina]

This is a wordpress issue. Try using the Wordpress stack exchange. I barely use wordpress, but it appears to be the way you are calling the jQuery, which should be no conflict -- google it.

[Kiran Dash]

thanks for the reply. I did some adjustments to make it work.

[Arsalan Adam Khatri]

Is there a way to get the items that will be filtered by $grid.shuffle( 'shuffle', group );