jQuery Plugin For Sortable and Filterable Grid of Items - Shuffle

jQuery Plugin For Sortable and Filterable Grid of Items - Shuffle
File Size: 10.1 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Shuffle is a responsive jQuery plugin for categorizing your grid of items to make them sortable, searchable and filterable. With this plugin, your visitors can filter items by groups with CSS transitions. Great for creating a resonsive & Filterable Portfolio website.

Features:

  • Responsive and cross-browser
  • Each item should be able to be in multiple categories
  • Smooth CSS3 transitions

See also:

How to use it:

1. Markup html structure

<div class="container-fluid filter">
<div class="row-fluid">
<input class="filter__search js-shuffle-search" type="search" placeholder="Search..." />
</div>
<div class="row-fluid">
<div class="span9">
<p class="filter__label">Filter:</p>
<div class="filter-options btn-group">
<button class="btn btn--warning" data-group="wallpaper">Wallpapers</button>
<button class="btn btn--warning" data-group="graphics">Graphic Design</button>
<button class="btn btn--warning" data-group="photography">Photos</button>
<button class="btn btn--warning" data-group="3d">3D Renders</button>
</div>
</div>
<div class="span3">
<div class="m-nofloat pull-right">
<p class="filter__label">Sort:</p>
<select class="sort-options">
<option value>Default</option>
<option value="title">Title</option>
<option value="date-created">Date Created</option>
</select>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div id="grid" class="row-fluid m-row shuffle--container shuffle--fluid">
<figure class="span3 m-span3 picture-item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball"> <img src="http://vestride.github.io/Shuffle/img/baseball.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/baseball.jpg" target="_blank">Baseball</a></figcaption>
<p class="picture-item__tags pull-right">photography</p>
</div>
</figure>
<figure class="span6 m-span3 picture-item" data-groups='["wallpaper","3d"]' data-date-created="2011-08-14" data-title="Tennis"> <img src="http://vestride.github.io/Shuffle/img/tennis-ball.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/tennis-ball.jpg" target="_blank">Tennis</a></figcaption>
<p class="picture-item__tags pull-right">wallpaper, 3d</p>
</div>
<p class="picture-item__description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</figure>
<figure class="span3 m-span3 picture-item" data-groups='["wallpaper","3d"]' data-date-created="2009-05-27" data-title="iMac"> <img src="http://vestride.github.io/Shuffle/img/imac.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/imac.jpg" target="_blank">iMac</a></figcaption>
<p class="picture-item__tags pull-right">wallpaper, 3d</p>
</div>
</figure>
<figure class="span3 m-span3 picture-item picture-item--h2" data-groups='["graphics"]' data-date-created="2012-05-14" data-title="Master Chief"> <img src="http://vestride.github.io/Shuffle/img/master-chief.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/Master_Chief_Portrait_by_Eightfold_Studios.jpg" target="_blank">Master Chief</a></figcaption>
<p class="picture-item__tags pull-right">graphics</p>
</div>
<p class="picture-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</figure>
<figure class="span3 m-span3 picture-item" data-groups='["wallpaper","3d"]' data-date-created="2009-09-14" data-title="Eightfold"> <img src="http://vestride.github.io/Shuffle/img/es-blue.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/es-blue.jpg" target="_blank">Eightfold</a></figcaption>
<p class="picture-item__tags pull-right">wallpaper, 3d</p>
</div>
</figure>
<figure class="span6 m-span3 picture-item" data-groups='["photography"]' data-date-created="2012-03-14" data-title="Pumpkin"> <img src="http://vestride.github.io/Shuffle/img/pumpkin.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/pumpkin.jpg" target="_blank">Pumpkin</a></figcaption>
<p class="picture-item__tags pull-right">photography</p>
</div>
<p class="picture-item__description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</figure>
<figure class="span6 m-span3 picture-item picture-item--h2" data-groups='["wallpaper","3d"]' data-date-created="2013-05-19" data-title="Vestride"> <img src="http://vestride.github.io/Shuffle/img/vestride-red.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/vestride-red.jpg" target="_blank">Vestride</a></figcaption>
<p class="picture-item__tags pull-right">wallpaper, 3d</p>
</div>
</figure>
<figure class="span3 m-span3 picture-item picture-item--h2" data-groups='["graphics"]' data-date-created="2013-02-01" data-title="Newegg"> <img src="http://vestride.github.io/Shuffle/img/newegg.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/newegg.jpg" target="_blank">Newegg</a></figcaption>
<p class="picture-item__tags pull-right">graphics</p>
</div>
<p class="picture-item__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</figure>
<figure class="span3 m-span3 picture-item" data-groups='["wallpaper"]' data-date-created="2000-01-01" data-title="Arc"> <img src="http://vestride.github.io/Shuffle/img/eightfoldarc.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/eightfoldarc.jpg" target="_blank">Arc</a></figcaption>
<p class="picture-item__tags pull-right">wallpaper</p>
</div>
</figure>
<figure class="span3 m-span3 picture-item" data-groups='["photography"]' data-date-created="2012-07-04" data-title="Ground"> <img src="http://vestride.github.io/Shuffle/img/ground.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/ground!.jpg" target="_blank">Ground</a></figcaption>
<p class="picture-item__tags pull-right">photography</p>
</div>
</figure>
<figure class="span6 m-span3 picture-item" data-groups='["wallpaper"]' data-date-created="2011-08-12" data-title="Grass"> <img src="http://vestride.github.io/Shuffle/img/grassy-hills.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/grassy-hills.tif" target="_blank">Grass</a></figcaption>
<p class="picture-item__tags pull-right">wallpaper</p>
</div>
<p class="picture-item__description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</figure>
<figure class="span3 m-span3 picture-item" data-groups='["wallpaper","3d"]' data-date-created="2013-05-19" data-title="Vestride"> <img src="http://vestride.github.io/Shuffle/img/vestride-classy.png" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="http://vestride.github.io/Shuffle/img/originals/vestride-classy.jpg" target="_blank">Vestride</a></figcaption>
<p class="picture-item__tags pull-right">wallpaper, 3d</p>
</div>
</figure>
<div class="span3 m-span3 shuffle__sizer"></div>
</div>
</div>

