DEVHIDE
Login Or Sign up

Why isn't the grid gallery Multi-filter not working?

52 Views Asked by At

The two main problems is that the subcategories are not being shown and the filtering of the images according to the classes is not working as well.

I was expecting to fiilter the images as follows:All, Urbanism, Architecture, and Interior. When you click on each of them it shows the subcategories, and it filters the images accordingly. This is to show whcih images belong to what, However, I don't know why it's not working.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AAC - Projects</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/bootstrap.bundle.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link
      rel="stylesheet"
      href="path/to/font-awesome/css/font-awesome.min.css"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="images/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="images/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="images/favicon-16x16.png"
    />
    <link rel="manifest" href="images/site.webmanifest" />
    <link href="styles/stylesheet.css" rel="stylesheet" />
    <link rel="stylesheet" href="styles/miragestylesheet.css" />
    <link rel="stylesheet" href="styles/projects.css" />
  </head>
  <body>
    <nav class="navbar fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="index.html">
          <img
            class="logo"
            src="images/aac BLACK GREY 2023.png"
            alt=""
            srcset=""
            style="width: 120px; height: 120px"
          />
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="offcanvas"
          data-bs-target="#offcanvasNavbar"
          aria-controls="offcanvasNavbar"
        >
          <div class="hamburger">
            <div class="top-bun"></div>
            <div class="meat"></div>
            <div class="bottom-bun"></div>
          </div>
        </button>
        <div
          class="offcanvas offcanvas-end"
          tabindex="-1"
          id="offcanvasNavbar"
          aria-labelledby="offcanvasNavbarLabel"
        >
          <div class="offcanvas-header">
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="offcanvas"
              aria-label="Close"
            ></button>
          </div>
          <div class="offcanvas-body">
            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="index.html"
                  >Home</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="projects.html">Projects</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="aboutus.html">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="news.html">News</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="career.html">Career</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="contact.html">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="futiristic.html">Futiristic</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>

    <div class="about_section">
      <br />
      <h1>projects</h1>

      <ul class="switcher">
        <li data-cat=".all" class="active">All</li>
        <li data-cat=".urb" id="show">
          Urbanism
          <ul class="switcher" id="content" style="display: none">
            <li data-cat=".cityscale">City Scale</li>
            <li data-cat=".residential">Residential</li>
            <li data-cat=".entertainment">Entertainment</li>
          </ul>
        </li>
        <li data-cat=".arch" id="showarch">
          Architecture
          <ul class="switcher" id="contentarch" style="display: none">
            <li data-cat=".adminstrative">Adminstrative</li>
            <li data-cat=".commercial">Commercial</li>
            <li data-cat=".hospitality">Hospitality</li>
            <li data-cat=".residential">Residential</li>
            <li data-cat=".educational">Educational</li>
            <li data-cat=".cultural">Cultural</li>
            <li data-cat=".entertainment">Entertainment</li>
            <li data-cat=".medical">Medical</li>
            <li data-cat=".religious">Religious</li>
            <li data-cat=".restoration">Restoration</li>
            <li data-cat=".infrastructure">Infrastructure</li>
          </ul>
        </li>
        <li data-cat=".int" id="showint">
          Interior Design
          <ul class="switcher" id="contentint" style="display: none">
            <li data-cat=".residential">Residential</li>
            <li data-cat=".commercial">Commercial</li>
            <li data-cat=".cultural">Cultural</li>
          </ul>
        </li>
      </ul>
    </div>

    <br />
    <br />

    <div class="container large">
      <div class="gallery">
        <a href="index.html"
          ><img
            class="all urb residential"
            src="images/1.jpg"
            alt="Sample photo"
        /></a>
        <a href="index.html"
          ><img
            class="all urb entertainment"
            src="images/1.jpg"
            alt="Sample photo"
        /></a>
        <a href="index.html"
          ><img
            class="all urb cityscale"
            src="images/12pp.jpg"
            alt="Sample photo"
        /></a>
      </div>
    </div>
    <div class="small">
      <main class="grid">
        <a href="index.html"
          ><img class="all urb cityscale" src="images/1.jpg" alt="Sample photo"
        /></a>
        <a href="index.html"
          ><img
            class="all urb residential"
            src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
            alt="Sample photo"
        /></a>
        <a href="index.html"
          ><img
            class="all urb entertainment"
            src="images/1.jpg"
            alt="Sample photo"
        /></a>
        <a href="index.html"
          ><img
            class="all arch"
            src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
            alt="Sample photo"
        /></a>
      </main>
    </div>

    <br />
    <br />
    <div class="footer">
      <div class="row">
        <div class="col-12">
          <a
            class="btn btn-outline-dark btn-floating m-1"
            href="https://wa.me/+201111007091?text=urlencodedtext"
            role="button"
            ><i class="fab fa-whatsapp" aria-hidden="true"></i
          ></a>

          <a
            class="btn btn-outline-dark btn-floating m-1"
            href="https://www.instagram.com/aac.consultant/"
            role="button"
            ><i class="fab fa-instagram"></i
          ></a>

          <!-- Linkedin -->
          <a
            class="btn btn-outline-dark btn-floating m-1"
            href="https://www.linkedin.com/company/arab-american-consultants/about/?viewAsMember=true"
            role="button"
            ><i class="fab fa-linkedin-in"></i
          ></a>
          <!-- Behance -->
          <a
            class="btn btn-outline-dark btn-floating m-1"
            href="https://www.behance.net/60fd0eab"
            role="button"
            ><i class="fa-brands fa-behance"></i
          ></a>

          <!-- Pinterest-->
          <a
            class="btn btn-outline-dark btn-floating m-1"
            href="https://www.pinterest.com/ArabAmericanConsultants/"
            role="button"
            ><i class="fa-brands fa-pinterest"></i
          ></a>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col-12" style="font-family: 'made_miragethin'">
          © 2023 Arab American Consultants . All Rights Reserved.
        </div>
        <br />
        <br />
      </div>
    </div>

    <script src="projects.js"></script>
  </body>
