Цель этой публикации в блоге - предоставить вам подробное руководство о том, как создать фильтруемую галерею изображений с использованием этих трех основных технологий: HTML, CSS и JavaScript. Пошаговые инструкции и четкие объяснения в этом посте помогут вам получить практическое понимание процесса создания фильтруемой галереи изображений.
Галерея изображений с возможностью фильтрации — это тип галереи изображений, который позволяет пользователям фильтровать или сортировать отображаемые изображения на основе определенных категорий или тегов. Это один из важнейших элементов современного веб-сайта, поскольку он позволяет пользователям легко находить интересующие их изображения без необходимости пролистывать длинный список изображений.
Создание фильтруемой галереи изображений с использованием HTML, CSS и JavaScript может значительно улучшить ваши навыки веб-разработки. С помощью Bootstrap, популярной интерфейсной платформы, вы можете легко создавать адаптивные элементы веб-сайта, которые адаптируются к различным размерам экрана и устройствам.
Шаги по созданию фильтруемой галереи изображений
Чтобы создать адаптивную галерею изображений с возможностью фильтрации в HTML, CSS и JavaScript, выполните следующие шаги построчно:
- Создайте папку. Вы можете назвать эту папку как угодно и внутри этой папки создать указанные файлы.
- Создайте файл index.html. Имя файла должно быть индексом и расширением .html.
- Создайте файл style.css. Имя файла должно быть стилем и расширением .css.
- Создайте файл script.js. Имя файла должно быть script и его расширение .js.
Для начала добавьте следующие HTML-коды в файл index.html, чтобы создать базовый макет для галереи изображений и вкладок фильтров.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<link href='https://monstertem.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<title>Automatic Popup</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<!--Font Awesome -->
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<!--Stylesheets-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!-- Filter Buttons -->
<div class="filter-buttons">
<button class="active" data-name="all">Show All</button>
<button data-name="phones">Phones</button>
<button data-name="clothes">Clothes</button>
<button data-name="shoes">Shoes</button>
</div>
<!-- Images Cards -->
<div class="filterable-cards">
<div class="card" data-name="phones">
<img src="images/phone-1.jpg" alt="">
<div class="card-body">
<h6 class="card-title">Phone</h6>
<p class="card-text">Lorem ipsum dollar...</p>
</div>
</div>
<div class="card" data-name="phones">
<img src="images/phone-2.jpg" alt="">
<div class="card-body">
<h6 class="card-title">Phone</h6>
<p class="card-text">Lorem ipsum dollar...</p>
</div>
</div>
<div class="card" data-name="clothes">
<img src="images/cloth-1.jpg" alt="">
<div class="card-body">
<h6 class="card-title">Cloth</h6>
<p class="card-text">Lorem ipsum dollar...</p>
</div>
</div>
<div class="card" data-name="clothes">
<img src="images/cloth-2.jpg" alt="">
<div class="card-body">
<h6 class="card-title">Cloth</h6>
<p class="card-text">Lorem ipsum dollar...</p>
</div>
</div>
<div class="card" data-name="clothes">
<img src="images/cloth-3.jpg" alt="">
<div class="card-body">
<h6 class="card-title">Cloth</h6>
<p class="card-text">Lorem ipsum dollar...</p>
</div>
</div>
<div class="card" data-name="shoes">
<img src="images/shoe-1.jpg" alt="">
<div class="card-body">
<h6 class="card-title">Shoe</h6>
<p class="card-text">Lorem ipsum dollar...</p>
</div>
</div>
<div class="card" data-name="shoes">
<img src="images/shoe-2.jpg" alt="">
<div class="card-body">
<h6 class="card-title">Shoe</h6>
<p class="card-text">Lorem ipsum dollar...</p>
</div>
</div>
</div>
</div>
<!--Script-->
<script src="js/script.js"></script>
</body>
</html>
Затем добавьте следующие коды CSS в файл style.css, чтобы стилизовать галерею изображений и сделать ее интерактивной и красивой.
/* Import Google fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', 'Roboto', sans-serif;
}
body {
min-height: 100vh;
background-color: #e7f2fd;
}
.container {
position: relative;
max-width: 1350px;
width: 100%;
padding: 20px;
margin: 50px auto;
}
.filter-buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
}
button {
padding: 10px 20px;
font-size: 18px;
background-color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
button.active {
background-color: #4070f4;
color:#fff;
}
.filterable-cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 25px;
}
.card {
flex-grow: 1;
flex-basis: 300px;
background-color: #fff;
padding: 5px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.card.hide {
display: none;
}
.card img {
width: 100%;
height: 210px;
object-fit: cover;
border-radius: 10px 10px 0 0;
}
.card-body {
padding: 15px 20px 20px;
}
.card-title {
font-size: 20px;
font-weight: 500;
color: #333;
}
.card-text {
font-size: 18px;
color: #333;
}
Наконец, добавьте следующий код JavaScript в файл script.js, чтобы сделать галерею изображений фильтруемой, когда пользователь нажимает на определенную вкладку фильтра.
// select all filter amd filterable cards
const filterButtons = document.querySelectorAll(".filter-buttons button");
const filterableCards = document.querySelectorAll(".filterable-cards .card");
// Define the filterCards function
const filterCards = e => {
document.querySelector(".active").classList.remove("active");
e.target.classList.add("active");
// Interate over each filterable card
filterableCards.forEach(card => {
card.classList.add("hide");
if (card.dataset.name === e.target.dataset.name || e.target.dataset.name === "all") {
card.classList.remove("hide");
}
});
};
// Add click event listener to each filter buttom
filterButtons.forEach(button => button.addEventListener("click", filterCards));
Заключительные слова
Я надеюсь, что эта запись в блоге предоставила вам необходимые знания для создания собственной галереи изображений с возможностью фильтрации с использованием HTML, CSS и JavaScript. Процесс кодирования был интуитивно понятным и простым для понимания, что позволяет вам адаптировать галерею к вашим конкретным потребностям.
Однако, если вы заинтересованы в изучении подхода, основанного на чистом CSS, HTML и JavaScript, я рекомендую заглянуть в мой блог о создании адаптивной фильтруемой галереи изображений с использованием этих технологий. Это предоставит вам альтернативный подход к достижению той же цели и позволит вам еще больше расширить свои навыки веб-разработки.
Если у вас возникнут какие-либо проблемы или ваш код не работает должным образом, вы можете бесплатно получить доступ к файлам исходного кода для этой фильтруемой галереи изображений. Просто нажмите кнопку СКАЧАТЬ, чтобы получить zip-файл, содержащий папку проекта со всеми необходимыми файлами исходного кода и изображениями.
0 Комментарии