Фильтруемая галерея изображений - это тип галереи изображений, который позволяет пользователям фильтровать или сортировать отображаемые изображения на основе определенных категорий или тегов. Это один из важнейших элементов современного веб-сайта, поскольку он позволяет пользователям легко находить интересующие их изображения без необходимости прокручивать длинный список изображений.

Создание фильтруемой галереи изображений с использованием HTML, Bootstrap и jаvascript может значительно улучшить ваши навыки веб-разработки. С помощью Bootstrap, популярного внешнего интерфейса, вы можете легко создавать адаптивные элементы веб-сайта, которые адаптируются к разным размерам экрана и устройствам.

Цель этой записи в блоге - предоставить вам подробное руководство о том, как создать фильтруемую галерею изображений, используя эти три основные технологии: HTML , Bootstrap и jаvascript . Пошаговые инструкции и четкие объяснения в этом посте помогут вам развить практическое понимание процесса создания фильтруемой галереи изображений.

HTML КОД:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css">

<div class="container">
      <!-- Images Filter Buttons Section -->
      <div class="row mt-5" id="filter-buttons">
        <div class="col-12">
          <button class="btn mb-2 me-1 active" data-filter="all">Show all</button>
          <button class="btn mb-2 mx-1" data-filter="nature">Nature</button>
          <button class="btn mb-2 mx-1" data-filter="cars">Cars</button>
          <button class="btn mb-2 mx-1" data-filter="people">People</button>
        </div>
      </div>
      <!-- Filterable Images / Cards Section -->
      <div class="row px-2 mt-4 gap-3" id="filterable-cards">
        <div class="card p-0" data-name="nature">
          <img src="images/nature-1.jpg" alt="img">
          <div class="card-body">
            <h6 class="card-title">Mountains</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="nature">
          <img src="images/nature-2.jpg" alt="img">
          <div class="card-body">
            <h6 class="card-title">Lights</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="nature">
          <img src="images/nature-3.jpg" alt="img">
          <div class="card-body">
            <h6 class="card-title">Nature</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="cars">
          <img src="images/car-1.jpg" alt="img">
          <div class="card-body">
            <h6 class="card-title">Retro</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="cars">
          <img src="images/car-2.jpg" alt="img">
          <div class="card-body">
            <h6 class="card-title">Fast</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="cars">
          <img src="images/car-3.jpg" alt="img">
          <div class="card-body">
            <h6 class="card-title">Classic</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="people">
          <img src="images/people-1.jpg" alt="img">
          <div class="card-body">
            <h6 class="card-title">Men</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
        <div class="card p-0" data-name="people">
          <img src="images/people-2.jpg" alt="img">
          <div class="card-body">
            <h6 class="card-title">Girl</h6>
            <p class="card-text">Lorem ipsum dolor..</p>
          </div>
        </div>
      </div>
    </div>

CSS КОД:

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  font-family: "Poppins", sans-serif;
}
body {
  background: #f1f1f1 !important;
}
body .container {
  max-width: 1100px;
}
#filter-buttons button {
  border-radius: 3px;
  background: #fff;
  border-color: transparent;
}
#filter-buttons button:hover {
  background: #ddd;
}
#filter-buttons button.active {
  color: #fff;
  background: #6c757d;
}
#filterable-cards .card {
  width: 15rem;
  border: 2px solid transparent;
}
#filterable-cards .card.hide {
  display: none;
}
@media (max-width: 600px) {
  #filterable-cards {
    justify-content: center;
  }
  #filterable-cards .card {
    width: calc(100% / 2 - 10px);
  }
}

jаvascript КОД:

// Select relevant HTML elements
const filterButtons = document.querySelectorAll("#filter-buttons button");
const filterableCards = document.querySelectorAll("#filterable-cards .card");

// Function to filter cards based on filter buttons
const filterCards = (e) => {
    document.querySelector("#filter-buttons .active").classList.remove("active");
    e.target.classList.add("active");

    filterableCards.forEach(card => {
        // show the card if it matches the clicked filter or show all cards if "all" filter is clicked
        if(card.dataset.name === e.target.dataset.filter || e.target.dataset.filter === "all") {
            return card.classList.replace("hide", "show");
        }
        card.classList.add("hide");
    });
}

filterButtons.forEach(button => button.addEventListener("click", filterCards));