StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
Главная » Основы Bootstrap 3 » Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
01.11.2016
16:06
10641
4
Создание галереи изображений. Основы 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» в корень вашей страницы.
То есть, вид должен быть вот таким:
Подключаем к веб странице. Код нужно прописать сразу перед тегом </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>
в итоге выйдет вот так:
Случайные записи:
- Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7
- Приложение для смартфонов (андроид) – основы HTML
- Создание дополнительных классов. Основы bootstrap 3 для начинающих. Урок №23
- Отображение и скрытие элементов. Основы bootstrap3 для начинающих. Урок №24
- Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
Здравствуйте! Подскажите, как добавить в всплывающее фото кнопку "Печать" (вордпресс)?
Ответить
19 декабря, 2017 at 10:59
Здравствуйте, Юля!
Вы рубрику видели? Ваш вопрос не по теме этой категории.
В категории "Bootstrap", я даю ответы в комментариях по этой теме.
Пожалуйста, не нужно мой блог превращать в свалку комментариев не по теме.
Спасибо за понимание.
Ответить
Привет а куда ложить сами картинки для галереи?
Ответить
28 января, 2020 at 17:39
Привет.
Вот тут:
http://stepkinblog.ru/html/kak-propisat-put-k-fajlu-kartinke-ili-stranice-osnovy-html-dlya-nachinayushhix-urok-13.html/
Ответить