Приветствую всех любознательных читателей и любителей интересных задач! Данная публикация написана специально для вас. Сегодня я расскажу вам, как создается Bootstrap галерея. И не просто галерея, а показ фото с миниатюрами во всплывающем окне Bootstrap 3.
Для создания такого веб-приложения я перечислю основные инструменты и подробно объясню, как они работают, а после приведу программную реализацию примера. Ну что ж, давайте приступим к разбору материала!
Для начала научимся всплывать!
Чтобы реализовать в жизнь задуманную нами задачу, вам стоит вначале узнать, как создаются разворачивающиеся окна. В фреймворке существует такой плагин, как Modal Plugin. С него мы и начнем работу.
Чтобы диалоговое окно появлялось при нажатии на кнопку, нужно создать триггер связи модуля с ней. Для этого объявите тег <button> и в нем пропишите такие атрибуты, как
data-toggle="modal" и data-target="#Наименование">
В своем примере я создаю три таких триггера:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="en"> <head> <title>Пример интересной презентации картинок</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h2>Пример показа изображений</h2> <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal1">Посмотреть портфолио</button> <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal2">Посмотреть портфолио</button> <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal3">Посмотреть портфолио</button> </div> </body> </html> |
Презентованный выше код является каркасом моего будущего приложения. Поэтому вся последующая работа будет проводится именно с ним.
Теперь необходимо создать собственно само всплывающее окошко. Для этого после триггеров вставьте код:
1 2 3 4 5 6 | <div class="modal fade" id="Modal1" role="dialog"> <div class="modal-dialog"> </div> </div> </div> |
Обратите внимание на идентификатор. Его имя должно совпадать со значением атрибута data- target.
А вот теперь заполним Modal1 контентом, оформив все объекты в сетку, и продублируем код еще 2 раза для Modal2 и Modal3.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <div class="container-fluid"> <h2>Пример показа изображений</h2> <div class="row" > <div class="col-sm-4"> <img src="http://poziruy.ru/wp-content/uploads/2015/02/poziruy-ru-novogodnyaya-fotosessiya-04.jpg" alt="Studio"> <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal1">Посмотреть портфолио</button> </div> <div class="col-sm-4"> <img src="http://happyframes.me/wp-content/uploads/2013/10/kissingthebride.jpg" alt="Street"> <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal2">Посмотреть портфолио</button> </div> <div class="col-sm-4"> <img src="http://lavr-photo.ru/image/devushki_ulica4.jpg" alt="Street"> <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal3">Посмотреть портфолио</button> <div> </div> <div class="modal fade" id="Modal1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Студийная съемка</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> <div class="modal fade" id="Modal2" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Свадебная съемка</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> <div class="modal fade" id="Modal3" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Уличная съемка</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> </div> |
Таким образом, у вас на экране отобразится 3 кнопки, по нажатию на каждую из которых будет появляться окно.
Чтобы внешний вид страницы выглядел презентабельно, пропишите минимальный набор стилевых правил.
<style>
img {
height: 350px;
box-shadow: 0 2px 9px #111;
}
</style>
А теперь займемся фотогалереей
Пришло время заполнить модальные окна фотографиями из портфолио. Для этого я воспользуюсь стандартными средствами фреймворка – разметкой с помощью сеток. Однако вы можете подключить более профессиональные механизмы реализации галерей. Например, fancybox или lightbox.
Так, в каждый блок с классом modal-body я поместил по 3 фотографии. В качестве примера я прикрепил ниже код для свадебной фотосессии.
1 2 3 4 5 6 7 8 | <div class="row" > <div class="col-sm-4"><img class="gal" src="http://xvatit.com/uploads/posts/2016-03/1458198774_svadebnaya-fotosessiya-zimoy-1.jpg" alt=""> </div> <div class="col-sm-4"><img class="gal" src="http://fotografff.ru/_ph/61/479779454.jpg" alt=""> </div> <div class="col-sm-4"><img class="gal" src="http://info-mir.com.ua/wp-content/uploads/2015/02/originalnye-idei-fotosessii-na-godovschinu-svadby-3.jpg" alt=""> </div> </div> |
Продублируйте код в каждый блок с названным классом и вставьте свои изображения.
И последний штрих. Пропишите стилевое оформление для класса .gal.
.gal {
height:140px;
width: 190px;
margin-right:5px;
}
И вуаля – необычная презентация портфолио готова!
Вы можете придумать свою область применения данного примера, использовать его на различных движках (Joomla 3, WordPress и т.д.) и дополнять мой программный код.
Надеюсь данная статья была для вас интересной и познавательной. Вступайте в группу подписчиков моего блога и рассказывайте о нем друзьям. А я желаю вам успехов в обучении! Пока-пока!
С уважением, Роман Чуешов