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.

By in Playground on
Adaptive Thumbnails Pile Effect with Automatic Grouping
Demo Code

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();

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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:

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.

Inline to Menu Link Animation

How to Create a Cover Page Transition

Preview to Full Content Page Transition

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 137

Comments are closed.

  1. Is it possible to inverse the order of the pile. The top thumbnail of the pile correspond to the first on the top left thumbnail unstacked?

    Great plugin!

  2. Pedro,

    I’ve tried to create a page with 107 images (each one is about 30k) on http://bonuscasinos.org/sites/all/themes/bonuscasinos_org/demo/test.html.
    The animation is just amazing, but load time is something that kills the entire idea…

    I’m wondering if it’s possible dynamically load images (or even whole elements) while visitor did not clicked specific category? And if she/he did, load chosen category items first?

    I have some dev. resources if assistance needed. Would you like to make extra mile in the plugin development?

    Please drop me a line,
    Emily

  3. @ Larry & Brian (can’t seem to respond directly to your comment) I was able to get lightbox to enlarge images like this:


    TITLE

  5. Hi, this is awesome and thank you very much for the tutorial. I would appreciate if someone can tell me how to remove the gutter size after the last item in a row.

    I have 4 images in a row and its look odd when there is an empty space as gutter after the last image.

    Regards.

  6. Thank you for this amazing effect, I was wondering if it’s possible to add some kind of hover effect when user hovers on pile? like the opacity option in css. Let me know, thanks.

  7. Sorry for the double comment, I also found one issue. If on the showcase you got 2 rows, and then you open a pile that contains only 1 row, then the bottom row of the other piles (which is invisible) is still clickable. Is there any way to fix that?

  8. Wow, I actually fixed that issue (where invisible piles are still clickable which can mess functionality of this great script).

    CTRL +F to find the following lines in jquery.stapel.js and add z-index:

    this._applyTransition( $item, { opacity : 0}, this.options.otherPileAnimation.closeSpeed );

    replace it with:

    this._applyTransition( $item, { opacity : 0, 'z-index' : '-1' }, this.options.otherPileAnimation.closeSpeed );

    +

    this._applyTransition( $item, { opacity : 1}, this.options.otherPileAnimation.openSpeed, function( evt ) {

    with

    this._applyTransition( $item, { opacity : 1, 'z-index' : '0' }, this.options.otherPileAnimation.openSpeed, function( evt ) {

  9. Instead of ‘z-index’ use ‘visibility’ : ‘hidden’ and ‘visible’, it works better (had some issues with z-index). Again sorry for the multiple comments.

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

  12. 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?

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

  14. 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 🙂

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

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

  17. 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 😀

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

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

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

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

  24. 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?

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

  26. 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 *

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

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

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

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

  31. I don’t think so, because there is actually no “cover image” on this. It’s just the last element that is displayed as a cover. Once the pile is openned the “cover” is also included because it’s a element too. I am sure you could work it out with some javascript/jquery.

  32. Hello, I was thinking if it was possible to hide all the piles and keep the last only visible, so that it saves a little performance site-wise.
    Is that possible, Pedro?

  33. Hi Pedro, this is really awesome script!!

    I’m trying to add slimbox plugin to it, but somehow it is tricky to get it to run.
    I saw that you replied to a user before me but could you be more clear? Sorry and thanks again

  34. I have a fixed menu across the top of my website. Is there any way to keep this gallery from scrolling over my menu? I tried to put my menu’s z-index up but no go.

  35. Hi there i am experience a problem with the ‘onAfterOpen’ function in chrome, when a pile is opened this function never gets fired in chrome so the back button is never “shown”, works 100% in all other browsers which is strange because its not a styling problem, when the ‘display:none’ is taken out of the stylesheet it works but then the back button is just displayed all the time which wont make sense, has anyone else experienced this? nonetheless awesome work!!

    • Okay so for those whom might have experienced i managed to play around and figure out that it works if the amount of images associated with each pile is either 1, 2, 3, 5, 7 (haven’t tested higher) but it seems to bomb out on 4 and 6

    • Hi Luan,

      I was having a similar issue. I switched out my modernizr.js with the one in the demo file, seemed to fix the issue.

      Mike

  37. Hi,

    I need help please. For some reason when i add the grid to my website the adaptive positioning of the images in the grid does not work well for me. Could anyone help me? I tried everything! Is this feature in the css or in the js? Also, could someone tell me how I could make this work with lightbox?
    here is a demo link:
    http://paradisepillow.com/Hospitality%20-%20Copy1.html
    Thank you very much in advance! This script is amazing!

  39. just a tip for those who want to remove the effect of overlapping photos just change the javascript file and reset the pileangles = jquery.stapel.js -> pileAngles: 0

  41. I’m trying to integrate and additional grid with stacks on same page. Have any of you guys accomplish this? I’m considering tying to integrate using an iframe as I don’t seem to figure out how to modify js to allow me to do so. Btw awesome stuff Pedro. Thanks for sharing.

  42. Hi guys,

    Awesome tutorial! Thank you!

    Any simple way or ideas to I could make the images open in a lightbox or be enlarged once clicked?
    (IE Once you have opened the stacks and click on an individual image or link to a youtbe etc.)

    I tried installing a lightbox but it just conflicted.

    Thanks,
    Steve

    • Yes ofcourse you can. I used fancybox when I was using this gallery and it was working great. Are you sure you are importing the required lightbox scripts/css etc?

  43. Hi,
    I have used this effect but when i add other data-* attributes second data- (data-*) attributes not worked (script not run)
    What’s the solution to this problem?
    Thanks a lot

  44. Hi!

    Thanks for this neat plugin. Here a few things I noticed, but maybe I just did mistakes while implementing…

    1. Let’s assume the last image is horizontal. When I opened the pile once and closed it again, the vertical images are visible. It would look better, if those would be hidden.
    2. The last image of one pile is vertical and the last image of the next pile is horizontal. The gap between those piles are different big, because you only considered horizontal images, right? It would be nice if you could handle the padding in between differently, for examples with each pile in its div or something, to be able to adjust the piles a little more flexible.
    3. When I use a lightbox, and click on the image to open the pile, everything works fine, but when I collapse it again and click on the image, it automatically opens this image in the lightbox. I can’t explain what’s going wrong here with my interpretation, but I expanded the tp-title over almost the entire image, reduced opacity to 0.6 and on hover even more. It looks pretty neat too 🙂

    If anyone has solutions for those issues, I would be very grateful to hear those 🙂

    I wish you all a great day!!