Bootstrap 3 - Компонент Thumbnails (Миниатюры)

Статья, в которой описывается компонент Thumbnails платформы Twitter Bootstrap 3.

Компонент Thumbnails предназначен для создания различных галерей на основе сетки Bootstrap 3. В качестве объектов галереи могут использоваться изображения, видео, текстовые блоки или др.

Создание галереи Thumbnails всегда начинается с каркаса, который разрабатывается с помощью блоков div и классов системы сеток платформы Twitter Bootstrap 3. После этого переходят к размещению необходимых блоков информации в ячейках этой сетки и добавление класса thumbnail.

По сути данный компонент просто расширяет возможности данной сетки, позволяя её использовать для представления изображений, видео, текстовых блоков и другой информации.
Внимание: Платформа Twitter Bootstrap 3 не позволяет создавать галереи подобные Pinterest, из-за того что не содержит готовых плагинов. Эти галереи отличаются от обычных тем, что их миниатюры имеют различную высоту и (или) ширину. Чтобы создать галерею подобную Pinterest необходимо воспользоваться сторонними плагинами, такими как Masonry, Isotope, или Salvattore.

Например, создадим галерею Thumbnails, состоящую из 12 изображений (на lg-устройствах - 4x3, на md-устроствах – 3x4, на sm-устройствах – 2x6, на xs-устройствах – 1x12).

<div class="row">
  
  <!-- 1 Изображение -->
  <div class="col-sm-6 col-md-4 col-lg-3"> 
    <a href="#" class="thumbnail">
       <img src="..." alt="...">
    </a>
  </div>
  
  <!--...-->
  
  <!-- 12 Изображение -->
  <div class="col-sm-6 col-md-4 col-lg-3"> 
    <a href="#" class="thumbnail">
       <img src="..." alt="...">
    </a>
  </div>
  
</div>

Bootstrap 3 - Галерея Thumbnails, состоящая из изображений

Демо галереи Thumbnails

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

<!-- Добавьте модальное окно после открывающего тега body-->
<div class="modal fade" id="image-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="modal-title">Просмотр изображения</div>
      </div>
      <div class="modal-body">
        <img class="img-responsive center-block" src="" alt="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

<!-- Блок кода, содержащий галерею Thumbnails -->

<!-- Добавьте следущий сценарий перед закрывающим тегом body -->
<script>
// После загрузки DOM-дерева (страницы)
$(function() {     
  //при нажатии на ссылку, содержащую Thumbnail
  $('a.thumbnail').click(function(e) {
    //отменить стандартное действие браузера
    e.preventDefault();
    //присвоить атрибуту scr элемента img модального окна
    //значение атрибута scr изображения, которое обёрнуто
    //вокруг элемента a, на который нажал пользователь
    $('#image-modal .modal-body img').attr('src', $(this).find('img').attr('src'));
    //открыть модальное окно
    $("#image-modal").modal('show');
  });
  //при нажатию на изображение внутри модального окна 
  //закрыть его (модальное окно)
  $('#image-modal .modal-body img').on('click', function() {
    $("#image-modal").modal('hide')
  });
});
</script>

Bootstrap 3 - Галерея Thumbnails (картинка в модальном окне)

Демо галереи Thumbnails+

В миниатюры Thumbnails, используя дополнительную разметку, можно добавлять различные виды HTML-контента, такого как заголовки (элементы h1-h6), параграфы (элементы p) и кнопки.

<div class="row">
  
  <!-- 1 Изображение -->
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Заголовок...</h3>
        <p>Контент...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  
  <!--...-->
  
  <!-- 12 Изображение -->
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Заголовок...</h3>
        <p>Контент...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
  
</div>

Bootstrap 3 - Галерея Thumbnails, миниатюры которой содержат дополнительный контент

Демо галереи Thumbnails 2



   Bootstrap 0    8651 0

Комментарии (14)

  1. Sergey # 0
    Скажите, а как сделать миниатюру не квадратную, а прямоугольную, например?
    1. Александр Мальцев # 0
      В зависимости от ситуации. Можно например, с помощью классов сетки или свойства height. Т.е. изменяя ширину или высоту.
    2. Игорь # 0
      Каким образом в последнем примере кнопки разместить cнизу блока, если например текста в соседних блоках разное количество?
      1. Александр Мальцев # 0
        Вынести его за содержимое блока thumbnail:
        <!-- 1 Изображение -->
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <img src="..." alt="...">
            <div class="caption">
              <h3>Заголовок...</h3>
              <p>Контент...</p>
            </div>
          </div>
          <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
        </div>
        
        1. Игорь # 0
          Немного неправильно сказал. Разместить снизу блока, но выше нижней границы.
          1. Александр Мальцев # 0
            Игорь, лучше бы Вы картинку привели. А то они и так располагаются выше нижней границы.
      2. Дмитрий # 0
        Подскажите, а можно ли сделать в третьем примере открытие картинки в модальном окне как во втором примере?
        1. Дмитрий # 0
          Спасибо, уже разобрался
        2. Павел # 0
          Скажите, а как в модальном окне можно вывести дополнительное описание и вывести что-то вроде формы обратной связи. Я так понимаю -через js надо как- прописывать?
          1. Александр Мальцев # 0
            Если динамически, то через js. Сведения об изображениях можно передавать сразу со страницей или через AJAX. А потом при нажатии на изображение или кнопку, связанную с ним, подставлять в код модального окна дополнительное описание и открывать его.
          2. Павел # 0
            А как добавлять содержимое
            <div class="caption">
                  <h3>Заголовок...</h3>
                  <p>Контент...</p>
                </div> 
            в модальное окно. Через clone() добавляет caption от всех блоков с картинками.
            1. Павел # 0
              еще так пробовал
              $('#image-modal h4').html($(".caption h3").html());
              теперь выводит содержимое первого элемента во всех окнах
              1. Александр Мальцев # 0
                Подобная задача рассматривалась в этом комментарии:
                itchief.ru/lessons/bootstrap-3/bootstrap-3-modal-window#comment-2272
                Не хочется повторяться :)
              2. Павел # 0
                спасибо. Помогло))

                Вы должны авторизоваться, чтобы оставлять комментарии.