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: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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. Slick and stylish. Love it. I’ve yet to look at the source, so what browsers will it NOT work under?

  2. Do you have any idea HOW YOU ARE CHANGING THE WAY WE SEE THE IMAGES IN WEB PAGES TODAY?; You are doing an amazing job.
    Thanks for sharing this and make the Internet a more friendly place for everyone of us who love this…

    Thanks again…

  3. Love this.

    Is there anyway you can look at adding a reupdate function? This would be perfect if I want to call the photos on ajax.

    E.g. Click the “stack” and then it will call the request, once that’s complete it will append the images and then I just need to call reupdate to get it to realise theres new images?

    Thanks

  4. Did I ever mention how much I love your team! This is exactly what I wanted to make and you taught me how. Thank you!

  5. Awesome tutorial !! Like every time !!
    There is just a little bug. When you delete the border of the image, then you open one stack and then close it, there is a problem on the image loading. All of them are not loaded. Any idea to fix this bug ?

    • Did you ever get an answer to this Anthony or figure it out. I’m finding the JS conflicts when I try to add a lightbox effect. Can’t seem to find a solution.

    • Sharon and Anthony,
      I’m not sure if either of you got an answer to this or not, but here is an example of this script with a lightbox effect in place.
      Hit me up with any questions: contact [at] savionsmith . com

  6. Love it, thanks! I’m looking for the function that will open one of the stacks on page load – anyone got suggestions?

  7. I found a strange occurrence in Chrome. If I enqueue jQuery from WordPress 1.7.3 it doesn’t show the stack. If I use jQuery 1.8.3, it does. In Firefox it works with the latest WordPress jQuery build. Firefox works well on all counts. But Safari and Chrome don’t behave right when using the enqueue jQuery in WordPress.

    Any ideas why that would be the case?

    Thanks!
    Justin

    • Hi Justin,
      same problem here. Can’t figure out what should be the problem.

      Did you find a solution?

    • jQuery 1.8 introduced the “Automatic CSS prefixing” which is not part of the current jQuery version used in WordPress (1.7.X). In order to work we need to add the appropriate prefixes in the script. I’ve added a slightly modified version of the script here:
      http://tympanus.net/Development/Stapel/js/jquery.stapel.older.js
      It’s not fully tested but it seems to do the job. Let me know if it works fine for you. Cheers.

    • Thank you Pedro,
      I offer myself as tester. I’m gonna use your plugin in our next WP Theme and I’ll let you know if I’ll experience any kind of issues.

      Thank you again.

    • FIXED:

      If you comment the following code:

      if( !this.support ) {
      $item.css( this.transformName, ‘none’ );
      }
      the script works fine also on IE.

  8. I was upgrading my website and was looking for some new way of showing my Design Portfolio . I have found the perfect script for it. Thanks Pedro. 🙂