Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная Инструкции Bootstrap Bootstrap 3 – Создание галереи изображений

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

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

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

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

  1. Создадим разметку, которая будет состоять из:
    • 4 блоков для устройств, имеющих среднюю (md) и большую (lg) ширину экрана;
    • 3 блоков для устройств, имеющих маленькую (sm) ширину экрана;
    • 2 блоков для устройств, имеющих очень маленькую (xs) ширину экрана.
  2. При создании разметки будем использовать классы 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.

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

  1. Скачаем плагин с официальной страницы проекта и подключим его к веб-странице. Стоит обратить внимание на то, что для своей работы плагин 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>