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

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

Шаг 1. HTML

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

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

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

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

Шаг 2. jQuery

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

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

Вот и все. Готово!

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