Новый jQuery плагин адаптивной галереи c автоматической группировкой

    image

    На сайте tympanus.net представлен новый экспериментальный jQuery плагин для создания галереи, который можно использовать для решения разных задач, например, простой показ изображении, сгруппированных определенным образом или отображение целых альбомов пользователей с фотографиями без перезагрузки страницы. Разумеется, галерея адаптивная, что позволяет удобно использовать ее как на компьютерах с большим экраном так и на мобильных устройствах.

    Плагин автоматически, используя атрибут data-*, группирует миниатюры изображений в некоторое подобие пачки (стопки). Когда пользователь кликает на нее — изображения разлетаются в разные стороны в определенные положения. Они могут быть немного повернуты или смещены

    Сетка, используемая для вывода, адаптивная. При уменьшении разрешения экрана элементы таблицы перестраиваются и количество столбцов уменьшается.

    Поддержка браузеров неплохая, только стоит учесть, что CSS преобразования работают только в браузерах, которые их поддерживают. Для остальных есть небольшая анимация.

    Пример использования


    Сначала нужно создать ненумерованный список с классом tp-grid:

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

    Важный атрибут data-pile содержит имя группы, к которй принадлежит изображение. Причем, каждая из миниатюр может принадлежать более, чем к одной группе.

    После этого вызвать плагин:

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


    Настройки плагина


    $.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; }
     
    };
    

    Вместе с плагином идут свои стили, но их можно переопределять. Подробности в примерах.

    Эффект стопки создается жестко закодированным количеством изображений (два повернуты на определенный угол, одно в основании). Если есть желание изменить это, то соответствующий код в плагине выглядит так:

    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 );
    
      }
    ...
    


    В нем к последним двум элементам применяется поворот на количество градусов, определенных в настройках, а остальные просто скрываются. Очень легко поменять этот код, чтобы задать нужное количество «брошенных» изображений.

    Применение в Drupal


    Пользователь mrded разрабатывает модуль для Drupal с интеграцией плагина и модуля Views.

    Ссылки


    Проект на GitHub.
    Примеры работы.

    Статья подготовлена по материалам tympanus.net
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 17
    • +4
      Это больше похоже на перевод
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Было бы круто, если бы еще в стопке разное количество картинок лежало)
        • 0
          так в примерах разное и лежит
          • 0
            В коде видно, что количество смещенных изображений (об этом, вероятно, говорит Talyutin) равно двум. Плюс одно «обычное». Итого, эффект создается тремя элементами.
          • 0
            В код есть такой участок:

            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 );
            
              }
            ...
            


            В нем к последним двум элементам применяется поворот на кол-во градусов, определенных в настройке, а остальные просто скрываются. Очень легко поменять этот код, чтобы задать нужное количество «брошенных» изображений.

            Добавлю это в статью, думаю интересно другим.
          • +1
            в Опере все работает совсем по-другому.
            • +1
              Минус еще в том, что нет якоря на открытую галерею.
              А когда из галереи переходишь на картинку по ссылке и возвращаешься назад, то бросает на список групп.
              Не удобно.
              • 0
                Оказывается, перенос равносторонних прямоугольных элементов при уменьшении viewport — это теперь «адаптивная вёрстка».
              • +2
                Автор, что вам помешало оформить топик переводом? Если это таковым и является?
                • +2
                  Странная штука. Сходу не могу придумать, где бы это использовать. Фотоальбомы? Нет, ссылки ведут не на файлы изображений, чтобы прикрутить lightbox. Да и навигация паршивая: стрелка сверху сидит, а если открыта нижняя галерея?
                  В общем, очень спорная штука, не стал бы её применять.
                  • 0
                    Плагин мне очень понравился, в связи с чем стал по-тихоньку писать интеграцию с Drupal Views.
                    Если кому-то интересно — модуль можно найти здесь: Views Stapel

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.