В настоящее время на всех веб-сайтах есть некоторые мультимедийные элементы, чтобы показывать их пользователям. Галерея изображений - один из них. Обычно она используется для демонстрации работы компании или отдельного человека.
Многие люди используют некоторые плагины jQuery, такие как всплывающее окно magnific, чтобы сделать эту галерею изображений более интересной. Но мы здесь ничего подобного не использовали. Мы создали простую галерею изображений, в которой использовали materialized CSS.
Materialize - это библиотека, состоящая из HTML, CSS и JavaScript. Этот CSS-фреймворк вдохновлен material design от Google. Нам известна другая подобная библиотека, и называется она Bootstrap. Эта галерея изображений полностью адаптивна, что означает, что ее можно настроить под любое небольшое устройство.
Исходный Код:
Для этого проекта вам необходимо добавить в свой проект материализованные файлы CSS и js. Вам также необходимо добавить последний файл jQuery. После этого создайте один HTML-файл с расширением .html и CSS-файл с расширением .css. Добавьте внешний CSS в HTML-файл.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
<meta charset="UTF-8">
<title>Responsive Image Gallery using Materialize CSS</title>
<link href="https://fonts.googleapis.com/css2?family=Teko&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="header">Responsive Image Gallery</h1>
<div class="row-container_all">
<div class="row row-container">
<div class="col s12 m6 l4"><img alt="" class="card responsive-img materialboxed image-box" src="https://sportishka.com/uploads/posts/2022-11/1667570738_38-sportishka-com-p-ozero-rits-pinterest-39.jpg"></div>
<div class="col s12 m6 l4"><img alt="" class="card responsive-img materialboxed image-box" src="https://sportishka.com/uploads/posts/2022-03/1646891487_48-sportishka-com-p-ostrova-karibskogo-morya-turizm-krasivo-fo-58.jpg"></div>
<div class="col s12 m6 l4"><img alt="" class="card responsive-img materialboxed image-box" src="https://sportishka.com/uploads/posts/2022-11/1667565684_4-sportishka-com-p-koralli-v-krasnom-more-krasivo-4.jpg"></div>
<div class="col s12 m6 l4"><img alt="" class="card responsive-img materialboxed image-box" src="https://vsetravel.ru/images/gallery/1417943245_DEN6219.jpg"></div>
<div class="col s12 m6 l4"><img alt="" class="card responsive-img materialboxed image-box" src="https://w-dog.ru/wallpapers/4/11/359837239766278/beatris-chiri-kupalnik-kamni-bereg.jpg"></div>
<div class="col s12 m6 l4"><img alt="" class="card responsive-img materialboxed image-box" src="https://mobimg.b-cdn.net/v3/fetch/c6/c63e738232ed0d16b2ff5e6756b0a243.jpeg"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
</script>
<script>
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
.header {
text-align: center;
font-family: 'Teko', sans-serif;
font-size: 50px;
}
.row-container_all {
display:flex;
flex-wrap: wrap;
}
.row-container {
/* margin: 0 auto; */
display:flex;
flex-wrap: wrap;
}
img.image-box {
max-width: 100%;
min-height: 270px;
}
<script>
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
0 Комментарии