В этой статье рассмотрим примеры создания различных галерей изображений. В первом - разработаем галерею изображений на основе сетки Bootstrap, а во втором – на базе плагина Gridify (Mosaic Flow).

Галерея изображений на базе сетки Bootstrap

Основные этапы по созданию адаптивной галереи изображений на базе сетки Bootstrap:

1. Разработка сетки, которая будет содержать на одной линии в зависимости от размера экрана определённое количество миниатюр изображений.

На Bootstrap 4 это будет выглядеть следующим образом:

<div class="row"> 
    <div class="col-lg-3 col-md-4 col-6">
        ...
    </div>
    <div class="col-lg-3 col-md-4 col-6">
        ...
    </div>
    <div class="col-lg-3 col-md-4 col-6">
        ...
    </div>
    ...
</div>

На Bootstrap 3 эту же сетку можно представить так:

<div class="row"> 
    <div class="col-md-3 col-sm-4 col-xs-6">
        ...
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        ...
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        ...
    </div>
    ...
</div>

2. Помещение элементов img (изображений) в ячейки сетки:

<div class="row"> 
    <div class="col-lg-3 col-md-4 col-6">
        <img class="img-fluid" src="..." alt="...">
    </div>
    <div class="col-lg-3 col-md-4 col-6">
        <img class="img-fluid" src="..." alt="...">
    </div>
    ...

3. Подключение инструмента fancyBox3 к веб-странице:

<!-- fancyBox CSS -->
<link href="путь_до/jquery.fancybox.min.css" rel="stylesheet">

<!-- fancyBox JS -->
<script src="путь_до/jquery.fancybox.min.js"></script>

Для того чтобы изображения можно было просматривать с помощью fancyBox3 необходимо каждое из них обернуть с помощью элемента <a> и добавить к нему атрибуты:

  • data-fancybox="gallery" – селектор для инициализации изображений, которые можно будет просматривать в окне fancyBox с помощью стрелок назад и вперёд;
  • href="..." – ссылка, на оригинальный размер изображения.
<a data-fancybox="gallery" href="путь_к_исходному_изображению"> 
    <img class="img-fluid" src="путь_к_уменьшенному_экземпляру_изображения" alt="..."> 
</a>

4. Добавление к адаптивным блокам дополнительного класса thumb.

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

<div class="col-lg-3 col-md-4 col-6 thumb">
    <a data-fancybox="gallery" href="путь_к_исходному_изображению">
        <img class="img-fluid" src="путь_к_уменьшенному_экземпляру_изображения" alt="...">
    </a>
</div>
...

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 4 - Создание адаптивной галереи изображений с помощью сетки</title>
    <!-- Bootstrap CSS -->
    <link href="путь_до/bootstrap.min.css" rel="stylesheet">
    <!-- fancyBox3 CSS -->
    <link href="путь_до/jquery.fancybox.min.css" rel="stylesheet">
    <style>
        .thumb img {
            -webkit-filter: grayscale(0);
            filter: none;
            border-radius: 5px;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 5px;
        }

        .thumb img:hover {
            -webkit-filter: grayscale(1);
            filter: grayscale(1);
        }

        .thumb {
            padding: 5px;
        }
    </style>
</head>
<body>

<div class="container">
    <h1 class="h3 text-center my-4">Bootstrap 4 - Создание адаптивной галереи изображений с помощью сетки</h1>
    <div class="row">
        <div class="col-lg-3 col-md-4 col-6 thumb">
            <a data-fancybox="gallery" href="путь_к_исходному_изображению">
                <img class="img-fluid" src="путь_к_уменьшенному_экземпляру_изображения" alt="...">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6 thumb">
            <a data-fancybox="gallery" href="путь_к_исходному_изображению">
                <img class="img-fluid" src="путь_к_уменьшенному_экземпляру_изображения" alt="...">
            </a>
        </div>
        ...
    </div>
</div>

<!-- jQuery -->
<script src="путь_до/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="путь_до/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="путь_до/bootstrap.min.js"></script>
<!-- fancyBox -->
<script src="путь_до/jquery.fancybox.min.js"></script>
</body>
</html>
Галерея изображений на базе сетки Bootstrap 4 Просмотр изображения галереи с помощью инструмента fancyBox

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

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

Создание галереи изображений подобной Pinterest

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

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

1. Загрузка и подключение к странице плагина gridify.js.

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

<!-- Подключение и инициализация gridify.js -->  
<script src="/examples/vendors/gridify/gridify.js"></script>
<script>
$(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);
});
</script>

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

<!-- Контейнер галереи изображений -->  
<div class="grid">
    <!-- Изображение -->
    <a data-fancybox="gallery" href="путь_к_исходному_изображению">
        <img class="img-fluid" src="путь_к_уменьшенной_копии_изображения" alt="">
    </a>
    <!-- Изображение -->
    <a data-fancybox="gallery" href="путь_к_исходному_изображению">
        <img class="img-fluid" src="путь_к_уменьшенной_копии_изображения" alt="">
    </a>
    ...
</div>

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

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Bootstrap 4 - Создание адаптивной галереи изображений с помощью gridify.js</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link href="путь_до/bootstrap.min.css" rel="stylesheet">
    <!-- fancyBox CSS -->
    <link href="путь_до/jquery.fancybox.min.css" rel="stylesheet">
    <style>
        img {
            padding: 4px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        img:hover {
            opacity: 0.6;
            filter: alpha(opacity=60);
        }
    </style>
</head>
<body>

<div class="container">
    <div class="grid">
        <a data-fancybox="gallery" href="путь_к_исходному_изображению">
            <img class="img-fluid" src="путь_к_уменьшенной_копии_изображения" alt="...">
        </a>
        <a data-fancybox="gallery" href="путь_к_исходному_изображению">
            <img class="img-fluid" src="путь_к_уменьшенной_копии_изображения" alt="">
        </a>
        ...
    </div>
</div>

<!-- jQuery -->
<script src="путь_до/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="путь_до/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="путь_до/bootstrap.min.js"></script>
<!-- fancyBox JS -->
<script src="путь_до/jquery.fancybox.min.js"></script>
<!-- Gridify JS -->
<script src="путь_до/gridify.js"></script>
<script>
$(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);
});
</script>
</body>
</html>
Галерея изображений как Pinterest Просмотр изображения галереи (как Pinterest) с помощью инструмента fancyBox

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

Демо галереи для Bootstrap 3

Пример галереи подобной Pinterest но на Mosiac Flow

Демо Mosaic Flow