Guida Isotope Filtering

Introduzione

Isotope è una libreria javascript che permette di filtrare e ordinare vari elementi. In questa guida vedremo come filtrarli.

Risorse

Prima di tutto importiamo nel nostro file .html il cdn:

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

Oppure lo script della libreria che potrete trovare qui: Isotope Metafizzy. Inoltre potete inizializzare Isotope con jquery.

Se userete jquery importatelo prima dello script di isotope

Struttura HTML

In questo esempio vedremo come filtrare vari box in base al colore.

Filtri

Definiamo ogni filtro come un <button> e ad ognuno aggiungiamo l'attributo data-filter="". In data-filter inseriremo il nome della classe degli item che verranno filtrati alla pressione del medesimo bottone.

Importante sottolineare che il nome della classe in data-filter è preceduto da un punto.

Per visualizzare tutti gli elementi senza filtri aggiungiamo un bottone con data-filter="*".

<div class="filter-button-group">
  <button data-filter="*">Show All</button>
  <button data-filter=".red">Red</button>
  <button data-filter=".blue">Blue</button>
  <button data-filter=".yellow">Yellow</button>
</div>

Griglia elementi

Inseriamo in un container con una classe specifica i vari item che filtreremo. Per ogni item inseriamo una classe che lo identificherà come un elemento da filtrare (in questo caso box). Inoltre aggiungiamo una classe che determinerà la categoria dell'elemento (red, yellow, blue):

<div class="griglia">
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box yellow"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
</div>

Inizializzazione

Inizializziamo il nostro Isotope in Javascript.

con Vanilla Javascript:

var grigliaElementi = document.querySelector('.griglia');
var iso = new Isotope( grigliaElementi, {
  // options
});

con Jquery (consigliato):

var $isotope = $('.griglia').isotope({
  // options
});

Dove ci sono i commenti //options potrete inserire varie opzioni e il layout per la griglia. Potete trovare tutte le informazioni su Isotope Metafizzy.
Tutte le opzioni sono facoltative ma è consigliato usare sempre itemSelector che non fa altro che specificare quali saranno gli elementi del layout.

Quindi per questo esempio:

var $isotope = $('.griglia').isotope({
    itemSelector: '.box',
});

Filtraggio

Aggiungiamo un evento ai bottoni che abbiamo settato in precedenza:

$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $isotope.isotope({ filter: filterValue });
});

Ogni volta che un <button> verrà clickato la variabile filterValue sarà impostata con la classe contenuta in data-filter del bottone e poi isotope filtrerà gli elementi per noi.

Un esempio pratico:

(Bonus) Griglia responsive e centrata

Vi capiterà di voler centrare la griglia degli elementi, per farlo il modo più semplice e efficace è inserire nelle opzioni del layout (di default) masonry l'opzione isFitWidth: true e impostare i margini della griglia su auto. Riprendiamo l'esempio precedente:

var $isotope = $('.griglia').isotope({
  masonry: {
    isFitWidth: true
  }
});

.griglia{
  margin: 0 auto;

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub