Просьба всем желающим при наличии готового сайта(ов) опубликовать в теме.
Сайты созданные в WebsitePad Freelancer
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться12019-01-16 14:03:44
- Администратор
- Сообщений: 8
- Уважение: [+0/-0]
- Последний визит:
2019-12-03 23:25:37
Поделиться32019-10-26 10:26:55
- Новичок
- Откуда: Краснодар
- Сообщений: 2
- Уважение: [+0/-0]
- Пол: Мужской
- Последний визит:
2019-10-26 18:27:04
Ярослав написал(а):
http://slobsv.ru/
Приветствую!
Галерея изображений на сайте простая! Нет возможности пользователям листать изображения.
Вот код, посмотрите, можно добавить в WebsitePad
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 - Создание адаптивной галереи изображений с помощью сетки</title>
<!-- Bootstrap CSS -->
<link href="/examples/vendors/bootstrap-4/css/bootstrap.min.css" rel="stylesheet">
<!-- fancyBox CSS -->
<link href="/examples/vendors/fancybox/jquery.fancybox.min.css" rel="stylesheet">
<style>
.thumb img {
-webkit-filter: grayscale(0);
filter: none;
border-radius: 5px;
background-color: #fff;
border: 1px solid #ddd;
padding: 5px;
}
.thumb img:hover {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.thumb {
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="h3 text-center my-4">Bootstrap 4 - Создание адаптивной галереи изображений с помощью сетки</h1>
<div class="row">
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_01.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_01.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_02.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_02.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_03.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_03.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_04.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_04.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_05.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_05.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_06.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_06.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_07.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_07.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_08.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_08.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_09.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_09.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_10.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_10.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_11.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_11.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_12.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_12.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_13.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_13.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_14.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_14.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_15.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_15.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_16.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_16.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_17.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_17.jpg" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6 thumb">
<a data-fancybox="gallery" href="/examples/images/for-image-gallery/img_18.jpg">
<img class="img-fluid" src="/examples/images/for-image-gallery/img_18.jpg" alt="">
</a>
</div>
</div>
</div>
<!-- jQuery -->
<script src="/examples/vendors/jquery/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="/examples/vendors/popper.js/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="/examples/vendors/bootstrap-4/js/bootstrap.min.js"></script>
<!-- fancyBox JS -->
<script src="/examples/vendors/fancybox/jquery.fancybox.min.js"></script>
</body>
</html>
Страница: 1