На этом уроке мы рассмотрим процесс создания различных галерей изображений. В первом случае мы создадим галерею изображений на основе сетки 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>
    

    Просмотр изображений в галереи с помощью инструмента Fancybox

  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

Демо Скачать

Вторую адаптивную галерею изображений создадим на основе плагина 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>
    
  3. Для просмотра изображений в галереи будем использовать, как и в предыдущем примере, инструмент 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); 
    } 
    
  5. Итоговый код галереи изображений на основе плагина 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>