New jQuery adaptive gallery plugin with auto-grouping

The site tympanus.net presented new experimental jQuery plugin to create a gallery that can be used for different tasks, for example, a simple image display, grouped in a certain way or display entire Albums with pictures without reloading the page. Of course, the gallery is adaptive, which makes it convenient to use it on both large-screen computers and mobile devices.

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

The mesh used for output is adaptive. As screen resolution decreases, table elements are rebuilt and the number of columns decreases.

Browser support is not bad, just keep in mind that CSS conversions work only in browsers that support them. For the rest there is a little animation.

Usage example

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

Some title

The important data-pile attribute contains the name of the group to which the image belongs. Moreover, each of the thumbnails can 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; }
};

The styles go with the plugin, but they can be redefined. Details in the examples .

The stack effect is created by a hard-coded number of images (two rotated by a certain angle, one at the base). If you want to change this, 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, a rotation by the number of degrees defined in the settings is applied to the last two elements, and the rest are simply hidden. It is very easy to change this code to set the desired number of “abandoned” images.

Drupal Application

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

References

Project on GitHub .
Examples of work .

This article is based on tympanus.net