Bootstrap 3 – Создание галереи изображений

На этом уроке мы рассмотрим процесс создания различных галерей изображений. В первом случае мы создадим галерею изображений на основе сетки Twitter Bootstrap 3, а во 2 случае будем использовать плагин Mosaic Flow.

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

Создание адаптивной галереи изображений на основе сетки Twitter Bootstrap выполним в несколько этапов:

Создадим разметку, которая будет состоять из:

4 блоков для устройств, имеющих среднюю (md) и большую (lg) ширину экрана;
3 блоков для устройств, имеющих маленькую (sm) ширину экрана;
2 блоков для устройств, имеющих очень маленькую (xs) ширину экрана.

При создании разметки будем использовать классы col-xs-*, col-sm-* и col-md-*.

<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>

3. На этом этапе в каждый блок поместим изображение с помощью элемента <img>:

<img class="img-responsive" src="полное_имя_файла" />

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

<!-- подключение CSS файла Fancybox -->
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<!-- Подключение JS файла Fancybox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>

5. Для использования инструмента fancybox каждый элемент <img> необходимо обернуть с помощью элемента <a> и добавить к нему следующие атрибуты:

class="fancyimage" – класс, который будем использовать в качестве селектора для инициализации fancybox;
data-fancybox-group="group" – для группировки изображений, которые можно будет просматривать в окне fancybox с помощью стрелок назад и вперёд;
href="полное_имя_файла" – ссылка, хранящая полное имя изображения.

<a class="fancyimage" data-fancybox-group="group" href="полное_имя_файла"> 
  <img class="img-responsive" src="полное_имя_файла" /> 
</a>

6. Инициализация плагина fancybox для элементов <a> с class="fancyimage":

<script type="text/javascript"> 
  $(document).ready(function() { 
    $("a.fancyimage").fancybox(); 
  }); 
</script>

7. Добавим к элементам <div>, содержащих классы "col-md-3 col-sm-4 col-xs-6" дополнительный класс "thumb", который будем использовать, чтобы переопределить стандартные отступы bootstrap и задать стили к изображениям.

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

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Демо адаптивной галереи изображений</title> 
  <link href="bootstrap-3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
  <link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" /> 
  <style> 
    .thumb img { 
      filter: none; /* IE6-9 */ 
      -webkit-filter: grayscale(0); 
      border-radius:5px; 
      background-color: #fff; 
      border: 1px solid #ddd; 
      padding:5px; 
    } 
    .thumb img:hover { 
      filter: gray; /* IE6-9 */ 
      -webkit-filter: grayscale(1); 
    } 
    .thumb { 
      padding:5px; 
    } 
  </style> 
</head> 
<body> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-md-3 col-sm-4 col-xs-6 thumb"> 
        <a class="fancyimage" data-fancybox-group="group" href="полное_имя_файла"> 
          <img class="img-responsive" src="полное_имя_файла" /> 
        </a> 
      </div> 
      <div class="col-md-3 col-sm-4 col-xs-6 thumb"> 
        <a class="fancyimage" data-fancybox-group="group" href="полное_имя_файла"> 
          <img class="img-responsive" src="полное_имя_файла" /> 
        </a> 
      </div> 
      ...
    </div> 
  </div> 
  <script src="jquery/jquery-1.11.2.min.js"></script> 
  <script src="bootstrap-3.3.2/js/bootstrap.min.js"></script> 
  <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script> 
  <script type="text/javascript"> 
    $(document).ready(function() { 
      $("a.fancyimage").fancybox(); 
    }); 
  </script> 
</body> 
</html>

Вторую адаптивную галерею изображений создадим на основе плагина Mosaic Flow. Работа данного плагина основывается на создании сетки изображений в стиле Pinterest.

Рассмотрим процесс создания данной галереи в несколько этапов:

Скачаем плагин с официальной страницы проекта и подключим его к веб-странице. Стоит обратить внимание на то, что для своей работы плагин Mosaic Flow требует наличие подключенной библиотеки jQuery.

