New jQuery adaptive gallery plugin with automatic grouping

The site tympanus.net presents a new experimental jQuery plugin to create a gallery that can be used to solve various tasks, such as simply displaying an image, grouped in a specific way, or displaying whole user albums with photos without reloading the page. Of course, the gallery is adaptive, which makes it convenient to use it both on computers with a large screen and on mobile devices.

The plugin automatically, using the data- * attribute, groups image thumbnails into some sort of pack (stack). When the user clicks on it - the images fly in different directions in certain positions. They may be slightly rotated or offset.

The grid used for output is adaptive. When the screen resolution is reduced, the table elements are rearranged and the number of columns decreases.
')
Browser support is not bad, but it's worth considering that CSS conversions only work in browsers that support them. For the rest there is a small animation.

Usage example

First you need to create an unnumbered list with the tp-grid class:

<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 important data-pile attribute contains the name of the group to which the image belongs. Moreover, each of the thumbnails may belong to more than one group.

After that, call the plugin:

 $( '#tp-grid' ).stapel(); 

Plugin settings

 $.Stapel.defaults = { //    gutter : 40, //        // (  ) pileAngles : 2, //    ,    pileAnimation : { openSpeed : 400, openEasing : 'ease-in-out', closeSpeed : 400, closeEasing : 'ease-in-out' }, //      otherPileAnimation : { openSpeed : 400, openEasing : 'ease-in-out', closeSpeed : 350, closeEasing : 'ease-in-out' }, //       delay : 0, //       randomAngle : false, // callback- 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; } }; 

Together with the plugin come your own styles, but you can override them. Details in the examples .

The stack effect is created by a hard-coded number of images (two are rotated at a certain angle, one at the bottom). If you want to change it, the corresponding code in the plugin looks like this:

 for( var i = 0, len = p.elements.length; i < len; ++i ) { var $el = $( p.elements[i].el ), styleCSS = { transform : 'rotate(0deg)' }; this._applyInitialTransition( $el ); if( i === len - 2 ) { styleCSS = { transform : 'rotate(' + this.options.pileAngles + 'deg)' }; } else if( i === len - 3 ) { styleCSS = { transform : 'rotate(-' + this.options.pileAngles + 'deg)' }; } else if( i !== len - 1 ) { var extraStyle = { visibility : 'hidden' }; $el.css( extraStyle ).data( 'extraStyle', extraStyle ); } ... 

In it, the last two elements are rotated by the number of degrees defined in the settings, and the rest are simply hidden. It is very easy to change this code to set the desired number of "abandoned" images.

Drupal application

User mrded is developing a module for Drupal with the integration of the plugin and the Views module .

Links

Project on github .
Examples of work .

Article prepared on the basis of tympanus.net