</html>

document.addEventListener("DOMContentLoaded", function () {
    let switcherLi = document.querySelectorAll(".switcher li");
    let imgs = document.querySelectorAll(".gallery img");
  
    switcherLi.forEach((li) => {
      li.addEventListener("click", () => {
        switcherLi.forEach((li) => li.classList.remove("active"));
        li.classList.add("active");
        filter(li.dataset.cat);
      });
    });
  
    function filter(category) {
      imgs.forEach((img) => {
        img.style.display = "none";
      });
  
      if (category === ".all") {
        imgs.forEach((img) => {
          img.style.display = "block";
        });
      } else {
        let subcategories = document.querySelector(`${category} ul`);
        if (subcategories) {
          subcategories.querySelectorAll("li").forEach((subcategory) => {
            let subcategoryType = subcategory.dataset.cat;
            document.querySelectorAll(subcategoryType).forEach((el) => {
              el.style.display = "block";
            });
          });
        } else {
          document.querySelectorAll(`${category}`).forEach((el) => {
            el.style.display = "block";
          });
        }
      }
    }
  });
  @import url("https://fonts.googleapis.com/css2?family=Advent+Pro&family=Amatic+SC&family=Bricolage+Grotesque:[email protected]&family=Cardo&family=Comfortaa:wght@300&family=Domine&family=Gruppo&family=Indie+Flower&family=Kodchasan:wght@300;500&family=Lato&family=Oswald&family=Playfair+Display+SC&family=Playfair+Display:wght@500&family=Roboto:wght@100&family=Rubik:ital,wght@1,300&family=Syncopate:wght@400;700&family=Urbanist&display=swap");

* {
  font-family: "laluxesserifw05-regularRg";
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MADEMirage-Thin";
  src: url("MADEMirage-Thin.ttf.woff") format("woff"),
    url("MADEMirage-Thin.ttf.svg#MADEMirage-Thin") format("svg"),
    url("MADEMirage-Thin.ttf.eot"),
    url("MADEMirage-Thin.ttf.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
p {
  font-family: "made_miragethin";
}
section {
  padding-top: 30px;
  height: 100vh;
  display: flex;
  justify-content: center;
  scroll-snap-align: start;
}
.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}
.navbar-brand {
  margin-right: 0;
}
.navbar-nav {
  align-items: center;
}
.navbar .navbar-nav .nav-link {
  color: black;
  font-size: 1.1em;
  padding: 0.5 1em;
}

.nav-item {
  font-size: 14px;
  font-weight: Regular;
}
.about_section {
  padding-top: 80px;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
  justify-content: center;
}
.about_section h1 {
  text-align: center;
}
.footer {
  text-align: center;
}

.gallery {
  --s: 150px; /* control the size */
  --g: 10px; /* control the gap */
  --f: 1.5; /* control the scale factor */
  width: 100vw;
  height: 100vh;
  display: grid;
  gap: var(--g);
  width: calc(7 * var(--s) + 6 * var(--g));
  aspect-ratio: 1;
  grid-template-columns: repeat(3, auto);
}
.gallery > a {
  display: contents;
}
.gallery img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(80%);
  transition: 0.35s linear;
}

.gallery img:hover {
  filter: grayscale(0);
  width: calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));
}

body {
  margin: 0;
  display: grid;
  place-content: center;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 700px) {
  div.large {
    display: none;
  }
}

/***** for mobiles *****/

@media (min-width: 699px) {
  .cont {
    display: none;
  }
}

@media (min-width: 699px) {
  div.small {
    display: none;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
}
.grid img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  margin-left: 5px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-content: center;
  gap: 10px;
}
.grid div {
  max-height: 300px;
}

.switcher {
  position: relative;
  margin: 0 auto;
  display: flex;
  list-style: none;
  width: fit-content;
  align-items: stretch;
  padding: 10px 10px;
  justify-content: space-evenly;
  width: 90vw;
}

.switcher li {
  border-radius: 4px;
  padding: 10px 10px;
  background-color: white;
  cursor: pointer;
  transition: 0.2s linear;
  font-size: 12px;
  user-select: none;
  margin: 5px;
  justify-content: center;
  align-items: center;
  display: flex;
  display: inline-block;

  cursor: pointer;
}

.content div {
  display: none;
  margin-top: 10px;
}

.switcher .switcher {
  position: absolute;
  z-index: 9999;
  width: 90vw;
  left: 0;
}

.switcher ul li ul {
  list-style-type: circle;
}

/* .navbar*/

.hamburger {
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 26px;
  cursor: pointer;
}
.hamburger div {
  align-self: flex-end;
  height: 2px;
  width: 100%;
  background-color: black;
  mix-blend-mode: difference;
}
.hamburger .meat {
  width: 70%;
  transition: all 200ms ease-in-out;
}
.hamburger .bottom-bun {
  width: 90%;
  transition: all 400ms ease-in-out;
}
.hamburger:hover div {
  width: 100%;
  background-color: black;
  mix-blend-mode: difference;
}
.hamburger:hover .top-bun {
  animation: burger-hover 1s infinite ease-in-out alternate;
}
.hamburger:hover .meat {
  animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;
}
.hamburger:hover .bottom-bun {
  animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;
}
@keyframes burger-hover {
  0% {
    width: 100%;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.switcher {
  position: relative;
  margin: 0 auto;
  display: flex;
  list-style: none;
  width: fit-content;
  align-items: stretch;
  padding: 10px 10px;
  justify-content: space-evenly;
  width: 90vw;
}

.switcher li {
  border-radius: 4px;
  padding: 10px 10px;
  background-color: white;
  cursor: pointer;
  transition: 0.2s linear;
  font-size: 12px;
  user-select: none;
  margin: 5px;
  justify-content: center;
  align-items: center;
  display: flex;
  display: inline-block;

  cursor: pointer;
}

.content div {
  display: none;
  margin-top: 10px;
}

.switcher .switcher {
  position: absolute;
  z-index: 9999;
  width: 90vw;
  left: 0;
}
javascript jquery filter nested-lists image-gallery
Original Q&A
1

There are 1 best solutions below

0
AG7 On

I think you forgot/missed something. All images' classes are urb, if you change them it works:

<div class="container large">
  <div class="gallery">
    <a href="index.html"
      ><img
        class="all urb residential"
        src="images/1.jpg"
        alt="Sample photo"
    /></a>
    <a href="index.html"
      ><img
        class="all arch entertainment"
        src="images/1.jpg"
        alt="Sample photo"
    /></a>
    <a href="index.html"
      ><img
        class="all int cityscale"
        src="images/12pp.jpg"
        alt="Sample photo"
    /></a>
  </div>
</div>
<div class="small">
  <main class="grid">
    <a href="index.html"
      ><img class="all urb cityscale" src="images/1.jpg" alt="Sample photo"
    /></a>
    <a href="index.html"
      ><img
        class="all arch residential"
        src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
        alt="Sample photo"
    /></a>
    <a href="index.html"
      ><img
        class="all int entertainment"
        src="images/1.jpg"
        alt="Sample photo"
    /></a>
    <a href="index.html"
      ><img
        class="all arch"
        src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
        alt="Sample photo"
    /></a>
  </main>
</div>

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in FILTER

Related Questions in NESTED-LISTS

Related Questions in IMAGE-GALLERY

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.