CODEWITHSUNDEEP
filterinitializationjquery-isotope
Paulius Vitkus
Paulius Vitkus

Reputation: 129

Initialize filtered items in Isotope

I have a problem with Isotope plugin (jQuery). I want to initialize plugin with already filtered items. I have seen some post on this topic, but answers were not clear.

This is my code:

<div class="filters">
  <div class="ui-group">
    <div class="button-group js-radio-button-group" data-filter-group="gender">
      <button class="button is-checked" data-filter="">BOTH</button>
      <button class="button" data-filter=".female">FEMALE</button>
      <button class="button" data-filter=".male">MALE</button>
    </div>
  </div>
</div>

That's my items:

<div class="grid">
  <div class="colar-shape female">1</div>
  <div class="colar-shape male">2</div>
  <div class="colar-shape female">3</div>
  <div class="colar-shape male">4</div>
  <div class="colar-shape female">5</div>
</div>

Finally, initialization code in JS:

$(document).ready( function() {
  // init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.color-shape',
    layoutMode: 'fitRows'
  });

  // store filter for each group
  var filters = {};

  $('.filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

So, how to load divs 1, 3 and 5 when page is loaded?

Thank you very much!

Upvotes: 1

Views: 1102

Answers (1)

Macsupport
Macsupport

Reputation: 5444

This should work:

 // init Isotope
 var $grid = $('.grid').isotope({
 itemSelector: '.color-shape',
 layoutMode: 'fitRows',
 filter: '.female'
 });

Upvotes: 2

Related Questions