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

Для этого мы будем использовать плагин jQuery и трансформации CSS. Для начала мы рассмотрим разметку HTML, для этого мы будем использовать блок, в котором будет расположен ненумерованный список, каждый из элементов которого будет представлять собой изображение на странице: миниатюра, текст и полное изображение:

Далее стили CSS. Мы определим стиль главного контейнера. Этот элемент должен центрироваться на странице, и его ширина должна адаптироваться под любые размеры монитора, таким образом, мы выставим этому элементу ширину в 70%:

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

Стена изображений с помощью jQuery и CSS3

По умолчанию мы хотим, чтобы все элементы списка имели внешний отступ 5px:

Описание будет помещено абсолютно. Когда мы будем писать JavaScript код, то позаботимся о значении left для данного элемента (возможно оно будет равно -200px):

Давайте оформим заголовок и текст:

У изображений будет толстая белая граница и небольшая тень:

Теперь мы хотим добавить некоторый хаос нашим элементам списка и изображениям. Мы скорректируем поле некоторых элементов списка, выбирая определенные дочерние элементы. Берем первый элемент списка, и добавляем левый внешний отступ 50 px:

Затем мы выбираем все чётные элементы и выставляем верхний внешний отступ:

Каждому третьему выставим следующее значение:

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

Лента будет фиксированным элементом. Первоначальная ширина будет равна 0. Далее с помощью анимации доведём её до 100%.

У приближенного текста будет следующий стиль:

При клике на изображение мы динамически добавим изображение в ленту и применим следующий стиль:

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

Теперь рассмотрим JavaScript. Для начала давайте закэшируем некоторые данные:

Далее определим некоторые переменные:

Затем мы определим функцию init, которая сначала запустит плагин, вычислит размерности экрана и инициализирует некоторые события:

В “getWindowsDim” будет храниться размерность экрана:

Затем мы определим некоторые события, такие как: клик по миниатюре, закрытие ленты и окна:

“showRibbon” – показ ленты:

После закрытия ленты мы покажем полное изображение:

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

Теперь реализуем показ полного изображения:

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

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