Анимированная стена миниатюр на jQuery

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

Для начала нам необходимо создать html-разметку которая будет содержать просто неупорядоченный список с якорями и изображениями:

<ul>

</ul>

</div>

Теперь нам необходимо вызвать сам плагин, будем это делать с помощью следующей команды:

$(function() {

$( '#ri-grid' ).gridrotator();

});

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

JQuery Transit для большинства переходов CSS
Modernizr для проверки браузеров на поддержку свойств CSS

Анимированная стена миниатюр с помощью jQuery | RUDEBOX

Шаг 2. jQuery

Теперь рассмотрим параметры плагина, которые можно настроить по необходимости на свой вкус:

/ / Число строк

rows : 4,

/ / Количество столбцов

columns : 10,

/ / Строк / столбцов для разной ширины экрана

/ / Т.е. w768 для экранов меньше, чем 768 пикселей

w1024 : {

rows : 3,

columns : 8

w768 : {

rows : 3,

columns : 7

w480 : {

rows : 3,

columns : 5

w320 : {

rows : 2,

columns : 4

w240 : {

rows : 2,

columns : 3

// Шаг: количество элементов, которые заменены в то же время

// Случайные || [some number]

Обратите внимание: для проблемы с производительностью, число которых не должно быть> options.maxStep

step : 'random',

maxStep : 3,

// Предотвращения пользователя нажатии пунктов

preventClick : true,

// Тип анимации

// showHide || fadeInOut || slideLeft ||

// slideRight || slideTop || slideBottom ||

// rotateLeft || rotateRight || rotateTop ||

// rotateBottom || scale || rotate3d ||

// rotateLeftScale || rotateRightScale ||

// rotateTopScale || rotateBottomScale || random

animType : 'random',

// Скорость анимации

animSpeed : 500,

// Easings анимации

animEasingOut : 'linear',

animEasingIn : 'linear',

/ / Объект (ы) будут заменены каждые 3 секунды

/ / Обратите внимание: для проблемы с производительностью, время не может быть меньше <300 мс

interval : 3000

При определении размера сетки, вы должны иметь в виду, что если вы хотите, чтобы изображения в правильном количестве располагались. Скажем, у вас есть список из 50 картинок то определяем 5 столбцов и 4 строк. Это позволит создать сеть из 20 изображений, а 30 оставили, которые будут подключаться постепенно.