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. It's also making use of the BEM.
<div id="grid" class="row-fluid">
<figure class="span3 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="span6 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="span3 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="span3 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:
sizer
option is an alias for columnWidth
. See a demo using a sizer element or look at the js file for the sizer demo.outerWidth(true)
to calculate the column width of the first item and use that value.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
});
});