Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26

01.11.2016


16:06


5035


2


Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26

Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26

Всем привет!
В сегодняшнем уроке я расскажу,  как создать галерею изображений.
Решил не обходить эту тему стороной, так как на 100% уверен, что многие будут искать для своих будущих проектов способы создания фотогалереи. Буду рад, если вы останетесь довольны.
Итак, перейдем к созданию галереи изображений.

С чего начнем? Начнем с разметки.
Создадим разметку, которая будет состоять из:

четырех блоков для устройств, у которых средняя (md) и большая (lg) ширина экрана;

трех блоков для устройств, у которых маленькая ширина экрана (sm);

двух блоков для устройств, у которых очень маленькая ширина экрана (xs).

Как создать разметку (сетку), я думаю, вы помните.  Да, все верно, будем использовать классы 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>

Теперь пропишем внутри каждого блока картинки:

<img class="img-responsive" src="kartinka.jpg" />

Вот так:

<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<img class="img-responsive" src=" kartinka.jpg " />
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img class="img-responsive" src=" kartinka.jpg " />
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img class="img-responsive" src=" kartinka.jpg " />
</div>
<!-- и так далее -->
</div>

Далее нужно скачать инструмент fancybox:

Скачать с официального сайта

Скачать с моего блога

После того, как скачали, залейте скаченную папку «fancybox» в корень вашей страницы.
То есть, вид должен быть вот таким:

Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26

Подключаем к веб странице. Код нужно прописать сразу перед тегом  </body> (в самом конце):

<!-- подключение 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>

Теперь нужно каждую картинку  <img>  сделать ссылкой.

<a class="fancyimage" rel="group" href=" kartinka.jpg ">
<img class="img-responsive" src=" kartinka.jpg " />
</a>

Значение атрибутов для ссылки:

  • class="fancyimage" – класс, который будем использовать в качестве селектора для инициализации fancybox;
  • rel="group" – для группировки изображений, которые можно будет просматривать в окне fancybox с помощью стрелок назад и вперёд. Если убрать этот атрибут, то картинка будет отрываться, но без возможности листать изображения;

Следующий код javascript нужно вставить тоже в конце, сразу перед тегом  </body>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>	 
<script type="text/javascript">
$(document).ready(function() {
$("a.fancyimage").fancybox();
});
</script>

Итак, в итоге у меня вышел вот такой код:

...
  <body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 thumb">
<a class="fancyimage" rel="group" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>	 
<script type="text/javascript">
$(document).ready(function() {
$("a.fancyimage").fancybox();
});
</script>
<!-- подключение 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>
  </body>
</html>

Для красоты добавьте свой CSS стиль:

.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;
}

Теперь смотрим демонстрацию

посмотреть пример

Попробуем удалить из ссылки атрибут  rel="group" :

<a class="fancyimage" href="kartinka.jpg">
<img class="img-responsive" src="kartinka.jpg" />
</a>

в итоге выйдет вот так:

посмотреть пример



Случайные записи:

  1. Кнопки. Основы bootstrap 3 для начинающих. Урок №7
  2. Пагинация (pagination) – Bootstrap3
  3. Коротко о PHP. Основы PHP с нуля. Урок №1
  4. Тег DOCTYPE в HTML
  5. Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

2 ответа(ов) на статью: “Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26”

  1. Юлия says:

    Здравствуйте! Подскажите, как добавить в всплывающее фото кнопку "Печать" (вордпресс)?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Юля!
    Вы рубрику видели? Ваш вопрос не по теме этой категории.
    В категории "Bootstrap", я даю ответы в комментариях по этой теме.
    Пожалуйста, не нужно мой блог превращать в свалку комментариев не по теме.
    Спасибо за понимание.

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245