Isotope filtering not working, what did I do wrong?

Question

You can see the web page here and inspect: https://gryddigital.com/portfolio.html

This is my html for the filters:

<div class="filters pb-2">
<ul class="list-inline text-center">
<li class="list-inline-item"><a data-filter="*" href="#" class="active">All</a></li>
<li class="list-inline-item"><a data-filter=".photo" href="#">Photography</a></li>
<li class="list-inline-item"><a data-filter=".stage" href="#">Virtual Staging</a></li>
</ul>
</div>

And this is my html for the gallery:

  <div class="gallery">

    <div class="container-fluid" data-toggle="modal" data-target="#exampleModal">

      <div class="row no-gutters">

        <div class="col-12 col-sm-6 col-lg-3 photo gallery-item gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/com_01_sm.jpg" data-target="#carouselExample" data-slide-to="0">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item photo gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_01_sm.jpg" data-target="#carouselExample" data-slide-to="1">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item photo gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_02_sm.jpg" data-target="#carouselExample" data-slide-to="2">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item photo gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_03_sm.jpg" data-target="#carouselExample" data-slide-to="3">
            <i class="fas fa-plus"></i>
        </div>

      </div>

      <div class="row no-gutters">

        <div class="col-12 col-sm-6 col-lg-3 gallery-item photo gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_04_sm.jpg" data-target="#carouselExample" data-slide-to="4">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item photo gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_05_sm.jpg" data-target="#carouselExample" data-slide-to="5">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item stage gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_06_sm.jpg" data-target="#carouselExample" data-slide-to="6">
            <i class="fas fa-plus"></i>
        </div>

        <div class="col-12 col-sm-6 col-lg-3 gallery-item stage gallery-hover">
            <img class="w-100 p-1" src="/images/portfolio/res_07_sm.jpg" data-target="#carouselExample" data-slide-to="7">
            <i class="fas fa-plus"></i>
        </div>

      </div>
    </div>
  </div>

And here is the JS:

var $grid = $('.gallery').imagesLoaded( function() {
$grid.isotope({
      // set itemSelector so .grid-sizer is not used in layout
      itemSelector: '.gallery-item',
      layoutMode: 'fitRows'
    })
  });

$(".filters ul li a").on('click', function() {
    $(".filters ul li a").removeClass("active");
    $(this).addClass("active");
    
    var selector = $(this).attr("data-filter");
    $grid.isotope({
       filter: selector    
    });
    return false
});

PLEASE HELP? Did I make a dumb mistake somewhere, Also, the filters were working before I implemented imagesloaded. but then the grid was all bunched up at the footer because it wasn't loading properly.

Answer 1

First things first, a mistake is only dumb if you don't learn from it.

Next I think the imagesLoaded may be the start of your issues, the script on the website page isn't loading. Since imagesLoaded is not defined, that means the function used as a callback will never run. Once that is fixed, you'll have a better idea of what debugging needs to occur.

You said the filters were working before imagesLoaded , but that the grid was all bunched up at the footer. This usually means that those images were loaded after isotope was done calculating the size of each element.

var $grid = $('.gallery').imagesLoaded(function() {
  $grid.isotope({
    // set itemSelector so .grid-sizer is not used in layout
    itemSelector: '.gallery-item',
    layoutMode: 'fitRows'
  });

// imagesLoaded returns a "deferred" object
// https://github.com/desandro/imagesloaded#jquery
// that we can chain to run
// a callback when everything is done
}).done(function() {

  // isotope now will recalculate the grid elements size 
  // https://isotope.metafizzy.co/methods.html#layout
  $grid.isotope('layout');
});

Once isotope recalculates, that should fix the issue of the images being bunched up.