Is it possible to adapt a data filter to a defined grid so that all images appear in col-12 or at a specific size?

i have this good loking box grid

However, after adding a data filter and toggling between filters, the images appear in the same exact location and size as the grid that I designed. Is it feasible to have a data filter that displays all filtered images in one size? this is my grid code

 <div class="container">
  <div class="text-center">
      <button class="btn btn-default filter-button" data-filter="all">All</button>
      <button class="btn btn-default filter-button" data-filter="bootstrap">BootStrap</button>
      <button class="btn btn-default filter-button" data-filter="bootstrax">BootStrax</button>
      <button class="btn btn-default filter-button" data-filter="purecss">Pure CSS</button>
  </div>
  <div class="container container-box">
    <style>
      .container-box{
     width: 600px;  }
    </style>
      <div class="row">
        <div class="col-12"><img width="600" class="img-fluid pb-3 filter bootstrax " 
      src="./images/01.jpg" alt=""></div>
      </div>
      <div class="row g-3">
        <div class="col-4"><img width="200" class="img-fluid filter bootstrap" 
      src="./images/02.jpg" alt=""></div>
        <div class="col-4"><img width="200" class="img-fluid filter purecss" 
      src="./images/03.jpg" alt=""></div>
        <div class="col-4"><img width="200" class="img-fluid filter bootstrax" 
      src="./images/04.jpg" alt=""></div>
      </div>
      </div>
      </div>

           

$(document).ready(function() {
$(".filter-button").click(function(e) {
  var value = $(this).attr("data-filter");
  if (value == "all") {
    $(".filter").show("1000");
  } else {
    $(".filter").filter("." + value).show("3000");
    $(".filter").not("." + value).hide("3000");
  }
});

if ($(".filter-button").removeClass("active")) {
  $(this).removeClass("active");
}
$(this).addClass("active");
 });

Is it possible to achieve that outcome in js, css, and html? Alternatively, if somebody has a better suggestion, please enlighten me.

Answer

You can simply use isotop js library by adding the following cdn to your script area :

      <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

You can still have the nested gallery structure and use the data filter by using isotope, also the filtered images will show properly one beside the other, and of course you will still have the same grid structure that will not be affected.

<div class="container text-center pt-5">
<div class="row">
<div class="col-md-12">
  <div class="filters">
    <h4>Featured categories</h4>
    <ul>
      <li data-filter=".idea">Furniture <img class="dot" src="./images/dot.svg" 
      alt=""></li>
      <li data-filter=".ui">lighting <img class="dot" src="./images/dot.svg" 
      alt=""></li>
      <li data-filter=".ux">Accessories <img class="dot" src="./images/dot.svg" 
      alt=""></li>
      <li data-filter=".code">Tailor-made objects <img class="dot" 
      src="./images/dot.svg" alt=""></li>
      <li class="is-checked fp" data-filter="*">All</li>
    </ul>
  </div>
</div>

<div class="col-md-12">
  <div class="rows grid data-isotope='{ "itemSelector": ".grid-item", "masonry": 
    { "columnWidth": 200 } }'">
    <div class="col-md-12 grid-item code">
      <img class="img-fluid" src="./images/01.jpg" alt="">
    </div>
       <div class="col-md-4 grid-item ux ">
      <img class="img-fluid img-grid" src="./images/02.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item ui">
      <img class="img-fluid img-grid" src="./images/03.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item idea">
      <img class="img-fluid img-grid" src="./images/04.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item ux ">
      <img class="img-fluid img-grid" src="./images/02.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item ui">
      <img class="img-fluid img-grid" src="./images/03.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item idea">
      <img class="img-fluid img-grid" src="./images/04.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item ux ">
      <img class="img-fluid img-grid" src="./images/02.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item ui">
      <img class="img-fluid img-grid" src="./images/03.jpg" alt="">
    </div>
    <div class="col-md-4 grid-item idea">
      <img class="img-fluid img-grid" src="./images/04.jpg" alt="">
    </div>
  </div>
</div>

and use the following script as well

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

 // change is-checked class on buttons
 var $buttonGroup = $('.filters');
 $buttonGroup.on( 'click', 'li', function( event ) {
 $buttonGroup.find('.is-checked').removeClass('is-checked');
 var $button = $( event.currentTarget );
 $button.addClass('is-checked');
 var filterValue = $button.attr('data-filter');
 $grid.isotope({ filter: filterValue });
 });

Best of luck

Advertisement

Answer