Bootstrap Example

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

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

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

По сути данный компонент просто расширяет возможности данной сетки, позволяя её использовать для представления изображений, видео, текстовых блоков и другой информации.

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

Создание галереи Thumbnails из изображений

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

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

  
 
 
 
× 
Просмотр изображения
 
 
 
Закрыть 
 
 
 
    

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

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

 
  
 
   
Заголовок.
 
Контент.
 
Button Button
 
 
 
   
 
   
Заголовок.
 
Контент.
 
Button Button
 
 
 
 
 

Комментарии: 42

Добрый день. Спасибо, все работает. Почти все. Как сделать, чтобы модальное окно было по размеру картинки? А то оригинпльные картинки большие и вылазят за границы окна. Если динамичное по размеру картинок сложно, то хотя бы как его фиксированно увеличить?

Привет! Если используете Bootstrap 4, то добавьте к картинкам класс img-fluid или пропишите в CSS для картинок в модальном окне правило:

.modal img { display: block; height: auto; max-width: 100%; }

Спасибо, получилось.
Еще поменял в bootstrap.css —
.modal-lg,
.modal-xl {
max-width: 800px; — на 1200
}

А можно еще вопрос? Я так понимаю, оно под мобильные не адаптировано? На мобильном оно открывается и получается намного шире ширины экрана. Это можно как-то пофиксить? Вернее, очевидно, что можно, но могли бы Вы подсказать? Если это пару строчек кода, естественно, а не работы на полдня.

Пожалуйста!
Всё равно что-то не так делаете. Оно должно быть адаптивным по умолчанию.
Вот пример на Bootstrap 4.

Здравствуйте, я делаю сетку согласно коду статьи (thumbnail) однако получаю разный размер изображений. Вот href=»/assets/uploadify/7/b/5/7b5f2136eb127ed4feccfbdad9ecf918.png»>скриншот. Как можно решить данную проблему?

         Image Gallery 
The .thumbnail class can be used to display an image gallery.
 
The .caption class adds proper padding and a dark grey color to text inside thumbnails.
 
Click on the images to enlarge them.
  

Необходимо чтобы изображения имели одинаковые отношения ширины к высоте. Другой вариант — это воспользоваться инструкцией из этой статьи.

Александр, спасибо вам за грамотные статьи и уроки! Одно удовольствие находить для себя что-то новое.
А вопрос такой. При добавлении описания к миниатюре (как в последнем примере), в котором символов несколько больше, чем в других, весь макет «плывет», что крайне неприглядно. Возможно ли как-то исправить эту ситуацию?

Дмитрий, спасибо за отзыв.
Макет «плывет» из-за того что эти блоки плавающие.
Чтобы это исправить, необходимо отменять обтекание плавающих блоков.
Для этого необходимо после каждого второго блока вставить следующий код:

Постоянно пользуюсь вашим блогом, очень помогает.
Но вот здесь я застрял. Меня вполне устраивает вариант галереи через модальное окно… но есть проблема — не работает. Сделал все, как вы написали… не-а.

Просто открывает картинку как обычно в новом окне.

Быть может, посоветуете что нибудь? У меня wordpress. Я был бы безгранично благодарен.

Здравствуйте! Спасибо, за отзыв. У вас на странице должен быть подключен bootstrap.min.js, он необходимым для работы модального окна. А также проверьте последовательность подключения скриптов: jQuery -> Bootstrap JS -> скрипт, для отображения изображений в модальном окне. Если после этих манипуляций галерея работать не будет, то проверьте, нет ли у вас ошибок в JS, используя консоль браузера.

Модаль открывается. То есть при реализации на сайте кода с официальной документации Bootstrap — модаль открывается.
Не получается сделать именно изображения, как у вас.
Я был бы благодарен если бы вы код посмотрели. Сам к сожалению проверить наличие ошибок в JS не могу, так как в этой самой JS ни бельмеса не понимаю. Я «очень» новичок, что называется)

×
Закрыть