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

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:

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:

View demo Download source

Previous:
Next:

Tagged with:

Related Articles

Feedback 136

Comments are closed.
  1. 1

    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.

  2. 2

    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?

  3. 3

    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

  4. 4

    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.

  5. 5

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

    • 6

      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

    • 7

      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

  6. 9

    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!

  7. 11

    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

  8. 13

    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.

  9. 14

    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

    • 15

      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?

  10. 16

    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

Comments are closed.