Сетка миниатюр с предосмотром изображений на jQuery и CSS3 | RUDEBOXВ последнее время интернет гигант Google стал на путь модернизма, и весьма преобразил свои ресурсы, а именно поиск изображений. Поиск стал более отзывчивым к пользователю, с приятным интерфейсом и продуманными деталями. Основным преимуществом является реакция изображений на нажатие мышки, в результате чего, мы получим выпадающий список с увеличенным изображением, его заголовком, описанием и возможностью перейти на ресурс с изображением. В данном уроке мы рассмотрим как это можно реализовать у себя на сайте.

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

Шаг 1. HTML

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

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

С разметкой мы разобрались, перейдем к следующему шагу.

Сетка миниатюр с предосмотром изображений на jQuery и CSS3 RUDEBOX

Шаг 2. CSS

Для начала нам необходимо определить стили сетки, она будет во всю ширину экрана, кроме этого нам необходимо отцентрировать миниатюры, сделаем это мы с помощью “display: inline-block”:

Нам необходимо отображать ссылки как блоки:

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

Блок в сером цвете будет иметь абсолютное позиционирование, кроме этого его высота, изначально, будет равна  0, а опция overflow равна hidden- элемент будет скрыт.

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

Контейнеры для изображения и описания будут 50% в ширину, а также прикреплены друг к другу:

Теперь определим базовые стили для текста и ссылки:

Добавим элемент для загрузки изображений, он будет достаточно просто, кроме этого установим теми и немного закруглим:

Добавим несколько медиа-запросов, они необходимы для правильного отображения если размер экрана меньше 650px:

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

Шаг 3. JavaScript

Для начала нам необходимо определить базовые переменные:

Нам необходимо загрузить все изображения, после этого мы сможем записать все размеры изображений:

Функция update нам будет необходима для обновления информации в панели представления:

Страница должна немного смещаться вниз, когда блок будет развернут:

При закрытии блока нам необходимо вернуть всё на свои места:

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

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