Adaptive Thumbnail Pile Effect with Automatic Grouping

View demo Download source

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:

• Bryan Moats
• Mike Dornseif
• Griffin Moore
• Andrea Austoni
• Jakob Pierzyna
• Jack Hughes
• Jeremy Fryc
• Joyce Rice

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:

• Demo 1: Default configuration
• Demo 2: Delays on single items
• Demo 3: Delays, rotation and larger gutter

View demo Download source