2. Include jQuery library and jQuery Shuffle on the page

<!--[if lt IE 9]>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--<![endif]-->

3. The javascript

var DEMO = (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();
      setupSorting();
      setupSearching();
    }, 100);

    // instantiate the plugin
    $grid.shuffle({
      itemSelector: '.picture-item',
      sizer: $sizer
    });

    // Destroy it! o_O
    // $grid.shuffle('destroy');

    // You can subscribe to custom events:
    // shrink, shrunk, filter, filtered, sorted, load, done
    // $grid.on('shrink.shuffle shrunk.shuffle filter.shuffle filtered.shuffle sorted.shuffle layout.shuffle', function(evt, shuffle) {
    //   if ( window.console ) {
    //     console.log(evt.type, shuffle, this);
    //   }
    // });
  },

  // 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;
  },

  setupSorting = function() {
    // Sorting options
    $('.sort-options').on('change', function() {
      var sort = this.value,
          opts = {};

      // We're given the element wrapped in jQuery
      if ( sort === 'date-created' ) {
        opts = {
          reverse: true,
          by: function($el) {
            return $el.data('date-created');
          }
        };
      } else if ( sort === 'title' ) {
        opts = {
          by: function($el) {
            return $el.data('title').toLowerCase();
          }
        };
      }

      // Filter elements
      $grid.shuffle('sort', opts);
    });
  },

  setupSearching = function() {
    // Advanced filtering
    $('.js-shuffle-search').on('keyup change', function() {
      var val = this.value.toLowerCase();
      $grid.shuffle('shuffle', function($el, shuffle) {

        // Only search elements in the current group
        if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
          return false;
        }

        var text = $.trim( $el.find('.picture-item__title').text() ).toLowerCase();
        return text.indexOf(val) !== -1;
      });
    });
  },

  // 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;
    });
  };

  return {
    init: init
  };
}( jQuery ));



$(document).ready(function() {
  DEMO.init();
});

4. Options

// Overrideable options
Shuffle.options = {
    group: 'all', // Filter group
    speed: 250, // Transition/animation speed (milliseconds)
    easing: 'ease-out', // css easing function to use
    itemSelector: '', // e.g. '.picture-item'
    sizer: null, // sizer element. Can be anything columnWidth is
    gutterWidth: 0, // a static number or function that tells the plugin how wide the gutters between columns are (in pixels)
    columnWidth: 0, // a static number or function that returns a number which tells the plugin how wide the columns are (in pixels)
    delimeter: null, // if your group is not json, and is comma delimeted, you could set delimeter to ','
    buffer: 0, // useful for percentage based heights when they might not always be exactly the same (in pixels)
    initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method
    throttle: $.throttle || null, // By default, shuffle will try to throttle the resize event. This option will change the method it uses
    throttleTime: 300, // How often shuffle can be called on resize (in milliseconds)
    sequentialFadeDelay: 150, // Delay between each item that fades in when adding items
    supported: Modernizr.csstransforms && Modernizr.csstransitions // supports transitions and transforms
};

Change logs:

v4.0.0 (2016-04-20)

  • Use ES6 export for main file. Add index.js to export the `default` to module.exports. This would allow module bundlers like rollup to use jsnext:main and it'll all be ES6 import/exports

v3.1.1 (2015-03-25)

  • Update

v3.0.4 (2015-02-17)

  • Add NPM support

v3.0.1 (2014-12-30)

  • Add CommonJS support

v3.0.0 (2014-11-27)

  • Add blurred image for caption.

v2.1.2 (2014-06-02)

  • update.

v2.1.0 (2014-04-19)

  • update.

v2.1.0 (2014-04-13)

  • update.

v2.0.8 (2014-04-12)

  • Add more demos.
  • Add AMD support. 

v2.0.6 (2014-03-16)

  • bug fixed.

v2.0.5 (2014-03-09)

  • Add bootstrap 3 demo, fix percentage width issue with Shuffle

This awesome jQuery plugin is developed by Vestride. For more Advanced Usages, please check the demo page or visit the official website.