---
layout: default
title: jQuery Shuffle Plugin
bodyClass: home
extraJS: [ "homepage.js" ]
---
< header class = "container-fluid" >
< div class = "row-fluid" >
< div class = "span7" >
< h1 > Shuffle< / h1 >
< p > Categorize, sort, and filter a responsive grid of items< / p >
< / div >
< / div >
< / header >
< section >
< div class = "container-fluid" >
< h2 > Downloads< / h2 >
< nav role = "secondary" >
< a href = "js/jquery.shuffle.js" > jquery.shuffle.js< / a >
< a href = "js/jquery.shuffle.min.js" > jquery.shuffle.min.js< / a >
< / nav >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Example< / h2 >
< / div >
< div class = "container-fluid filter" >
< div class = "row-fluid" >
< p class = "filter__label" > Filter:< / p >
< div class = "filter-options btn-group" >
< button class = "btn btn--filter" data-group = "wallpaper" > Wallpapers< / button >
< button class = "btn btn--filter" data-group = "graphics" > Graphic Design< / button >
< button class = "btn btn--filter" data-group = "photography" > Photography< / button >
< button class = "btn btn--filter" data-group = "3d" > 3D Renders< / button >
< / div >
< / div >
< div class = "row-fluid" >
< p class = "filter__label" > Sort:< / p >
< div class = "sort-options btn-group" >
< button class = "btn btn--sort" data-sort class = "active" > Default< / button >
< button class = "btn btn--sort" data-sort = "title" > Title< / button >
< button class = "btn btn--sort" data-sort = "date-created" > Date Created< / button >
< / div >
< input class = "search label" type = "search" placeholder = "Search..." / >
< / div >
< / div >
< div id = "grid" class = "container-fluid" >
{% for item in site.items %}
{% assign item = item %}
{% include picture-item.html %}
{% endfor %}
<!-- <div class="item" data - groups='["photography"]' data - date - created="2010 - 09 - 14" data - title="Baseball">
< img src = "img/baseball.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Baseball< / span >
< a href = "img/originals/baseball.jpg" > Photography< / a >
< / div >
< / div >
< div class = "item w2" data-groups = '["wallpaper", "3d"]' data-date-created = "2011-08-14" data-title = "Tennis" >
< p class = "rfloat" > 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 >
< img src = "img/tennis-ball.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Tennis< / span >
< 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" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > iMac< / span >
< a href = "#" > 3D Render, Wallpaper< / a >
< / div >
< / div >
< div class = "item h2" data-groups = '["graphics"]' data-date-created = "2012-05-14" data-title = "Master Chief" >
< img src = "img/master-chief.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Master Chief< / span >
< a href = "#" > Graphic Design< / a >
< p > 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 >
< / div >
< / div >
< div class = "item" data-groups = '["3d", "wallpaper"]' data-date-created = "2012-09-14" data-title = "Eightfold" >
< img src = "img/es-blue.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Eightfold< / span >
< a href = "#" > 3D Render, Wallpaper< / a >
< / div >
< / div >
< div class = "item w2" data-groups = '["photography"]' data-date-created = "2012-03-14" data-title = "Pumpkin" >
< p class = "rfloat" > 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 >
< img src = "img/pumpkin.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Pumpkin< / span >
< a href = "#" > Photography< / a >
< / div >
< / div >
< div class = "item w2 h2" data-groups = '["3d", "wallpaper"]' data-date-created = "2012-09-14" data-title = "Vestride" >
< img src = "img/vestride-red.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Vestride< / span >
< a href = "#" > 3D Render, Wallpaper< / a >
< / div >
< / div >
< div class = "item h2" data-groups = '["graphics"]' data-date-created = "2012-01-12" data-title = "Newegg" >
< img src = "img/newegg.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Newegg< / span >
< a href = "#" > Motion Graphics< / a >
< p > 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 >
< / div >
< / div >
< div class = "item" data-groups = '["wallpaper"]' data-date-created = "2012-01-14" data-title = "Arc" >
< img src = "img/eightfoldarc.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Arc< / span >
< a href = "#" > Wallpaper< / a >
< / div >
< / div >
< div class = "item" data-groups = '["photography"]' data-date-created = "2011-01-14" data-title = "Ground" >
< img src = "img/ground.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Ground< / span >
< a href = "img/originals/baseball.jpg" > Photography< / a >
< / div >
< / div >
< div class = "item w2" data-groups = '["wallpaper"]' data-date-created = "2011-12-14" data-title = "Grass" >
< p class = "rfloat" > 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 >
< img src = "img/grassy-hills.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Grass< / span >
< a href = "#" > Wallpaper< / a >
< / div >
< / div >
< div class = "item" data-groups = '["3d", "wallpaper"]' data-date-created = "2012-04-14" data-title = "Vestride" >
< img src = "img/vestride-classy.png" alt = "" height = "145" width = "230" / >
< div class = "item-details" >
< span class = "title" > Vestride< / span >
< a href = "#" > 3D Render, Wallpaper< / a >
< / div >
< / div > -->
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Other Examples< / h2 >
< nav role = "primary" >
< a href = "{% post_url demos/2013-05-01-basic %}" > Basic masonry layout< / a >
< a href = "{% post_url demos/2013-05-03-minimal %}" > The minimal markup with filters< / a >
< a href = "{% post_url demos/2013-05-02-adaptive %}" > Twitter bootstrap adaptive masonry with compounded filters< / a >
< / nav >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Features< / h2 >
< ul >
< li > Uses CSS Transitions!< / li >
< li > Responsive (try resizing the window!)< / li >
< li > Filter items by groups< / li >
< li > Items can have multiple groups and be different sizes< / li >
< li > Sort items< / li >
< li > Advanced filtering method (like searching)< / li >
< / ul >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Options< / h2 >
< div >
< p > Settings you can change (these are the defaults)< / p >
< pre rel = "JavaScript" >
< code class = "language-javascript" >
// Overrideable options
$.fn.shuffle.options = {
group : 'all', // Which category to show
speed : 600, // Speed of the transition (in milliseconds). 600 = .6 seconds
easing : 'ease-out', // css easing function to use
gutterWidth : 0, // space between columns. Can be a function or number
columnWidth : 0 // can be a function or number or calculated by plugin
};
< / code >
< / pre >
< p > The easing function is one of < code > 'default'< / code > , < code > 'linear'< / code > , < code > 'ease-in'< / code > , < code > 'ease-out'< / code > , < code > 'ease-in-out'< / code > , or < code > 'cubic-bezier'< / code > .< / p >
< / div >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Usage< / h2 >
< div >
< h3 > The HTML Structure< / h3 >
< p > The only real important thing here is the < code class = "language-markup token attr-name" > data-groups< / code > attribute. It has to be a < a href = "http://jsonlint.com/" > valid JSON< / a > array of strings.< / p >
< pre rel = "HTML" >
< code class = "language-markup" >
< 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>
< / code >
< / pre >
< h3 > How column widths work< / h3 >
< p > The < code > columnWidth< / code > option is used to calculate the column width. This option < strong > can be a function< / strong > for responsive layouts. If it's not a function, it uses jQuery's < code class = "language-javascript" > outerWidth(true)< / code > to calculate the column width (this includes margins). If the < code > columnWidth< / code > option isn't specified, the width will be the width of the first item.< / p >
< h3 > A basic setup example< / h3 >
< p > Sets up the button clicks and runs shuffle< / p >
< pre rel = "jQuery" >
< code class = "language-javascript" >
$(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();
});
< / code >
< / pre >
< h3 > Events< / h3 >
< p > These events will be triggered at their respective times: < code > 'shrink.shuffle'< / code > , < code > 'shrunk.shuffle'< / code > , < code > 'filter.shuffle'< / code > , < code > 'filtered.shuffle'< / code > , and < code > 'sorted.shuffle'< / code > .< / p >
< / div >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Sorting< / h2 >
< p > You can order the elements based off a function you supply. In the example above, each item has a < code > data-date-created< / code > and < code > data-title< / code > attribute. The filter buttons have a < code > data-sort< / code > 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.< / p >
< pre rel = "HTML" >
< code class = "language-markup" >
< li data-sort="title"> Title< /li>
< / code >
< / pre >
< pre rel = "HTML" >
< code class = "language-markup" >
< div class="item" data-title="Baseball"> … < /div>
< / code >
< / pre >
< pre rel = "JavaScript" >
< code class = "language-javascript" >
// 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);
});
< / code >
< / pre >
< p > The < code > opts< / code > parameter can contain two properties. < code > reverse< / code > , a boolean which will reverse the array. < code > by< / code > 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.< / p >
< p > Calling sort with an empty object will reset the elements to DOM order.< / p >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Advanced Filtering< / h2 >
< p > 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 < code > true< / code > to keep the element or < code > false< / code > to hide it.< / p >
< h3 > Example< / h3 >
< pre rel = "JavaScript" >
< code class = "language-javascript" >
// Filters elements with a data-title attribute with less than 10 characters
$('#grid').shuffle(function($el, shuffle) {
return $el.data('title').length < 10;
});
< / code >
< / pre >
< h3 > Searching< / h3 >
< pre rel = "JavaScript" >
< code class = "language-javascript" >
// 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;
});
});
< / code >
< / pre >
< p > For another example of advanced filters, check out the < a href = "responsive.html" > compounded filters demo< / a > .< / p >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Dependencies< / h2 >
< ul >
< li > < a target = "_blank" href = "http://jquery.com" > jQuery< / a > < / li >
< li > < a target = "_blank" href = "http://modernizr.com" > Modernizr< / a >
< ul >
< li > A custom Modernizr build has been included with the plugin.< / li >
< li > If you already have Modernizr on your site, you may delete it.< / li >
< li > If you don't know what Modernizr is, leave it!< / li >
< / ul >
< / li >
< / ul >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Supported Browsers< / h2 >
< ul >
< li > Chrome< / li >
< li > Firefox< / li >
< li > IE 7+< / li >
< li > Opera< / li >
< li > Safari< / li >
< / ul >
< p >
Browsers that don't support CSS transitions and transforms < strong > *cough*< / strong > IE < = 9 < strong > *cough*< / strong > will see a less cool, javascript based version of the effect.
< / p >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Links< / h2 >
< ul >
< li > < a href = "https://github.com/Vestride/Shuffle" > GitHub Repo< / a > < / li >
< li > < a href = "http://isotope.metafizzy.co/" > Inspired by Isotope< / a > < / li >
< li > < a href = "http://glencheney.com" > Me< / a > < / li >
< / ul >
< / div >
< / section >
< section >
< div class = "container-fluid" >
< h2 > Changes< / h2 >
{% include changelog.html %}
< / div >
< / section >
