An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.

This experimental jQuery plugin allows the automatic grouping of thumbnails using a pile effect. The thumbnails will group according to their shared data-pile attribute and once clicked, the pile will disperse and its thumbnails fly to their positions. The thumbnails can be slightly rotated or positioned with a delay.

The grid itself is adaptive, meaning that if there is not enough horizontal space considering the width and the gutter of the items, the column count will decrease and the grid will re-order.

The demo features some Dribbble shots of the following artists:

Please note that the CSS transforms and transitions only work in browsers that support them.

There is a simple jQuery animate fallback for browsers that don’t support transitions.

For using the plugin, an unordered list with the class “tp-grid” is expected, i.e. in our demo we use:

<ul id="tp-grid" class="tp-grid"> <li data-pile="Group 1"> <a href="#"> <span class="tp-info"> <span>Some title</span> </span> <img src="images/1.jpg" /> </a> </li> <li data-pile="Group 2"> <!-- ... --> </li> <li data-pile="Group 1,Group 2"> <!-- ... --> </li> <!-- ... --> </ul>

The data-pile attribute will contain the name of the group that the item belongs to. Note that an item can belong to more than one group.

The plugin can be called like this:

$( '#tp-grid' ).stapel();

Options

The following default options are available:

$.Stapel.defaults = { // space between the items gutter : 40, // the rotations degree for the 2nd and 3rd item // (to give a more realistic pile effect) pileAngles : 2, // animation settings for the items of the clicked pile pileAnimation : { openSpeed : 400, openEasing : 'ease-in-out', closeSpeed : 400, closeEasing : 'ease-in-out' }, // animation settings for the other piles otherPileAnimation : { openSpeed : 400, openEasing : 'ease-in-out', closeSpeed : 350, closeEasing : 'ease-in-out' }, // delay for each item of the pile delay : 0, // random rotation for single items randomAngle : false, // callback functions onLoad : function() { return false; }, onBeforeOpen : function( pileName ) { return false; }, onAfterOpen : function( pileName, totalItems ) { return false; }, onBeforeClose : function( pileName ) { return false; }, onAfterClose : function( pileName, totalItems ) { return false; } };

The basic styling is defined in the stapel.css file and you can see an example of some additional styling for the demos in custom.css.

Demos

Check out the demos to see some different configurations in action: