Shuffle – Categorize, sort, and filter a responsive grid of items

If you know Isotope plugin, you know the magic of it, as it is a great way to display creative content. Glen Cheney has created Shuffle which is inspired by the Isotope plugin and it has the same beautiful magic of displaying creative content in a modern and clean-looking way. There are filter, sorting and search options which makes Shuffle an amazing tool for creative people to display their portfolios. Shuffle comes with two options – normal and minimal – depends on how do you want content to be presented. Have a look at the demo and you will see the beauty of Shuffle.

Shuffle - Categorize, sort, and filter a responsive grid of items

 

Shuffle - Categorize, sort, and filter a responsive grid of items

DEMO | DEMO MINIMAL | DOWNLOAD

Features

  • Uses CSS Transitions!
  • Responsive (try resizing the window!)
  • Filter items by groups
  • Items can have multiple groups
  • Sort items
  • Advanced filtering method (like searching)

Options

Settings you can change (these are the defaults)

var options = {
 group : 'all' // Which category to show
 speed : 800, // Speed of the transition (in milliseconds). 800 = .8 seconds
 easing : 'ease-out' // css easing function to use
};

The easing function is one of ‘default’, ‘linear’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, or ‘cubic-bezier’.

Usage

The html structure. The only real important thing here is the data-groups attribute. It has to be a valid JSON array of strings.

<div id="grid">
 <div class="item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">
 <img src="img/baseball.png" />
 <div class="item-details">
 <a href="#">Photography</a>
 </div>
 </div>
 <div class="item" data-groups='["wallpaper", "3d"]' data-date-created="2011-08-14" data-title="Tennis">
 <img src="img/tennis-ball.png" />
 <div class="item-details">
 <a href="#">3D Render, Wallpaper</a>
 </div>
 </div>
 <div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2009-05-27" data-title="iMac">
 <img src="img/imac.png" />
 <div class="item-details">
 <a href="#">3D Render, Wallpaper</a>
 </div>
 </div>
 <div class="item" data-groups='["graphics"]' data-date-created="2012-05-14" data-title="Master Chief">
 <img src="img/master-chief.png" />
 <div class="item-details">
 <a href="#">Graphic Design</a>
 </div>
 </div>
</div>

Shuffle takes the width, margin-top, and marigin-right from the .item.

#grid .item {
 width: 230px;
 margin-top: 20px;
 margin-right: 20px;
}

Sets up the button clicks and runs shuffle

$(document).ready(function(){
// Set up button clicks
 $('.filter-options li').on('click', function() {
 var $this = $(this),
 $grid = $('#grid');
// Hide current label, show current label in title
 $('.filter-options .active').removeClass('active');
 $this.addClass('active');
// Filter elements
 $grid.shuffle($this.data('group'));
 });
// instantiate the plugin
 $('#grid').shuffle({
 group : 'all',
 speed : 800,
 easing : 'ease-out'
 });
});

These events will be triggered at their respective times: ‘shrink.shuffle’, ‘shrunk.shuffle’, ‘filter.shuffle’, ‘filtered.shuffle’, and ‘sorted.shuffle’.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

Sorting

You can order the elements based off a function you supply. In the example above, each item has a data-date-created and data-title attribute. The filter buttons have a data-sort attribute with the value of the item’s attribute. Then, with some JavaScript, we can get the correct attribute and provide a function to sort by.

<li data-sort="title">Title</li>

<div class="item" data-title="Baseball">…</div>
// Sorting options
$('.sort-options li').on('click', function() {
 var $this = $(this),
 $grid = $('#grid'),
 sort = $this.data('sort'),
 opts = {};
// Hide current label, show current label in title
 $('.sort-options .active').removeClass('active');
 $this.addClass('active');
// We're given the element wrapped in jQuery
 if (sort === 'date-created') {
 opts = {
 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);
});

The opts parameter can contain two properties. reverse, a boolean which will reverse the array. by is a function that is passed the element wrapped in jQuery. In the case above, we’re returning the value of the data-date-created or data-title attributes.

Calling sort with an empty object will reset the elements to DOM order.

Advanced Filtering

By passing a function to shuffle, you can customize the filtering to your hearts content. Shuffle will iterate over each item in the container and give your function the element wrapped in jQuery and the shuffle instance. Return true to keep the element or false to hide it.

Example

// Filters elements with a data-title attribute with less than 10 characters
$('#grid').shuffle(function($el, shuffle) {
 return $el.data('title').length < 10;
});

Searching

// Advanced filtering
$('.filter .search').on('keyup change', function() {
 var val = this.value.toLowerCase();
 $('#grid').shuffle(function($el, shuffle) {
// Only search elements in the current group
 if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
 return false;
 }
// Get the text inside our element and search for the value in the input
 var text = $.trim($el.text()).toLowerCase();
 return text.indexOf(val) != -1;
 });
});

Dependencies

  • jQuery
  • Modernizr
    • A custom Modernizr build has been included with the plugin.
    • If you already have Modernizr on your site, you may delete it.
    • If you don’t know what Modernizr is, leave it!

Supported Browsers

Chrome
Firefox
IE 7+
Opera
Safari
Browsers that don’t support CSS transitions and transforms *cough* IE <= 9 *cough* will see a less cool, javascript based version of the effect.

Links


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *