Bootstrap 3: фото-галерея

Создадим галерею 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>

Далее.

!-- Добавьте модальное окно после открывающего тега 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>