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

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:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 137

Comments are closed.
  1. It’s amazing!!!! I have a question:
    You can enlarge the image instead of using a link? To make it as an image gallery.
    Thank you!!!

    • I’am afraid you can’t do that with this script. But I’m sure you can integrate a lightbox script here…

    • Hi Emily! Yes, I was able to add a lightbox to images to enlarge them. ๐Ÿ™‚ This is a fabulous script!

  2. I dont know how can I thank you guys… I love codrops updates, because you guys, you always show somethings that we can learn.

    Thank you very much! THX! ๐Ÿ™‚

  3. Thank You for Sharing, always a good tutorial and idea from codrops team!! nice effect!! Great Job!! thx again

  4. Slick and stylish. Love it. I’ve yet to look at the source, so what browsers will it NOT work under?

  5. 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…

  6. 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

  7. 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!

  8. 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

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

  10. 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.

  11. 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. ๐Ÿ™‚

  12. Hi folks,

    I’m playing with this beautiful effect and I found that when the page is too big, the stack opens and the browser stays where it was, so the open stack can get out of sight. I just added at the bottom of _openPile an animation to scroll to the top of the page (can be the stack container) like this:

    /* scroll to top */ var top = self.el.offset().top; $("html, body").animate({ scrollTop: top }, 100); // You can use 0 to scroll to the top of the page, you get the idea.

    Hope somebody finds it useful.

    • Good morning!
      dude, can you tell me where do I stick this code? because really when you surf and back to home, and selects the next block, it does not start at the top!

    • I added just $("html, body").animate({scrollTop: $("#close").offset().top}, 400); right after onBeforeOpen : function( pileName ) { in function calling at the bottom of the body and it works fine.

  13. Hi can you please tell me how to hide Grouping Functionality from above demo… actually i want to display list of photo with pile effect only.
    Thanks

  14. Hi,

    This is a beautiful effect. Does anyone know if it would be possible to add isotope/masonry to improve the layout?

  15. Nice effect, I ‘d like to ask you something…

    In the piles if you remove the background of the title, on IPAD appears all the rest of the titles… is there something to hide the rest of titles and just show the most-top title of the pile.

    Thanks again.

  16. This is pretty nice. Seems simple enough to use….but for some reason I can’t get it to work on localhost. It just does the loading boxes but that’s it. I’ve verified that all the necessary scripts, css and images are in place.

    I can get it working on a live server, no problem. Is there a trick to get it working on a localhost or am I just missing something? Any info appreciated.
    Thanks