You can order the elements based off a function you supply. In the demo above, each item has a data-date-created
and data-title
attribute. When the select option menu changes, a sort object is passed to shuffle.
<select class="sort-options">
<option value="">Default</option>
<option value="title">Title</option>
<option value="date-created">Date Created</option>
</select>
<figure class="picture-item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">…</figure>
// 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);
});
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.