Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Адаптивное представление миниатюр изображений в виде эффекта автоматической группировки в стопки


Занимательный экспериментальный jQuery плагин, который будет создавать группы изображений исходя из атрибута data-pile миниатюр, расположенных в стопке. При нажатии на неё, изображения принадлежащие к данной группе, используя CSS переходы, будут разлетаться по сетке.


    Этот экспериментальный jQuery плагин, позволяет автоматически группировать миниатюры, используя эффект стопки. Изображения будут сгруппированы в соответствии с их атрибутами data, и после нажатия по стопке, они будут разлетаться по экрану, занимая свои места в сетке. В ней, миниатюры могут быть слегка повёрнуты или занимать свои позиции с некоторой задержкой.

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

    Иллюстрации для демонстрационных примеров, были позаимствованы у следующих товарищей из Dribbble:

Bryan Moats
Mike Dornseif
Griffin Moore
Andrea Austoni
Jakob Pierzyna
Jack Hughes
Jeremy Fryc
Joyce Rice

    Обращаю Ваше внимание: данный эффект будет виден, только в браузерах поддерживающих CSS преобразования.

    Для прочих браузеров, в качестве запасного варианта, мы будем анимировать стопки с помощью jQuery.

    Разметка

    По традиции, давайте начнём с разметки. Для работы плагина, мы будем использовать неупорядоченный список с классом «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,
 
  // степень ротации для 2-ого и 3-ого пункта
  // (для получения других интересных эффект)
    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,
 
    // функции обратного вызова
    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; }
 
};

    Основной стиль, определён в файле stapel.css. Увидеть примеры стилей для некоторых дополнительных демонстраций, мы можете в файле custom.css.

    Демонстрации

    Просмотрите демонстрации, чтобы увидеть различные настройки конфигурации в действии:

Демонстрация 1: конфигурация по умолчанию;
Демонстрация 2: задержка отлёта отдельных миниатюр к сетке;
Демонстрация 3: при отлёте, миниатюры имеют разные углы вращения.

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 21.03.2013
Опубликовал: Сергей Кашурин
Просмотров: 774
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


BARAJA - jQuery плагин создающий великолепные информационные карточки на вашем сайте, экономя драгоценное место
Благодаря этому плагину, элементы могут располагаться как карты в виде стопки, раскладываясь перед нами оригинальным способом. Добавьте к элементам небольшой текст и уникальный рисунок, примените оригинальный эффект преобразования, и ваша страничка преобразится на глазах.
5 прекраснейших дизайнерских решений для ваших форм входа
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!
BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: