Skip to content
Advertisement

When click then adding the active class but Isotope.js filter not working

I am using isotope plugin. According to documentation, I tried the below code but it’s not working. When I click on then it’s adding the active class but filter not working.

Can you help me out where is the issue in this?

$('.grid-container-projects').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});
$('.categoryGrid ul li').click(function() {
  $('.categoryGrid ul li').removeClass('active');
  $(this).addClass('active');

  var selector = $(this).attr('data-filter');
  //alert(selector);
  $('.grid-container-projects').isotope({
    // options
    itemSelector: selector
  });

  return false;
});
.categoryGrid ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.categoryGrid ul li {
  background-color: #dd223d;
  color: #fff;
  padding: 10px 30px;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.grid-container-projects {
  width: 100%;
}

.grid-container-projects .grid-item {
  text-align: center;
  height: 300px;
  width: 31%;
  margin-right: 15px;
  margin-bottom: 15px;
}

.projectsListbg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.2);
}

.grid-container-projects h3,
.grid-container-projects h5 {
  color: #fff;
}
<div class="categoryGrid">
  <ul>
    <li class="active" data-filter="*">All</li>
    <li data-filter=".home">Home</li>
    <li data-filter=".music">Music</li>
    <li data-filter=".projects">Projects</li>
    <li data-filter=".uncategorized">Uncategorized</li>
  </ul>

  <div class="grid-container-projects">
    <div class="grid-item home">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1558478551-1a378f63328e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 1</h3>
            <h5>Home</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item music">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642531955-b62e17bdaa9c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 2</h3>
            <h5>Music</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item home">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 3</h3>
            <h5>Home</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item projects">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1565728744382-61accd4aa148?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 4</h3>
            <h5>Projects</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item music">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/flagged/photo-1576697010744-a40aedd2dcca?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 5</h3>
            <h5>Music</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item projects">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1585832770485-e68a5dbfad52?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 6</h3>
            <h5>Projects</h5>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

Advertisement

Answer

I think you used wrong documentation. Use this one for jQuery : https://isotope.metafizzy.co/filtering.html

var $grid = $('.grid-container-projects').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

// filter items on button click
$('.categoryGrid ul li').click(function() {
  $('.categoryGrid ul li').removeClass('active');
  $(this).addClass('active');
  
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});
.categoryGrid ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.categoryGrid ul li {
  background-color: #dd223d;
  color: #fff;
  padding: 10px 30px;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.grid-container-projects {
  width: 100%;
}

.grid-container-projects .grid-item {
  text-align: center;
  height: 300px;
  width: 31%;
  margin-right: 15px;
  margin-bottom: 15px;
}

.projectsListbg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 11px 0 rgba(0, 0, 0, 0.2);
}

.grid-container-projects h3,
.grid-container-projects h5 {
  color: #fff;
}
<div class="categoryGrid">
  <ul>
    <li class="active" data-filter="*">All</li>
    <li data-filter=".home">Home</li>
    <li data-filter=".music">Music</li>
    <li data-filter=".projects">Projects</li>
    <li data-filter=".uncategorized">Uncategorized</li>
  </ul>

  <div class="grid-container-projects">
    <div class="grid-item home">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1558478551-1a378f63328e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 1</h3>
            <h5>Home</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item music">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642531955-b62e17bdaa9c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 2</h3>
            <h5>Music</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item home">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 3</h3>
            <h5>Home</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item projects">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1565728744382-61accd4aa148?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 4</h3>
            <h5>Projects</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item music">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/flagged/photo-1576697010744-a40aedd2dcca?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 5</h3>
            <h5>Music</h5>
          </div>
        </div>
      </a>
    </div>
    <div class="grid-item projects">
      <a href="javascript:void(0);">
        <div class="projectsListbg" style="background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(https://images.unsplash.com/photo-1585832770485-e68a5dbfad52?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60)">
          <div class="projectContent">
            <h3>Demo 6</h3>
            <h5>Projects</h5>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
SKJ
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement