Adaptive Thumbnail Pile Effect with Automatic Grouping

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.
Adaptive Thumbnails Pile Effect with Automatic Grouping

From our monthly sponsor: Ship customer-facing metrics fast with Keen.io. Collect, store, query, & display stunning analytics.

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:

Tagged with:

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 137

Comments are closed.
  1. Hi! Thank you so much for this script. This is exactly what I was looking for, for a photo album layout on this site I am working on. I even added a lightbox to each individual photo. It came out great. Here is the site to check it out: http://pilatesnharmony.com/gallery.php

    Props!!

    • Hi savion …. I am also going to use this plugin on my website … would you help me add light box on this gallery

  2. Hey! I’d like to change the script that it opens the staple via a GET-ID! Could you help me modifying the script so it doesnt fire with the “click”-Event but instead the GET-Variable?

  3. great tuts!…but i’d like to know if it should be possible (and how) to have more than one level….thanx

    • Hi! I have the same question! I need a pile of piles and I get lost with the animations

  4. The Demo doesn’t work as it worked earlier, from today?! The problem is with all browsers. What happend?

    • It’s fine now in Firefox and IE, but in Chrome when pile from first row is clicked, the Close button (arrow left) doesn’t visible. I tested this online, offline, your demo, others demos, with jQuery 1.8.* and 1.9.* and everytime the same thing…

    • Could you try again? I updated the script.. there was a small problem in the previous version. Thanks!

    • Works like a charm! Thank you Pedro, much appreciated on your fast responce ๐Ÿ™‚ This is one of the most beautiful galleries on the net. Thank you for sharing ๐Ÿ™‚

  5. I found a bug, after one pic be clicked, othes become visible, but original position’s link still can be clicked.
    ps : sorry about my broken english .

  6. Thank you Pedro for sharing this fabulous plugin. It was just what I needed !
    And thank you TasF for your great patch !

  7. Hei..Pedro…It’s amazing stuff and very userfull.. ๐Ÿ˜€
    But i have a question, why i can’t merge this script with jquery “bumpbox” (like: lightbox).

    Can anyone help me ๐Ÿ˜€

  8. Is it possible to make the album cover the first image in the stack, instead of the last?

  9. Amazing work Pedro!. Congratulations!.. I may use it in one of my projects. Looks really good.

  10. Hi, Is it possible to implement multiple level of grouping with this plugin.
    I want to show a folder structure with the help of this plugin which might contains another folder inside on folder.

    Any help regarding this or any leads that will help in tweeting this will be highly helpful

    Thanks
    Sovan

  11. Hi Pedro, thx for this really awesome script!! It looks great and I’d love to use it for a portfolio.
    I’m trying to add this responsive lightbox plugin to it, but somehow it is tricky to get it to run. I guess the stapel function would be unbeatable with a responsive lightbox ๐Ÿ˜€
    Can you give me a hint ? Or did anyone try it with a responsive lightbox?

    • Pretty simple, just add the Magnific plugin’s code inside Stapel’s “onAfterOpen” callback function.

    • @xander: You can see where to put the magnific lightbox code inside Stapels “onAfterOpen” callback function here . Just check the sourcecode.

  12. Hi! Thanks alot for this wonderful gallery, I’m trying to implement this intro my Portfolio, which is a single page application, which means that I use jQuery to fade in /out different content, so, here’s my problem:

    When I hide the gallery ( I put it all into a div with a ‘gallery’ id ) and then tries to fade in that div using jquery, like this: $(“#gallery”).delay(400).fadeIn(400);

    The stacks loses their position and just lay on top of each other :/?

    Any fix for this or?

  13. Awesome plugin, thanks so much! I’ve implemented it on my site. Works nicely when window is resized also.

    I made some tweaks to it including clickable hyperlink stack titles, displaying stack titles when images expanded, and clicking an image to close the pile (but clicking the images title to read more about the image), Also minified the source.

    I’ve noticed an issue when collapsing the stack, some of the images z-index is too low, so they dissappear. It doesnt happen for the stack you’ve collapsed though. May just be a result of me messing with the plugin.

    My implementation at http://www.shothotspot.com

  14. Hi ( It’s me with the jQuery problem, comment 24 )
    I found a solution, sort of, I use iFrame for my Gallery page, which works like a charm, but only in chrome, the gallery won’t even show up in other browsers when displayed through a iFrame….

    Help? * Please answer *

  15. Hi! This is a really awesome gallery. Could you possibly tell me how to get rid of the pileCount? I really don’t want it to show. Thank you.

  16. Hi! I really appreciate this plugin. I am using this plugin to my website which is build in wordpress. Also, I have integrate JQuery colorbox with your stapel plugin. When I call on my header.php to make the colorbox work and I am calling again to make your stapel plugin work. My problem is back button doesn’t show up when I removed the jqeury 1.9.1 then my colorbox doesn’t work

  17. Hi, this is a wonderful work! Congratulations!
    I would like to know if its possible to use more than one level, by this i mean a “pile of piles” and how. Thank u so much!

  18. Is it possible to set a cover image that is not an image from the gallery?