Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Создаем bootstrap галерею с красивыми миниатюрами, да еще и во всплывающем окне. Пошаговая инструкция

Приветствую всех любознательных читателей и любителей интересных задач! Данная публикация написана специально для вас. Сегодня я расскажу вам, как создается 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">&times;</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">&times;</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">&times;</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 и т.д.) и дополнять мой программный код.

Надеюсь данная статья была для вас интересной и познавательной. Вступайте в группу подписчиков моего блога и рассказывайте о нем друзьям. А я желаю вам успехов в обучении! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 42 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: