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

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

Шаг 1. HTML

Начнем мы с разметки, для этого нам необходим неупорядоченный список с классом “tp-grid”, вот что у нас получилось.

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

Далее нам следует вызвать плагин, делаем это с помощью следующей команды.

Опции

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

Основной стиль задан в файле stapel.css, вы его можете с легкостью подкорректировать.

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

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

Читайте также: