Меняющиеся фотографии в сетке jquery. Адаптивная вёрстка, урок третий

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

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

1. Метатеги и раздел

Галерея Masonry

2. Шапка страницы

Шапка страницы — раздел содержит следующие элементы-контейнеры:
— логотип ;
— главное меню

Helen Parker personal photographer

Основная часть страницы состоит из блоков с фотографиями, для которых задан фильтр grayscale, придающий им эффект черно-белых фотографий. При наведении этот эффект исчезает.

Нижний колонтитул содержит сведения о копирайте и ссылки на социальные сети.

Для полноценной работы нужно подключить следующие скрипты:

Проблема с накладыванием изображений сетки решается с помощью плагина imagesloaded. Он определяет, когда изображение загружено и после этого строит сетку Masonry.

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

Мы воспользуемся следующими дополнительными jQuery-плагинами:

* для большинства CSS-переходов
* для проверки браузерной поддержки соответствующих CSS-параметров

Красивые изображения в данном руководстве были представлены Шерманом Геронимо-Таном (), и распространяются они под лицензионным соглашением Creative Commons Attribution 2.0 Generic (CC BY 2.0).

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

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

});
Не забудьте включить другие необходимые скрипты.

Опции

// number of rows
rows: 4,

// number of columns
columns: 10,

// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
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
},

// step: number of items that are replaced at the same time
// random ||
// note: for performance issues, the number should not be > options.maxStep
step: "random",
maxStep: 3,

// prevent user to click the items
preventClick: true,

// animation type
// showHide || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotateLeft || rotateRight || rotateTop ||
// rotateBottom || scale || rotate3d ||
// rotateLeftScale || rotateRightScale ||
// rotateTopScale || rotateBottomScale || random
animType: "random",

// animation speed
animSpeed: 500,

// animation easings
animEasingOut: "linear",
animEasingIn: "linear",

// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can"t" be < 300 ms
interval: 3000
При определении размера сетки вам следует учитывать тот факт, что в сетке у вас будет меньше изображений, чем вы помещаете в список. Давайте предположим, что у вас будет 50 изображений в списке и будут определено 5 колонок и 4 строки. Таким образом, мы получим сетку с 20 изображениями и возможностью переключиться на оставшиеся 30.

Ознакомьтесь с этими демо-файлами с тремя разными конфигурациями:

* : Случайные анимации / 55% ширины контейнера / 3 секунды между переключениями

Пример, этой же галереи, но выполненной на фреймворке Bootstrap 3 :

Второй вариант галереи изображений создадим на основе плагина Gridify . Данный плагин предназначен для создания сетки изображений как Pinterest.

Процесс создания этой галереи представим в виде следующих шагов:

Внимание: Существует несколько реализаций плагина gridify.js . В данном проекте выберем тот, который основывается на библиотеке jQuery.

$(function () { var options = { srcNode: "img", // grid items (class, node) margin: "15px", // margin in pixel width: "240px", // grid item width in pixel max_width: "", // dynamic gird item width resizable: true, // re-layout if window resize transition: "all 0.5s ease" // support transition for CSS3 }; $(".grid").gridify(options); });

2. Создание HTML кода галереи:

...

Просмотр изображения галереи будем осуществлять, как и в предыдущем примере, с помощью fancyBox.

Итоговый код галереи изображений подобной Pinterest для Bootstrap 4:

Bootstrap 4 - Создание адаптивной галереи изображений с помощью gridify.js img { padding: 4px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; } img:hover { opacity: 0.6; filter: alpha(opacity=60); } ... $(function() { var options = { srcNode: "img", // grid items margin: "15px", // margin in pixel width: "240px", // grid item width in pixel max_width: "", // dynamic gird item width resizable: true, // re-layout if window resize transition: "all 0.5s ease" // support transition for CSS3 }; $(".grid").gridify(options); });

Пример этой же галереи на Bootstrap 3 .

BlocksIt -плагин позволяющий создавать динамическую сетку разметки. Он управляет преобразованием HTML элементов в "блоки " и располагает их в сетке страницы. Для этого достаточно указать количество столбцов, а всё остальное сделает плагин. Кроме того, вы можете даже объединить "блоки" и сделать один большой.

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

Запустить новый блок слева направо, и
Поместить новый блок под самым коротким блоком.

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

Затем, вызываем функцию .BlocksIt() на jQuery объект. Возможны несколько настроек. $(document).ready(function() { $("#objectID").BlocksIt(); }); И всё.
Если блоки содержат элементы, то убедитесь, что для них заданы размеры до вызова функции .BlocksIt() , также должны быть уверены в том, что изображения уже загружены. Для этого вы можете использовать $(window).load() , чтобы убедиться, что в DOM все загрузилось или использовать плагин, похожий на waitForImages для проверки статуса изображений.

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

numOfCol:
Тип: Int По умолчанию: 5
Количество столбцов, которое будет создано.

offsetY:
Тип: Int По умолчанию: 5
Отступ сверху и снизу для каждого блока.

blockElement:
Тип: String По умолчанию: ‘div’
Дочерний элемент, который будет преобразован в блоки.

Пример разметки:

... ... ... ... ... Атрибут data-size указывает на размер блока (для комбинации блоков).
А скрипт вызова может быть похож на такой: $(document).ready(function() { $("#container").BlocksIt({ numOfCol: 5, offsetX: 8, offsetY: 8, blockElement: ".grid" }); });