<!-- Подключение библиотеки jQuery -->
<script src="jquery/jquery-1.11.2.min.js"></script> 
<!-- Подключение JS файла Mosaic Flow -->
<script src="jmosaicflow/jquery.mosaicflow.min.js"></script>

2. Создадим разметку, состоящую из:

глобального контейнера (<div class="clearfix mosaicflow">...</div>), который предназначен для оборачивания остального HTML кода галереи изображений;
контейнеров (<div class="mosaicflow__item">...</div>), которые предназначены для оборачивания изображений (<img>) галереи.

<div class="clearfix mosaicflow"> 
  <div class="mosaicflow__item"> 
    <img src="полное_имя_файла" /></a> 
  </div> 
  <div class="mosaicflow__item"> 
    <img src="полное_имя_файла" /></a> 
  </div> 
  ...
</div>

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

данный инструмент подключить к нашей веб-странице:

<!-- подключение CSS файла Fancybox -->
<link rel="stylesheet" href="fancybox/jquery.fancybox.css"
  type="text/css" media="screen" />
<!-- Подключение JS файла Fancybox -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>

обернуть с помощью элемента <a> каждый элемент <img> и добавить соответствующие атрибуты:

<a class="fancyimage" data-fancybox-group="group" href="полное_имя_файла">
  <img src="полное_имя_файла" />
</a>

инициализировать плагин fancybox для элементов <a>, имеющих класс, заданный в предыдущем пункте:

<script type="text/javascript"> 
  $(document).ready(function() { 
    $("a.fancyimage").fancybox(); 
  }); 
</script>

4. Добавим стили CSS необходимые для правильной работы плагина Mosaic Flow, а также для более красивого оформления галереи изображений и создания дополнительного эффекта при наведении курсора на отдельный фрагмент.

.mosaicflow__item { 
  padding:3px; 
} 
.mosaicflow__column { 
  float:left; 
} 
.mosaicflow__item img { 
  display:block; 
  width:100%; 
  height:auto; 
  padding: 4px; 
  background-color: #fff; 
  border: 1px solid #ddd; 
  border-radius: 4px; 
} 
.mosaicflow__item img:hover { 
  opacity: 0.6; 
  filter: alpha(opacity=60); 
}

Итоговый код галереи изображений на основе плагина Mosaic Flow:

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Демо галереи изображений на основе Mosaic Flow</title> 
  <link href="bootstrap-3.3.2/css/bootstrap.min.css" rel="stylesheet"> 
  <link rel="stylesheet" href="fancybox/jquery.fancybox.css"
    type="text/css" media="screen" /> 
  <style> 
    .mosaicflow__item { 
      padding:3px; 
    } 
    .mosaicflow__column { 
      float:left; 
    } 
    .mosaicflow__item img { 
      display:block; 
      width:100%; 
      height:auto; 
      padding: 4px; 
      background-color: #fff; 
      border: 1px solid #ddd; 
      border-radius: 4px; 
    } 
    .mosaicflow__item img:hover { 
      opacity: 0.6; 
      filter: alpha(opacity=60); 
    } 
  </style> 
</head> 
<body> 
  <div class="container"> 
    <div class="clearfix mosaicflow">  
      <div class="mosaicflow__item"> 
        <a class="fancyimage" data-fancybox-group="group" href="полное_имя_файла">
          <img src="полное_имя_файла" />
        </a> 
      </div> 
      <div class="mosaicflow__item"> 
        <a class="fancyimage" data-fancybox-group="group" href="полное_имя_файла">
          <img src="полное_имя_файла" />
        </a> 
      </div> 
      ...
    </div> 
  </div> 
  <script src="jquery/jquery-1.11.2.min.js"></script> 
  <script src="bootstrap-3.3.2/js/bootstrap.min.js"></script> 
  <script src="jmosaicflow/jquery.mosaicflow.min.js"></script> 
  <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script> 
  <script type="text/javascript"> 
    $(document).ready(function() { 
      $("a.fancyimage").fancybox(); 
    }); 
  </script> 
</body> 
</html>

Bootstrap 3 – Создание галереи изображений

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

Галерея изображений на основе плагина Mosaic Flow