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>
    

    Просмотр изображений в галереи с помощью инструмента 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>
    


   Bootstrap 1    35967 +1

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

  1. romasa # 0
    Cпасибо Вам большое!!!
    1. romasa # 0
      А как можно создать слайдер
      Который на фото выводит точки и при клике на них раскрывается содержимое
      joxi.ru/xAeGKGGCZQPgmy
      1. Александр Мальцев # 0
        Для решения этой задачи необходимо выполнить следующее:
        Создать для необходимых картинок карту изображений, используя тег map. Внутри тега map создать активные области с помощью элемента area. Для тега area создать ссылки, при нажатии на которые пользователь будет переходить по определённому адресу или используйте JavaScript для выполнения каких-то других действий. Если необходимо подсвечивать области (плюсики) при наведении, то можно воспользоваться библиотекой от David Lynch, которую можно скачать по ссылке.
        Если изображения должны быть адаптивными, то Вам необходимо создать адаптивную карту. Для этого необходимо будет воспользоваться каким-то плагином, который будет пересчитывать координаты area. Например, можно воспользоваться плагином «Responsive Image Maps jQuery Plugin», который можно скачать по этой ссылке.

        Также в зависимости от поставленной задачи можно решить данную задачу и другими способами. Например, при помощи слоёв (изображение на одном слое, активные элементы на другом) или при помощи background и position (картинку на заднем фоне, а активные элементы на переднем фоне).
      2. timur # 0
        изображения открываются в новом окне… что делать?
        1. Александр Мальцев # 0
          Добрый день, Тимур!
          Вам необходимо проверить все ли скрипты на странице загружены.
          Самый простой способ это сделать — нажать в браузере клавишу F12 и посмотреть ошибки.
        2. Егор # 0
          Здравствуйте, все хорошо, только вам надо исправить этот код. Код получается невалидным из-за
          rel="group"
          , такого атрибута нет у тега
          <a>
          . Вместо него поставьте
          rel="next"
          и все будет работать и валидатор будет доволен. В скриптах ничего править не надо. Все работает, проверял.
          1. Александр Мальцев # 0
            Спасибо за замечание, Егор.

            Но тогда лучше атрибут rel вообще удалить и вместо него использовать атрибут data-*:
            data-fancybox-group="group"
          2. Егор # 0
            Да, это не замечание, просто столкнулся с надобностью такой галереи. А по мне так Mosaic Flow больше нравится.
            1. Роман # 0
              А как добавить подпись к фотографии? Когда она в увеличенном виде?

              Спасибо.
              1. Александр Мальцев # 0
                Добрый день!
                1. Необходимо добавить к ссылкам атрибут title=«Подпись к фотографии»
                <a class="fancyimage" rel="group" title="Подпись к фотографии" href="bootstrap3-image-gallery-600-400/001.jpg"> 
                  <img class="img-responsive" src="bootstrap3-image-gallery-600-400/001.jpg" /> 
                </a>
                
                2. При необходимо настроить расположение надписи в javascript:
                $(document).ready(function() { 
                  $("a.fancyimage").fancybox({
                    helpers:  {
                      title : {
                        type : 'over'  // 'float', 'inside', 'outside' or 'over'
                      }
                    }
                  }); 
                }); 
                
                1. Роман # 0
                  Спасибо!
              2. Артур # 0
                Появляется ошибка Uncaught TypeError: undefined is not a function на инициализации
                <script type="text/javascript"> 
                  $(document).ready(function() { 
                    $("a.fancyimage").fancybox(); 
                  }); 
                </script>
                . Все подключил, проверил. В чем может быть причина? Использую шаблон T3 blank Bootsrap 3
                1. Артур # 0
                  Спасибо, методом тыка разобрался. Инициализацию функции в этом шаблоне на Joomla 3 необходимо производить с помощью кода
                  <script type="text/javascript"> 
                  jQuery(document).ready(function(){jQuery("a.fancyimage").fancybox();});
                  </script>
                  1. Игорь # 0
                    А у меня другая ошибка: jQuery(...).tooltip is not a function
                    1. Александр Мальцев # 0
                      Не подключен bootstrap.js.
                2. Ник # 0
                  Просто — супер! Отличный сайт!
                  )
                  Было б не плохо, если разработчики модальный просмотр галерей вшили во фреймворк изначально. Чтоб не лепить сторонние решения…
                  1. Андрей # 0
                    Здравствуйте.
                    Поставил скрипт, но он, к сожалению, не работает. Браузер пишет мне следующее:
                    Uncaught TypeError: $(...).fancybox is not a function
                    Что с этим можно сделать, подскажите, пожалуйста?
                    Ничего не менял, пробовал всё так, как написано в первом примере: «Галерея изображений на основе сетки Twitter Bootstrap 3».
                    1. Александр Мальцев # 0
                      Здравствуйте, Андрей.
                      У Вас не подключена библиотека jQuery.
                      Её можно подключить с помощью CDN:
                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                      
                      Посмотреть какие у Вас библиотеки на странице не загружены можно в консоли браузера с помощью клавиши F12.
                      1. Игорь # 0
                        А где именно в шаблоне Joomla 3 это нужно прописать? Я так понимаю в index.php, но вот где именно?
                        1. Александр Мальцев # 0
                          В разделе head или лучше перед тем где используется другие библиотеки или скрипты, зависящие от него.
                    2. Larissa # 0
                      Добрый день.
                      Пытаюсь сделать галерею на основе плагина Mosaic Flow.
                      Галерея работает. Фото размещаются автоматически (это очень удобно).
                      НО если необходимо изменить кол-во фото в строке — как это сделать?
                      ((( у меня элементарно «разбежалась» шапка сайта (она сделана из двух частей. Статическая и динамическая) и есть сдвиг всего экрана (((
                      А галерея очень понравилась.

                      1. Larissa # 0
                        )))) пришлось отказаться от «меню» с левой стороны сайта.
                        Сделала верхнее (ниспадающее в отдельных частях).
                        Все работает ))))
                        1. Александр Мальцев # 0
                          Добрый день.
                          Настройка ширины осуществляется с помощью data-атрибута data-min-item-width. По умолчанию данный атрибут имеет значение 240. Если Вы хотите больше столбцов, то уменьшайте это значение. А если Вы хотите меньше столбцов, то увеличивайте данное значение.
                          <div class="clearfix mosaicflow" data-min-item-width="350"> 
                          <!--...-->
                          
                          1. Сергей Петрович # 0
                            а что сделать, чтоб после плагина Mosaic Flow, слайды fancybox-а последовательно по горизонтали показывали, а не так как здесь ?
                            целый день не смог разобраться.
                            1. Александр Мальцев # 0
                              Например, использовать карусель OWL Carousel.
                              1. Сергей Петрович # 0
                                это совсем не то решение.
                                надо чтоб fancybox показывал в таком порядке рисунки.
                                1. Александр Мальцев # 0
                                  fancybox не будет показывать рисунки в таком порядке. Это происходит из-за того, что после применения плагина mosaiс flow изменяется разметка блока с изображениями, изображения выстраиваются (т.е. вкладываются) в вертикальные колонки (блоки).
                                  Плагин fancybox в этом случае будет сначала проходит по картинкам внутри первого блока (т.е. 1->5->9), потом по картинкам находящимся внутри 2 блока (т.е. 2->6->10). Т.е. цепочка будет такая 1->5->9->2->6->10->3->7->11 и т.д.
                                  Плагин fancybox не имеет встроенных средств, с помощью которых можно было организовать порядок так как Вы хотите… Он сменяет изображения в соответствии с тем как они расположены в коде. А в этом случае (ещё раз повторюсь) порядок следования элементов меняется после того, как мы применили плагин mosaic flow (изменяется разметка и появляются дополнительные блоки, которые группируют изображения по вертикали).

                                  Выходом из этой ситуации может использование плагина, аналогичного fancybox, но имеющего встроенные средства для ручной сортировки.
                                  Или, написание своего просмотрщика изображений с использованием модального окна Bootstrap.
                        2. Сергей # 0
                          Спасибо! Воспользовался галереей на основе сетки Twitter Bootstrap 3 — все работает.
                          1. Игорь # 0
                            Здравствуйте!
                            Подскажите пожалуйста, в чем может быть причина:

                            Подключаю fancybox, как и остальные скрипты, с помощью функции:
                            <script>var scr = {"scripts":[
                            	{"src" : "libs/modernizr/modernizr.js", "async" : false},
                            	{"src" : "libs/jquery.fancybox-1.3.4/jquery.fancybox-1.3.4.pack.js", "async" : false},
                            	{"src" : "libs/jquery/jquery-1.11.2.min.js", "async" : false},
                            	{"src" : "libs/bootstrap/js/bootstrap.min.js", "async" : false},
                            	{"src" : "libs/plugins-scroll/plugins-scroll.js", "async" : false},
                            	{"src" : "js/common.js", "async" : false}
                            	
                            	]};!function(t,n,r){"use strict";var c=function(t){if("[object Array]"!==Object.prototype.toString.call(t))return!1;for(var r=0;r<t.length;r++){var c=n.createElement("script"),e=t[r];c.src=e.src,c.async=e.async,n.body.appendChild©}return!0};t.addEventListener?t.addEventListener("load",function(){c(r.scripts);},!1):t.attachEvent?t.attachEvent("onload",function(){c(r.scripts)}):t.onload=function(){c(r.scripts)}}(window,document,scr);
                            </script>
                            
                            CSS для него следующим образом:
                            var ms=document.createElement("link");ms.rel="stylesheet";
                            	ms.href="libs/jquery.fancybox-1.3.4/jquery.fancybox-1.3.4.css";document.getElementsByTagName("head")[0].appendChild(ms);
                            
                            Добавляю в head (хотя надо бы в common.js, но ошибка и так и так)
                            <script type="text/javascript">
                            		$(document).ready(function() {
                            			$("a.fancyimage").fancybox();
                            			});
                            		</script>
                            
                            Код для вывода картинок:
                            <a class="fancyimage" data-fancybox-group="group" href="img/blag/2.jpg"> 
                              	<img class="img-responsive" src="img/blag/2.jpg" />
                            </a>
                            
                            В итоге все совсем плохо — yadi.sk/i/gcBLDSNLj73sF (скрин).

                            Не могу сообразить, возможно что то конфликтует. В каких моментах я не прав?
                            Заранее, большое спасибо за внимание к проблеме, спросить больше негде
                            1. Игорь # 0
                              Добавлю:

                              Меняю местами очередность подключения
                              {"src" : "libs/jquery/jquery-1.11.2.min.js", "async" : false},
                              {"src" : "libs/jquery.fancybox-1.3.4/jquery.fancybox-1.3.4.pack.js", "async" : false},
                              
                              Ошибки пропадают, появляется: TypeError: b.browser is undefined.

                              В Опера и IE картинки открываются в том же окне (не модально).
                              в FF открывается модально, но отсутствуют элементы управления (назад, вперед, закрыть).

                              В общем, совсем запутался
                              1. Александр Мальцев # 0
                                Привет, у тебя библиотеки js добавляются перед закрывающим тегом body, т.е. в конец body судя по твоей функции.

                                А вот с файлом CSS fancybox не совсем понятно, когда у тебя вызывается скрипт, который его добавляет? Т.е. в какой момент он у тебя добавляется в конец элемента head? Проверьте этот момент.

                                Скрипт, с помощью которого Вы инициализируете fancyimage необходимо выполнять после загрузки библиотек, а не в head. Чтобы не было конфликтов замените $ на jQuery:
                                <script type="text/javascript">
                                  jQuery(document).ready(function() {
                                    jQuery("a.fancyimage").fancybox();
                                  });
                                </script>
                                
                                Ну и конечно библиотека fancybox должна вызываться после библиотеки jQuery, т.к. он (fancybox) её (jQuery) использует.
                            2. Егор # 0
                              Здравствуйте. Нашел галерею, на мой взгляд лучше, чем fancybox, в настройках скрипта разобрался, но там скроллбар показывается только после клика на картинку, а желательно появление стрелок навигации сразу после открытия лайтбокса. Никак не могу сообразить.
                              Извините, не могли бы вы посмотреть? Для вас, уверен, это дело 5-ти минут.
                              Если что вот галерея: Lightbox image gallery — третяя сверху.

                              blueimp.github.io/Gallery/

                              Я ссылку без http:// поставил.
                              1. Александр Мальцев # 0
                                Привет, Егор!

                                Нужного параметра для управления видимостью кнопок управления галереи bluimp не нашёл.

                                Предлагаю такое решения

                                1. Добавить класс blueimp-gallery-controls, отвечающий за отображение кнопок управления
                                <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
                                    <div class="slides"></div>
                                    <h3 class="title"></h3>
                                    <a class="prev">‹</a>
                                    <a class="next">›</a>
                                    <a class="close">×</a>
                                    <a class="play-pause"></a>
                                    <ol class="indicator"></ol>
                                </div>
                                
                                2. Ну и убрать его в параметрах (controlsClass: ''), чтобы он не переключался:
                                <script>
                                  document.getElementById('links').onclick = function (event) {
                                    event = event || window.event;
                                    var target = event.target || event.srcElement,
                                        link = target.src ? target.parentNode : target,
                                        options = {index: link, event: event, controlsClass: ''},
                                        links = this.getElementsByTagName('a');
                                    blueimp.Gallery(links, options);
                                  };
                                </script>
                                
                              2. Егор # 0
                                Да, нет такой настройки в скрипте, в том то и дело. Я с первого раза и не понял, что галерея переключается с одной картинки на другую. Так-же и другие могут не понять.
                                Все сделал как у вас — работает. А так вроде норм. галерея.
                                Спасибо большое.
                                1. Lidia # 0
                                  Все супер!
                                  Но при нажатии на картинку — модальное окно подпрыгивает вверх.(((
                                  Как исправить?
                                  1. Александр Мальцев # 0
                                    Проверить стили CSS.
                                  2. Алексей # 0
                                    Здравствуйте.
                                    Подключил, все работает.
                                    Но, вот такой вопрос, как сделать чтоб во время перелистывания, картинка оставалась на месте, а не дергалась в сторону, как здесь fancybox.net/ (третий пример)?
                                    Спасибо!
                                    1. Александр Мальцев # 0
                                      Здравствуйте.
                                      В этой статье используется fancyBox 2, а по приведённой в Вашем комментарии ссылке fancyBox1.

                                      Чтобы это сделать в fancyBox 2 достаточно изменить скрипт, т.е. добавить параметры:
                                      <script type="text/javascript"> 
                                        $(document).ready(function() { 
                                          $("a.fancyimage").fancybox({
                                            prevEffect: 'none',
                                            nextEffect: 'none'
                                          }); 
                                        }); 
                                      </script> 
                                      
                                    2. Алексей # 0
                                      Еще интересует, как добавить нумерацию слайдов, но не вручную из title, а автоматически?
                                      1. Александр Мальцев # 0
                                        Можно сделать следующим образом:

                                        <script> 
                                          $(document).ready(function() { 
                                            $("a.fancyimage").fancybox({
                                              prevEffect: 'none',
                                              nextEffect: 'none',
                                              title : {
                                                type : 'float' // 'float', 'inside', 'outside' or 'over'
                                              },
                                              beforeShow : function() {
                                                this.title = 'Изображение ' + (this.index + 1) + ' из ' + this.group.length;
                                              }
                                            }); 
                                          });
                                        </script> 
                                        
                                      2. Юлия # 0
                                        Добрый день!
                                        подскажите, как сделать галерею такого типа?
                                        pp.vk.me/c622230/v622230581/4dea5/1RG9-MHTzgQ.jpg
                                        или может подскажете другой плагин?.. спасибо!
                                        1. Александр Мальцев # 0
                                          Добрый день, Юлия!
                                          Если Вам нужна такая сетка, то её можно создать с помощью Twitter Bootstrap таким образом:
                                          <div class="container-fluid">
                                            <div class="row"> 
                                              <div class="col-xs-3">
                                                <img src="" alt=""> 
                                              </div>
                                              <div class="col-xs-3">
                                                <img src="" alt=""> 
                                              </div>
                                              <div class="col-xs-3">
                                                <img src="" alt="">  
                                              </div>
                                              <div class="col-xs-3">
                                                <img src="" alt=""> 
                                              </div>
                                            </div>
                                            <div class="row"> 
                                              <div class="col-xs-6">
                                                <div class="row"> 
                                                  <div class="col-xs-12">
                                                    <img src="" alt=""> 
                                                  </div>
                                                  <div class="col-xs-6">
                                                    <img src="" alt=""> 
                                                  </div>
                                                  <div class="col-xs-6">
                                                    <img src="" alt=""> 
                                                  </div>
                                                </div>  
                                              </div>
                                              <div class="col-xs-3">
                                                <img src="" alt=""> 
                                              </div>
                                              <div class="col-xs-3">
                                                <div class="row"> 
                                                  <div class="col-xs-12">
                                                    <img src="" alt=""> 
                                                  </div>
                                                  <div class="col-xs-12">
                                                    <img src="" alt=""> 
                                                  </div>
                                                </div> 
                                              </div>
                                            </div>
                                          </div>
                                          
                                          Далее Вам необходимо рассчитывать или подбирать изображения, чтобы она выглядела следующим образом.
                                          1. Юлия # 0
                                            добрый день, Александр! Спасибо за вариант решения. Через bootstrap пробовала с самого начала. Как результат — расползаются «плитки» после вертикальной картинки. В вашем варианте у меня почему-то тоже после вертикального блока остальные плитки также «живут своей жизнью»…
                                            Пока ждала от вас решения или идеи — переделала Mosaic. Поставила все на свои места. Спасибо за замечательный урок! Для новичка он бесценен! :)
                                        2. Алексей # 0
                                          Спасибо большое Александр! Все подключил — то, что нужно)))
                                          1. Николай # 0
                                            Огромная благодарность! Великолепный сайт, есть все что нужно.
                                            1. Сергей Петрович # 0
                                              Галерея изображений на основе плагина Mosaic Flow

                                              как сделать так чтобы галерея fancybox-a прокручивалась после этого горизонтально а не вертикально?
                                              1. Александр Мальцев # 0
                                                Использовать любой плагин карусели.
                                                Например OWL Carousel.
                                              2. Евгений # 0
                                                Здравствуйте как сделать галерею изображени такого типа Test Folder 1 но чтобы маленькие картинки выводились в низу?
                                                1. Евгений # 0
                                                  про меня забыли?
                                                  1. Александр Мальцев # 0
                                                    Да, действительно забыл.
                                                    Можно, например, начать делать так:

                                                    <div class="container-fluid"> 
                                                      <div class="row">
                                                        <!-- Изображение -->
                                                        <div class="col-xs-12" style="margin-bottom: 20px;">
                                                          <img id="preview" class="img-responsive img-rounded center-block " src="img/image01.jpg">
                                                        </div>
                                                      </div>
                                                      <div id="thumb" class="row"> 
                                                        <!-- Миниатюры изображений -->
                                                        <div class="col-md-2 col-sm-3 col-xs-4"> 
                                                          <img class="img-responsive img-thumbnail" src="img/image01.jpg"> 
                                                        </div> 
                                                        <div class="col-md-2 col-sm-3 col-xs-4"> 
                                                          <img class="img-responsive img-thumbnail" src="img/image02.jpg"> 
                                                        </div> 
                                                        <!--...-->
                                                      </div> 
                                                    </div> 
                                                    
                                                    CSS:
                                                    #thumb>div {
                                                      padding-left: 3px;
                                                      padding-right: 3px;
                                                    }
                                                    img:hover {
                                                      cursor: pointer;
                                                    }
                                                    /* изменяем рамку активного изображения */
                                                    img.active {
                                                      border: 1px solid #000;
                                                    }
                                                    
                                                    JavaScript:
                                                    //при нажатии на миниатюру
                                                    $('#thumb img').click(function(){
                                                      //удаляем класс active с другой миниатюры
                                                      $('#thumb img').removeClass("active");
                                                      //добавляем класс active к миниатюре на которую мы нажали
                                                      $(this).addClass("active");
                                                      //получаем у неё значение атрибута src и присваиваем его атрибуту src с id="preview"
                                                      $("#preview").attr("src",$(this).attr("src"));
                                                    });
                                                    
                                                    1. droidjony # 0
                                                      Спасибо!
                                                      1. Евгений # 0
                                                        подскажите пожалуйста, как мне добавить стрелочки перелистывания где распологаются маленькие картинки в галерее если кртинок много
                                                        1. Александр Мальцев # 0
                                                          Добавить кнопки:
                                                          <button id="left"><-</button>
                                                          <button id="right">-></button>
                                                          
                                                          Добавить скрипт (например, с помощью скрытия и отображения элементов).
                                                          Код JavaScript:
                                                          $(function(){
                                                          function thumb() {
                                                            $('#thumb img:first').addClass("active");
                                                            var images = [];
                                                            var countImages = $('#thumb img').length-1;
                                                            var countShow = 3;
                                                            var windowWidth = window.innerWidth;
                                                            if (windowWidth>=768 && windowWidth<992) {
                                                              countShow = 4;
                                                            } else if (window.innerWidth >= 992 && windowWidth<1200) {
                                                              countShow = 6;
                                                            } else if (window.innerWidth >= 1200) {
                                                              countShow = 6;
                                                            }
                                                            console.log(countImages);
                                                            $("#thumb img").each(function( index ) {
                                                              $(this).data('index',index);
                                                              if ($(this).data('index') >= countShow) {
                                                                $(this).hide();
                                                              }
                                                              images[index] = this;
                                                            });
                                                            $('#left,#right').click(function(event){
                                                              event.stopPropagation();
                                                              if ($(this).attr('id')=='left') {
                                                                var currentIndex = $("#thumb img.active").data('index');
                                                                if (currentIndex > 0) {
                                                                  $("#thumb img.active").removeClass('active');
                                                                  $(images[currentIndex-1]).addClass('active');    
                                                                  $("#preview").attr("src",$(images[currentIndex-1]).attr("src"));
                                                                  var firstVisible = $('#thumb img:visible').filter(':first').data('index');
                                                                  var currentVisible = $('#thumb img.active').data('index');
                                                                  if (firstVisible==currentVisible) {
                                                                    if (firstVisible<=0) {return;}
                                                                    $('#thumb img:visible').filter(':last').parent().hide();
                                                                    $(images[currentVisible-1]).parent().show();    
                                                                    $(images[currentVisible-1]).show();
                                                                  }    
                                                                }
                                                              }
                                                              if ($(this).attr('id')=='right') {
                                                                var currentIndex = $("#thumb img.active").data('index');
                                                                if (currentIndex < countImages) {
                                                                  $("#thumb img.active").removeClass('active');
                                                                  $(images[currentIndex+1]).addClass('active');    
                                                                  $("#preview").attr("src",$(images[currentIndex+1]).attr("src"));
                                                                  var lastVisible = $('#thumb img:visible').filter(':last').data('index');
                                                                  var currentVisible = $('#thumb img.active').data('index');
                                                                  if (lastVisible==currentVisible) {
                                                                    if (lastVisible>=countImages) {return;}
                                                                    $('#thumb img:visible').filter(':first').parent().hide();
                                                                    $(images[currentVisible+1]).parent().show();    
                                                                    $(images[currentVisible+1]).show();
                                                                  }
                                                                }
                                                              }
                                                            });
                                                          
                                                            //при нажатии на миниатюру
                                                            $('#thumb img').click(function(){
                                                              //удаляем класс active с другой миниатюры
                                                              $('#thumb img').removeClass("active");
                                                              //добавляем класс active к миниатюре на которую мы нажали
                                                              $(this).addClass("active");
                                                              var firstVisible = $('#thumb img:visible').filter(':first').data('index');
                                                              var currentVisible = $('#thumb img.active').data('index');
                                                              //получаем у неё значение атрибута src и присваиваем его атрибуту src с id="preview"
                                                              $("#preview").attr("src",$(this).attr("src"));    
                                                              if (firstVisible==currentVisible) {
                                                                if (firstVisible<=0) {return;}
                                                                $('#thumb img:visible').filter(':last').parent().hide();
                                                                $(images[currentVisible-1]).parent().show();    
                                                                $(images[currentVisible-1]).fadeIn('1000');
                                                              }    
                                                              var lastVisible = $('#thumb img:visible').filter(':last').data('index');
                                                              var currentVisible = $('#thumb img.active').data('index');
                                                              if (lastVisible==currentVisible) {
                                                                if (lastVisible>=countImages) {return;}
                                                                $('#thumb img:visible').filter(':first').parent().hide();
                                                                $(images[currentVisible+1]).parent().show();    
                                                                $(images[currentVisible+1]).fadeIn('1000');
                                                              }
                                                            });
                                                          };
                                                          thumb();
                                                          });
                                                          

                                                          Конечно это начальный набросок :) При желании его можно структурировать с помощью функций.
                                                          1. Сергей # 0
                                                            Привет! А куда эти кнопки размещать что бы миниатюры прокручивались и можно ли сделать что бы на большой фотке тоже прокрутка была и как надписи добавить под фотами с описанием не большим? Спасибо за ответ!!!
                                                            1. Александр Мальцев # 0
                                                              Привет! С помощью CSS в любое необходимое место. Их (кнопки) можно сделать картинками или в формате шрифта, т.е. как угодно. Насчёт дальнейшего развития не знаю насколько это актуально и нужно ли вообще это делать, т.к. различных готовых галерей много и из них можно выбрать что-то по своему вкусу. Если необходимо именна эта галерея, то напиши добавлю.
                                                              1. Сергей # 0
                                                                Да, интересная галерея на сайт идеально встало, было бы круто если бы стрелки обтекали большое фото с лева и право и ими можно было было листать фотки. А ещё хотел спросить как лайки там привязать к каждому фото, может ссылка есть где уже обсуждали это. Но это второй вопрос)) СпасибО!!!
                                                2. Сирожка # 0
                                                  После включения галереи / первый пример / контейнер сползает вправо пикселей на 10 где то…
                                                  Когда выклюается галерея все наза возвращается. Ошибок конечно на страничке нет вообще.
                                                  — То есть, галерея внедряется в твиттер бутсрап собна и такое вот происходит. Лазить и искать неохота из за чего это происходит, может втор нает и сталкивался…

                                                  Кстати, у кого не работает галерея и одна и вторая, а именно просто совершается переход по ссылке на сам оригинал картинки. То тут происхдит следующее:

                                                  Тут тема о твиттер бустрап, и конечно у всех УЖЕ подключен аякс, если коротко — надо оего отключать именно для той страницы где находится галерея, видно скрипт свой аякс использует где то далее…

                                                  Или, надо ковырять саму галерею и искать где там внутри покдлючение и выключит подключения аякса!
                                                  1. Сирожка # 0
                                                    … не, автор извини… косяк со смещенимем у меня кажись!
                                                    1. Виктор # 0
                                                      Спасибо за статью, подскажите пожалуйста, у меня на мобильном телефоне все фотографии в одну колонку
                                                      как сделать так чтобы на телефоне была такая же мозайка в несколько колонок?
                                                      в мануале на гит хабе написанно что можно как то инициализировать через событие джаваскрипт: mosaicflow-layout
                                                      но я в джава не селен, не знаю как события писать.
                                                      1. Александр Мальцев # 0
                                                        Инициализировать MosaicFlow можно только один раз.
                                                        Т.е. Вы можете с помощью JavaScript определить ширину рабочей области окна браузера и задать ширину элементов.
                                                        Для этого:
                                                        1. Необходимо у контейнера удалить класс mosaicflow (чтобы он не инициализировлся на автомате) и добавить идентификатор myContainer:
                                                          <div class="container"> 
                                                            <div id="myContainer" class="clearfix">  
                                                              <div class="mosaicflow__item">
                                                                <-- ... -->
                                                        
                                                        2. Добавить скрипт после подключения библиотеки jQuery:
                                                        <script>
                                                        jQuery(function($) {
                                                          $(function() {
                                                            if ($(window).width() < 768) {
                                                              //инициализация mosaicflow с шириной элемента 100px (для экрана <768)
                                                              $('#myContainer').mosaicflow({
                                                                itemSelector: '.mosaicflow__item',
                                                                minItemWidth: 100
                                                              });
                                                            }
                                                            else  {
                                                              //инициализация mosaicflow с шириной элемента 300px (для экрана >=768)
                                                              $('#myContainer').mosaicflow({
                                                                itemSelector: '.mosaicflow__item',
                                                                minItemWidth: 300
                                                              });
                                                            }
                                                          });
                                                        });
                                                        </script>
                                                        
                                                        P.S. Для проверки в браузере необходимо сначала уменьшить размер окна, т.к. инициализация происходит всего один раз.
                                                        1. Виктор # 0
                                                          Спасибо большое за ответ! Все заработало! :)
                                                          1. Виктор # 0
                                                            Я заметил что если заходить по якорям через url например site.ru#rewiews, то те якоря которые находятся выше блока работ мозайки они нормально останавливаются, а те якоря которые находятся ниже блока работ с мозайкой, они на секунду останавливаются правильно, а потом резко в низ страницы скролят, может быть кто знает изза чего? и как это исправить
                                                        2. Иван # 0
                                                          Добрый вечер. Возник вопрос. Когда открываешь галерею на смартфоне, то при нажатии на фото, оно открывается также как и на компьютере, т.е. не на весь экран. Как сделать чтобы при открытии на смартфоне фотка разворачивалась на весь экран?
                                                          1. Александр Мальцев # 0
                                                            Здравствуйте, Иван.
                                                            Замените fancybox на что-нибудь другое, которое позволяет это сделать.
                                                            Например, на photoswipe.com
                                                          2. Robin # 0
                                                            Как сделать на основе fancybox вывод галереи, когда жмешь на img1, а в галерее видишь и листаешь img2 и img3?
                                                            1. Александр Мальцев # 0
                                                              Она сейчас так и работает.
                                                            2. Сергей # 0
                                                              Александр, спасибо за пособие, Вы делаете хорошую и нужную работу!
                                                              Вывод tumb-ов на странице работает, но открываются изображения на новой странице, и отсутствуют стрелки навигации и кнопка «закрыть». Как быть в таком случае? Я не вижу, где это могло бы настраиваться.
                                                              Спасибо огромное!
                                                              1. Александр Мальцев # 0
                                                                Проверьте и исправьте ошибки, связанные с подключение библиотеки jQuery, fancyBox и др. Для этого можете открыть панель разработчика (F12) в браузере и перейти на вкладку консоль.
                                                                1. Игорь # 0
                                                                  У меня выдает следующую информацию:
                                                                  
                                                                  10-avtosalon-volkswagen:30 Uncaught TypeError: jQuery(...).tooltip is not a function
                                                                  (anonymous function) @ 10-avtosalon-volkswagen:30
                                                                  fire @ jquery-1.12.3.js:3232
                                                                  self.fireWith @ jquery-1.12.3.js:3362
                                                                  jQuery.extend.ready @ jquery-1.12.3.js:3582
                                                                  completed @ jquery-1.12.3.js:3617

                                                                  Я не могу понять в чем суть. Помогите пожалуйста.
                                                                  1. Александр Мальцев # 0
                                                                    Не подключен bootstrap.js
                                                              2. Мария # 0
                                                                Александр, огромное спасибо за статью. Если моя просьба не отнимет у Вас много времени, подскажите пожалуйста, в мозайке при событии (click, например), вызывающем скрытие/показ (display:none/display:block) нескольких элементов галереи, можно ли как-то пересортировать оставшиеся элементы, чтобы от скрытых элементов не оставалось пустого места в сетке?
                                                                1. Александр Мальцев # 0
                                                                  Мария, не совсем понял Ваш вопрос. Он про Mosaic Flow? При нажатие на изображение, оно открывается в окне fancyBox, в котором Вы можете изображения перелистывать. Так в какой момент, Вы хотите удалить или скрыть изображение?
                                                                2. Мария # 0
                                                                  Я имела ввиду сортировку как в плагине mixitup.js.
                                                                  1. Мария # 0
                                                                    1. Мария # 0
                                                                      Как Вы справедливо заметили, дело, действительно, не в мозайке.
                                                                      1. Мария # 0
                                                                        В этом примере использованы Fancybox и MixitUp, а вот подружить их с Mosaic Flow у меня не получается пока. Код примера взят отсюда jsfiddle.net/donatasben/2VdKK/10/. При попытке просто скрывать (display:none) ненужные картинки по клику на кнопке меню, (без подключения mixitup), остаются пустые места.
                                                                        1. Александр Мальцев # 0
                                                                          Mosaic Flow не содержит методов, которые бы позволили перестроить (обновить) мозайку. В данном случае придётся подготавливать код для Mosaic Flow каждый раз или в качестве варианта может стоит посмотреть какой-нибудь другой плагин подобный Pinterest.
                                                                        2. Мария # 0
                                                                          Спасибо.
                                                                          1. Виктор # 0
                                                                            Почему мозаик флов при загрузке страницы растягивает секцию с фотографиями на 8 тысяч пикселей, грузятся миниатюры фотографий которые отдельно были подготовленны
                                                                            1. Кирилл # 0
                                                                              Здравствуйте! А вот такой вопрос. Есть страница портфолио, там несколько блоков. В каждом блоке идет заголовок, описание и картинка ( с этим все понятно), затем кнопка «смотреть далее» — вот здесь после нажатия этой кнопки должен открыться блок с прокруткой и содержанием набора фотографий относящихся к данному блоку.
                                                                              Пока получилось сделать лишь с помощью кнопки переход на другой html в котором сделана галерея, но надо именно как написано выше.
                                                                              Заранее спасибо.
                                                                              1. Александр Мальцев # 0
                                                                                Здравствуйте!
                                                                                Вам необходимо написать некоторый скрипт, который будет это делать.
                                                                                Можно например, начать так:
                                                                                Код HTML+JS
                                                                                <script>
                                                                                // для формирование кода галереи будем использовать функцию
                                                                                var imagePortfolio = function() {
                                                                                  var htmlCode;
                                                                                  for (var i=0; i<arguments.length; i++) {
                                                                                    htmlCode += '<div class="col-md-3 col-sm-4 col-xs-6 thumb">'+ 
                                                                                                '<a class="fancyimage" data-fancybox-group="group" href="/photo/'+arguments[i]'">'+ 
                                                                                                '<img class="img-responsive" src="/photo/'+arguments[i]'"></a></div>';
                                                                                  }
                                                                                  // в качестве результата будем возвращать функцию, которая будет вставлять этот код в необходимый контейнер
                                                                                  return function {
                                                                                    $('imageContainer .row').html(htmlCode);
                                                                                  }
                                                                                }
                                                                                //после загрузки страницы
                                                                                $(function(){
                                                                                  //для каждого портфолио укажем изображения
                                                                                  var imageportfolio1 = imagePortfolio('photo1-1.jpg','photo1-2.jpg','photo1-3.jpg','photo1-4.jpg');
                                                                                  var imageportfolio2 = imagePortfolio('photo2-1.jpg','photo2-2.jpg','photo2-3.jpg','photo2-4.jpg');
                                                                                  var imageportfolio3 = imagePortfolio('photo3-1.jpg','photo3-2.jpg','photo3-3.jpg');
                                                                                  //привяжем кнопки к вызову соответствующего портфолио (или как-то по другому)
                                                                                  $('#button1').click(functon(){
                                                                                    imageportfolio1();
                                                                                  });
                                                                                  $('#button2').click(functon(){
                                                                                    imageportfolio1();
                                                                                  });
                                                                                  $('#button3').click(functon(){
                                                                                    imageportfolio1();
                                                                                  });
                                                                                });
                                                                                </script>
                                                                                <!-- Контейнер, в который будет выводится галерея с вертикальной прокруткой -->
                                                                                <div id="imageContainer" style="height: 700px; overflow-y: scroll;">
                                                                                  <div class="container"> 
                                                                                    <div class="row"> 
                                                                                    </div> 
                                                                                  </div>
                                                                                </div>
                                                                                
                                                                              2. Кирилл # 0
                                                                                Спасибо большое попробую
                                                                                1. Дарья # 0
                                                                                  Здравствуйте! Очень понравились ваши уроки. При создании галереи возникла такая ситуация. Есть главная страница (index.html) на которой располагается меню и контент. Нужно, что при нажатии на пункт меню «Галерея» на эту страницу вместо контента отображалась галерея. Она отображается, но вместо сетки миниатюр изображений, они располагаются в реальном размере одно под одним. Как можно это исправить или в чем может быть проблема?

                                                                                  Заранее спасибо

                                                                                  1. Александр Мальцев # 0
                                                                                    Самый простой вариант сделать так.
                                                                                    HTML-код:
                                                                                    <div id="news">
                                                                                      Блок новостей...
                                                                                    </div>
                                                                                    <div id="gallery" class="hidden">
                                                                                      Галерея (по умолчанию не отображается)...
                                                                                    </div>
                                                                                    
                                                                                    JavaScript-код (вставить его после подключения библиотеки jQuery):
                                                                                    <script>
                                                                                    $(function(){
                                                                                      // showNews - id ссылки Новости в меню
                                                                                      $('#showNews').click(function(e) {
                                                                                        e.preventDefault();
                                                                                        if ($('#news').hasClass('hidden')) {
                                                                                          $('#news').removeClass('hidden');
                                                                                        }
                                                                                        if (!$('#gallery').hasClass('hidden')) {
                                                                                          $('#gallery').addClass('hidden');
                                                                                        }
                                                                                      });
                                                                                      // showGallery - id ссылки Галерея в меню
                                                                                      $('#showGallery').click(function(e) {
                                                                                        e.preventDefault();
                                                                                        if ($('#gallery').hasClass('hidden')) {
                                                                                          $('#gallery').removeClass('hidden');
                                                                                        }
                                                                                        if (!$('#news').hasClass('hidden')) {
                                                                                          $('#news').addClass('hidden');
                                                                                        }
                                                                                      });
                                                                                    });
                                                                                    </script>
                                                                                    
                                                                                    1. Дарья # 0
                                                                                      спасибо) буду пробовать
                                                                                  2. Андрей # 0
                                                                                    Скачал fancybox 1.3.4., все прописал на своей разрабатываемой странице как в примере — не работает. Долго разбирался, пока не понял, что fancybox 1.3.4 использует jqueri 1.4, а bootstrap 3,3,6 использует версию 1.11.3. В результате или fancybox не работает или функции bootstrap. Что делать, как правильно все прописать, что-бы работало и то и другое ??
                                                                                    1. Александр Мальцев # 0
                                                                                      Здесь используется fancybox 2.1.5.
                                                                                      _http://fancyapps.com/fancybox/
                                                                                      1. Андрей # 0
                                                                                        А возможно-ли сделать, что-бы некоторые ссылки fansybox работали только на больших экранах, например что-бы на xs экранах смартфонов нажатие на фото не открывало-бы отдельное окно fansybox?
                                                                                        1. Александр Мальцев # 0
                                                                                          Можно, изменив скрипт инициализации плагина fancybox на следующий:
                                                                                          $(document).ready(function() { 
                                                                                            if (window.innerWidth >=768) {
                                                                                              $("a.fancyimage").fancybox(); 
                                                                                            }
                                                                                            else {
                                                                                              $('a.fancyimage').each(function(){
                                                                                                $(this).click(function(e){
                                                                                                  e.preventDefault();
                                                                                                });
                                                                                              });
                                                                                            }
                                                                                          });
                                                                                          
                                                                                    2. Андрей # 0
                                                                                      Ну так это отключит плагин полностью, а хотелось-бы отключить только для отдельных выборочных функция, например фотографий, которые и так на весь мобильный экран уже растянуты. А например в других моментах fancybox всё равно используется.
                                                                                      1. Андрей # 0
                                                                                        Хочу заменить модальное окно на окно inline плагина fancybox. Как правильнее привязать кнопку открытия fancybox inline — только через атрибут ссылки или есть какое-то другое решение?
                                                                                        1. Тимур # 0
                                                                                          Здравствуйте! Может не в тот раздел пишу, но все же. Подскажите пожалуйста, есть скрипт js на появление и пропадание стрелок навигации вправо, влево при наведении курсора на owl carousel.
                                                                                          var
                                                                                                  child = $('.owl-nav');
                                                                                              $ ('.owl-carousel').hover(function() {
                                                                                                  child.show();
                                                                                              },
                                                                                              function() {
                                                                                                  child.hide();
                                                                                              });
                                                                                          Все вроде бы работает, но есть такая особенность, что при обновлении страницы, стрелки видны, независимо от того лежит курсор на карусели или же нет. Стоит перевести курсор на карусель и убрать с неё, как все работает как нужно.
                                                                                          Как убрать видимость стрелок навигации при обновлении страницы
                                                                                          1. Тимур # 0
                                                                                            Снимаю вопрос. Решил его вот таким скриптом, может кому пригодиться
                                                                                             $(document).ready(function(){
                                                                                                    $('.owl-nav').hide(0);
                                                                                                    $('.owl-carousel').on('mouseenter', function(){
                                                                                                        $('.owl-nav').css({display: "block"});
                                                                                                    });
                                                                                                    $('.owl-carousel').on('mouseleave', function(){
                                                                                                        $('.owl-nav').css("display", "none");
                                                                                                    });
                                                                                            });
                                                                                            
                                                                                          2. Игорь # 0
                                                                                            У меня два таба на bootstrap

                                                                                            в первом табе галерея нормально работает — а при переключении на второй таб — вторая галерея во второй закладке не показывается
                                                                                            В чем дело? виноват переключатель табов или MosaicFlow?
                                                                                            1. Александр Мальцев # 0
                                                                                              Тут скорее дело с инициализацией MosaicFlow. Т.е. когда 2 таб не показывается производить инициализацию галереи в нём нельзя. Тут необходимо использовать событие shown.bs.tab и когда оно происходит проверять, если это 2 таб то выполнять инициализацию MosaicFlow, которая находится во второй вкладке.
                                                                                            2. Юля # 0
                                                                                              Умоляю помогите!!! Проблема с галереей сайта.
                                                                                              Последние нижние 2 фото в галерее выбиваются (неровно относительно верхних находятся и относительно друг друга). Подскажите, как это исправить?
                                                                                              HTML-код:
                                                                                                ...
                                                                                                <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
                                                                                                <script src="js/jquery.colorbox.js"></script>
                                                                                                <script>
                                                                                                  $(function() {
                                                                                                    $(".colorbox").colorbox({
                                                                                                      rel: 'colorbox',
                                                                                                      maxWidth: '500',
                                                                                                      maxHeight: '500'
                                                                                                    });
                                                                                                  })
                                                                                                </script>
                                                                                              </head>
                                                                                              <body>
                                                                                                ...
                                                                                                <div class="content photos">
                                                                                                <h1>Photos</h1>
                                                                                                <div>
                                                                                                  <a class="with_bg colorbox" href="img/photos/full/1_2.jpg" style="background-image: url(img/photos/1_2_bg.jpg)">
                                                                                                    <img alt="" src="img/photos/1_2.jpg" />
                                                                                                  </a>
                                                                                                  <a class="with_bg colorbox" href="img/photos/full/1_4.jpg" style="background-image: url(img/photos/1_4_bg.jpg)">
                                                                                                    <img alt="" src="img/photos/1_4.jpg" />
                                                                                                  </a>
                                                                                                ...
                                                                                                </div>
                                                                                                ...
                                                                                              
                                                                                              1. Александр Мальцев # 0
                                                                                                Это определяют стили CSS которые Вы используете. Приводить HTML код нет смысла, т.к. нужны ещё стили. Если хотите чтобы Вам помогли разобраться сделайте страничку на jsfiddle.
                                                                                              2. Елена # 0
                                                                                                Спасибо! Всё работает!
                                                                                                1. Сергей # 0
                                                                                                  Ребята, кто подскажет как лайки каждой фотке сделать, ни в контакте привязать а на сайте типа плюс один или нравиться, что то в этом роде. Спасибо!
                                                                                                  1. OlegB # 0
                                                                                                    А как сделать что-то похожее на это:
                                                                                                    wp.unitegallery.net/tiles-justified/
                                                                                                    чтобы ширина каждого рядка была одинаковой и внизу было ровно?
                                                                                                    Заранее спасибо!
                                                                                                    1. Александр Мальцев # 0
                                                                                                      А зачем это делать, если его можно скачать, установить и настроить.
                                                                                                      1. OlegB # 0
                                                                                                        Спасибо большое. Все установил, все работает. А то думал, что покупать надо)
                                                                                                    2. Фарход # 0
                                                                                                      А как сделать так чтобы при добавлении разных картинок(по высоте и ширине) превью отображались одинаково?

                                                                                                      1. Александр Мальцев # 0
                                                                                                        Используйте jquery плагин jQuery NailThumb.
                                                                                                        1. Фарход # 0
                                                                                                          А его как то можно к bootstrap прикрутить?
                                                                                                          1. Александр Мальцев # 0
                                                                                                            На этом сайте есть примеры (examples).
                                                                                                            Например, необходимо обернуть каждую карнтинку в блок div с классом nailthumb-container и добавить к странице следующий скрипт.
                                                                                                            <div class="nailthumb-container"><img src="image1.png"></div>
                                                                                                            <div class="nailthumb-container"><img src="image2.png"></div>
                                                                                                            <div class="nailthumb-container"><img src="image3.png"></div>
                                                                                                            ...
                                                                                                            <script>
                                                                                                            jQuery(document).ready(function() {
                                                                                                              jQuery('.nailthumb-container').nailthumb({width:100,height:100,fitDirection:'top left'});
                                                                                                            });
                                                                                                            </script>
                                                                                                            
                                                                                                            Также необходимо после подключения библиотеки jquery подключить саму эту библиотеку:
                                                                                                            <script type="text/javascript" src="path/to/jquery.js"></script>
                                                                                                            <script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
                                                                                                            
                                                                                                            Кроме этого примера примера, данная библиотека ещё содержит и другие.
                                                                                                            1. Фарход # 0
                                                                                                              Спасибо
                                                                                                      2. oksana # 0
                                                                                                        Здравствуйте.
                                                                                                        Сделала все, как написано, но галерея не работает.
                                                                                                        Сверху между head
                                                                                                        <link href="fancybox/jquery.fancybox.css" rel="stylesheet">
                                                                                                        
                                                                                                        Внизу:
                                                                                                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                                                                                                        <script src="js/bootstrap.js"></script>
                                                                                                        <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
                                                                                                        <script type="text/javascript" src="/fancybox/jquery.fancybox.js"></script>
                                                                                                        <script type="text/javascript">
                                                                                                        jQuery(document).ready(function() {
                                                                                                          jQuery("a.fancyimage").fancybox();
                                                                                                        });
                                                                                                        </script>
                                                                                                        </body>
                                                                                                        
                                                                                                        Пробовала и так (не работает):
                                                                                                        <code>
                                                                                                        <script type="text/javascript"> 
                                                                                                        $(document).ready(function() { 
                                                                                                          $("a.fancyimage").fancybox(); 
                                                                                                        }); 
                                                                                                        </script> 
                                                                                                        
                                                                                                        Для отображения изображений:
                                                                                                        <code>
                                                                                                        <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3">
                                                                                                          <a class="fancyimage" data-fancybox-group="group" href="http://placehold.it/300x320.png">
                                                                                                            <img class="img-responsive" alt="" src="http://placehold.it/320x320">
                                                                                                          </a>
                                                                                                        </div>
                                                                                                        <div class="col-sm-4 col-xs-6 col-md-3 col-lg-3">
                                                                                                          <a rel="gallery" class="fancyimage" href="http://fancyapps.com/fancybox/demo/2_b.jpg">img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
                                                                                                        </div>
                                                                                                        
                                                                                                        Ни то, ни другое не работает.
                                                                                                        Ошибки в консоле:
                                                                                                        TypeError: jQuery(...).fancybox is not a function
                                                                                                        index.html:123:5
                                                                                                        <анонимная>
                                                                                                        index.html:123
                                                                                                        (здесь говорит, что ошибка jQuery(«a.fancyimage»).fancybox();, если прописываю иначе, то ошибка $(«a.fancyimage»).fancybox(); )
                                                                                                        m.Callbacks/j()
                                                                                                        jquery.min.js:2
                                                                                                        m.Callbacks/k.fireWith()
                                                                                                        jquery.min.js:2
                                                                                                        .ready()
                                                                                                        jquery.min.js:2
                                                                                                        J()

                                                                                                        Не понимаю в чем дело, до этого другую галерею ставила, всё работало, но нужна эта, так как более функциональная и никак не подключить.
                                                                                                        помогите, пожалуйста
                                                                                                        1. Александр Мальцев # 0
                                                                                                          У Вас директория fancybox расположена в корне?
                                                                                                          В одном случае Вы пишите так:
                                                                                                          fancybox/jquery.fancybox.css
                                                                                                          
                                                                                                          В другом месте так:
                                                                                                          /fancybox/jquery.fancybox.pack.js
                                                                                                          /fancybox/jquery.fancybox.js
                                                                                                          
                                                                                                          Скорее всего необходимо убрать слэш перед fancybox.
                                                                                                          1. Оксана # 0
                                                                                                            Да, убрала с утра, дошло наконец-то. Вроде заработало, но картинки открываются как попало (одна выше открывается, другую щелкую, она уже ниже на экране), нет крестиков, чтобы закрыть, нет стрелочек. Подключила стили и скипты helpers, не помогло.
                                                                                                        2. Rjvfy # 0
                                                                                                          Здраствуйте Александр. Я Роман, ошибся при регистрации. Спасибо за статью. Очень полезная статья. Галерея на fancybox работает Отлично, но есть одно НО, которое я уже 2-а дня немогу побороть. Когда я подключаю мастер страницу, плагин перестает работать: работает просто ссилка (фото раскривается на все окно). Убираю мастер страницу
                                                                                                          Layout = null; — все работает.
                                                                                                          Пробовал еще 3-и плагина fancyzoom,lightbox2,prettyPhoto, но результат такой же.

                                                                                                          Что может бить?
                                                                                                          1. Александр Мальцев # 0
                                                                                                            Здравствуйте, Роман. Насколько я понимаю, вы используете ASP.NET MVC. В этом случае вам необходимо подключать плагин fancybox и другие файлы проекта к мастеру страницы. А на странице, которая использует мастер страницу располагать только основной контент, т.е. контейнер с изображениями.
                                                                                                            1. Rjvfy # 0
                                                                                                              Здаствуйте. Вы ПРОРОК. ASP.NET MVC Core. Я вроди так пробовал с другими плагинами. Но еще раз попробую с fancybox.
                                                                                                              Спасибо за быстрий ответ.
                                                                                                          2. Rjvfy # 0
                                                                                                            Огромное человеческое СПАСИБО!!!
                                                                                                            Добавил в мастер страницу в конец и пошло.
                                                                                                            Наверное с другими плагинами чтото «плужил».

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