Bootstrap 3 - Компонент Thumbnails (Миниатюры)
Статья, в которой описывается компонент Thumbnails платформы Twitter Bootstrap 3.
Thumbnails - назначение и принципы создания
Компонент Thumbnails предназначен для создания различных галерей на основе сетки Bootstrap 3. В качестве объектов галереи могут использоваться изображения, видео, текстовые блоки или др.
Создание галереи Thumbnails всегда начинается с каркаса, который разрабатывается с помощью блоков div
и классов системы сеток платформы Twitter Bootstrap 3. После этого переходят к размещению необходимых блоков информации в ячейках этой сетки и добавление класса thumbnail
.
Создание галереи Thumbnails из изображений
Например, создадим галерею Thumbnails, состоящую из 12 изображений (на lg-устройствах - 4x3, на md-устроствах – 3x4, на sm-устройствах – 2x6, на xs-устройствах – 1x12).
<div class="row"> <!-- 1 Изображение --> <div class="col-sm-6 col-md-4 col-lg-3"> <a href="#" class="thumbnail"> <img src="..." alt="..."> </a> </div> <!--...--> <!-- 12 Изображение --> <div class="col-sm-6 col-md-4 col-lg-3"> <a href="#" class="thumbnail"> <img src="..." alt="..."> </a> </div> </div>
Доработаем вышепредставленный пример таким образом, чтобы картинка в нём выводилась в модальном окне при нажатии на неё.
<!-- Добавьте модальное окно после открывающего тега body--> <div class="modal fade" id="image-modal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-title">Просмотр изображения</div> </div> <div class="modal-body"> <img class="img-responsive center-block" src="" alt=""> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> <!-- Блок кода, содержащий галерею Thumbnails --> <!-- Добавьте следущий сценарий перед закрывающим тегом body --> <script> // После загрузки DOM-дерева (страницы) $(function() { //при нажатии на ссылку, содержащую Thumbnail $('a.thumbnail').click(function(e) { //отменить стандартное действие браузера e.preventDefault(); //присвоить атрибуту scr элемента img модального окна //значение атрибута scr изображения, которое обёрнуто //вокруг элемента a, на который нажал пользователь $('#image-modal .modal-body img').attr('src', $(this).find('img').attr('src')); //открыть модальное окно $("#image-modal").modal('show'); }); //при нажатию на изображение внутри модального окна //закрыть его (модальное окно) $('#image-modal .modal-body img').on('click', function() { $("#image-modal").modal('hide') }); }); </script>
Галерея Thumbnails, миниатюры которой содержат дополнительный контент
В миниатюры Thumbnails, используя дополнительную разметку, можно добавлять различные виды HTML-контента, такого как заголовки (элементы h1
-h6
), параграфы (элементы p
) и кнопки.
<div class="row"> <!-- 1 Изображение --> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Заголовок...</h3> <p>Контент...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <!--...--> <!-- 12 Изображение --> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Заголовок...</h3> <p>Контент...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div>
Еще поменял в bootstrap.css —
.modal-lg,
.modal-xl {
max-width: 800px; — на 1200
}
А можно еще вопрос? Я так понимаю, оно под мобильные не адаптировано? На мобильном оно открывается и получается намного шире ширины экрана. Это можно как-то пофиксить? Вернее, очевидно, что можно, но могли бы Вы подсказать? Если это пару строчек кода, естественно, а не работы на полдня.
Всё равно что-то не так делаете. Оно должно быть адаптивным по умолчанию.
Вот пример на Bootstrap 4.
href="/assets/uploadify/7/b/5/7b5f2136eb127ed4feccfbdad9ecf918.png">скриншот. Как можно решить данную проблему?
А вопрос такой. При добавлении описания к миниатюре (как в последнем примере), в котором символов несколько больше, чем в других, весь макет «плывет», что крайне неприглядно. Возможно ли как-то исправить эту ситуацию?
Макет «плывет» из-за того что эти блоки плавающие.
Чтобы это исправить, необходимо отменять обтекание плавающих блоков.
Для этого необходимо после каждого второго блока вставить следующий код:
А после каждого третьего такой:
Т.е. так:
Постоянно пользуюсь вашим блогом, очень помогает.
Но вот здесь я застрял. Меня вполне устраивает вариант галереи через модальное окно… но есть проблема — не работает. Сделал все, как вы написали… не-а.
Просто открывает картинку как обычно в новом окне.
Быть может, посоветуете что нибудь? У меня wordpress. Я был бы безгранично благодарен.
Не получается сделать именно изображения, как у вас.
Я был бы благодарен если бы вы код посмотрели. Сам к сожалению проверить наличие ошибок в JS не могу, так как в этой самой JS ни бельмеса не понимаю. Я «очень» новичок, что называется)
JQuery и Bootstrap я подключал опять таки по вашим постам и, по идее, все работает. Потому, что affix с менюшкой я реализовал нормально.
Заранее благодарен за любую помощь!
Но, естественно, открывается только то изображение, которое указано.
Я так понимаю, что у меня проблема все таки в JS
src=«https://itchief.ru/assets/uploadify/5/5/0/550480781f8b42c4302eaa9050f4433fs.jpg» class=«fancybox thumbnail center»>
Не могу понять как сделать так чтобы миниатюры были в таком виде как на картинке. Прописываю div.col-lg-3*3+div.col-lg-9 и всё едет( Бутстрап размещает три col-lg-3 в ряд, а под ними размещает col-lg-9
Хочу чтобы сайт на планшетах схлопытвался вот так:
<img
src=«https://itchief.ru/assets/uploadify/f/2/f/f2fe51225ebfb6c06831de3f069ace24s.jpg» class=«fancybox thumbnail center»>
1. Создать кнопки (например, в modal-footer):
2. Написать код на JavaScript, например, так:
С предыдущей проблемой я разобрался. Вопрос был в скрипте и закрылся на замене функции с "$" на «jQuery». А вот переход на другие картинки в модале не получается. Подскажите, это должен быть новый скрипт в теге
Может быть их нужно располагать в одном блоке, а не каждую в своем?
Пример:
Дополнительно можно почитать ещё этот комментарий.
Демо галереи, в которой в модальном окне можно прокручивать изображения.
И последний вопрос — а нельзя ли как нибудь сделать так, чтобы область, на которой показывается изображение (полотно белое) сделать прозрачным, т.е. чтобы посетитель при нажатии на изображение видел только само изображение в увеличенном размере, кнопки переключения и, соответственно затемненный основной экран?
В общем, спасибо Вам большое за помощь и уделенное время. Буду Вашим блогом пользоваться дальше. Я еще только первую страницу сайта сварганил)
Т.е. миниатюра загружалась бы из картинок с маленьким размером, а в модальном окне уже оригинальная.
В сетке необходимо будет просто добавить к каждому изображению атрибут data-img, которая будет содержать путь к оригинальной картинке. А в src указывать путь к миниатюре.
После этого внести изменения в JavaScript код, а именно указать, из какого атрибута элемента img необходимо брать путь к картинке (оригиналу):
теперь выводит содержимое первого элемента во всех окнах
itchief.ru/bootstrap/modal#comment-2272
Не хочется повторяться :)
в модальное окно. Через clone() добавляет caption от всех блоков с картинками.