The only real important thing here is the data-groups
attribute. It has to be a valid JSON array of strings. Optionally, it can be a string delimeted by a value you provide. See delimeter
in the options.
In this example, shuffle is using the fluid grid from the Twitter Bootstrap v2.3. It's also making use of BEM class naming.
<div id="grid" class="row">
<figure class="col-3@sm picture-item" data-groups='["photography"]'>
<img src="/img/baseball.png" height="145" width="230" />
<div class="picture-item__details">
<figcaption class="picture-item__title">Baseball</figcaption>
<p class="picture-item__tags">photography</p>
</div>
</figure>
<figure class="col-6@sm picture-item" data-groups='["wallpaper","3d"]'>
<img src="/img/tennis-ball.png" height="145" width="230" />
<div class="picture-item__details">
<figcaption class="picture-item__title">Tennis</figcaption>
<p class="picture-item__tags">wallpaper, 3d</p>
</div>
<p class="picture-item__description">Some description here.</p>
</figure>
<figure class="col-3@sm picture-item" data-groups='["wallpaper","3d"]'>
<img src="/img/imac.png" height="145" width="230" />
<div class="picture-item__details">
<figcaption class="picture-item__title">iMac</figcaption>
<p class="picture-item__tags">wallpaper, 3d</p>
</div>
</figure>
<figure class="col-3@sm picture-item picture-item--h2" data-groups='["graphics"]'>
<img src="/img/master-chief.png" height="145" width="230" />
<div class="picture-item__details">
<figcaption class="picture-item__title">Master Chief</figcaption>
<p class="picture-item__tags">graphics</p>
</div>
<p class="picture-item__description">Some description here.</p>
</figure>
</div>
The columnWidth
option is used to calculate the column width. You have several options:
width
and margin-left
of this sizer
element each time the grid resizes. This is awesome for responsive or fluid grids where the width of a column is a percentage. The sizer
option is an alias for columnWidth
.See a demo using a sizer element or look at the js file for the sizer demo.If you want functional buttons, check out the js file.
$(document).ready(function() {
var $grid = $('#grid'),
$sizer = $grid.find('.shuffle__sizer');
$grid.shuffle({
itemSelector: '.picture-item',
sizer: $sizer
});
});