Click here to Skip to main content
15,903,012 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,
I am trying to place multiple masonry layouts on one page using THIS as a guide

HTML
<div class="filters">
  <div class="ui-group">
    <h3>Color</h3>
    <select class="filter-select" value-group="color">
      <option value="">any</option>
      <option value=".red">red</option>
      <option value=".blue">blue</option>
      <option value=".yellow">yellow</option>
    </select>
  </div>
</div>

  <div class="grid">
    <div class="color-shape red"></div>
    <div class="color-shape blue"></div>
    <div class="color-shape yellow"></div>
  </div>



<div class="filters">
  <div class="ui-group">
    <h3>Size</h3>
      <select class="filter-select" value-group="size">
        <option value="">any</option>
        <option value=".small">small</option>
        <option value=".wide">wide</option>
        <option value=".big">big</option>
        <option value=".tall">tall</option>
      </select>
    </div>
<div>

<div class="grid2">
  <div class="color-shape2 small"></div>
  <div class="color-shape2 big"></div>
  <div class="color-shape2 small"></div>
</div>


...but am wondering how to edit the javascript in the example link


JavaScript
// external js: isotope.pkgd.js

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

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

$('.filters').on( 'change', function( event ) {
  var $select = $( event.target );
  // get group key
  var filterGroup = $select.attr('value-group');
  // set filter for group
  filters[ filterGroup ] = event.target.value;
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

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


...just started to learn Javascript but tried

JavaScript
// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.color-shape'
});
var $grid2 = $('.grid2').isotope({
  itemSelector: '.color-shape2'
});

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

$('.filters').on( 'change', function( event ) {
  var $select = $( event.target );
  // get group key
  var filterGroup = $select.attr('value-group');
  // set filter for group
  filters[ filterGroup ] = event.target.value;
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

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


Hoping someone could help out. Goal is to be able to add more than 2 select/dropdown sortable galleries working independently of one another without the sorting conflicting.

This is as far as I got: My TEST

Thanks

What I have tried:

This is as far as I got: https://codepen.io/howster1976/pen/RwBxbdo
Posted
Updated 19-Jan-23 22:03pm
v3

In order for you to create your own objects/elements, you need to study the example thoroughly.

Your current Javascript code is only an initiation of -
isotope.pkgd.js


I would suggest to read all of the documentation pertaining to this file first to get a better understanding of its operations, which in turn will ensure you create the object you expect.

I found THIS link with reasonable easy step by step explanations.
 
Share this answer
 
Thanks. Yes I'm aware of that domain but it doesn't cover multiple select masonry galleries on 1 page.
 
Share this answer
 
Comments
Richard Deeming 20-Jan-23 6:07am    
If you want to reply to a solution, click the "Have a Question or Comment?" button under that solution and post a comment.

Do not post your comment as another "solution" to your question.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900