Magnet ottimo plugin jQuery alternativo a Salvattore, Mansory e Isotope
Isotope, Salvattore e Mansory sono buone soluzioni per ottenere layout a griglia ma il mio preferito rimane di gran lunga Magnet 2 perché semplice da implementare, flessibile e facilmente integrabile in una griglia bootstrap.
I layout a griglia sono diventati popolari grazie a Pinterest: un trend sempreverde quando si tratta di visualizzare un portfolio o delle news con in mente i dispositivi mobili.
Le griglie hanno indubbiamente molti pregi: per esempio ci permettono di disporre elementi eterogenei in modo da sfruttare tutto lo spazio disponibile a prescindere dalle dimensioni dello schermo e al contempo ci aiutano a semplificare le interfacce predisponendo filtri per ordinare o raggruppare elementi.
Le principali caratteristiche di Magnet 2
- il plugin dispone di un’ottima documentazione di supporto che riporta esempi di codice per tutte le funzionalità della griglia
- viene garantito il supporto di IE11, Firefox, Safari, Opera, Chrome ed Edge
- Magnet mette a disposizione un sistema a griglia molto versatile e completo che permette sia di ordinare gli elementi e che di creare filtri dinamici
- Magnet nella sua seconda release è diventato indipendente da jQuery (si basa su Vanilla js) e può essere utilizzato sia adottando la sintassi di jQuery che con quest’ultimo.
- Per un utilizzo avanzato vengono messi a disposizione eventi e metodi molto granulari per tutte le esigenze
Come utilizzare subito Magnet
Magnet prevede una struttura HTML come la seguente:
1 2 3 4 5 | <div class="grid"> <div class="grid-item"> ... <div class="grid-item"> </div> |
Inizializzo il plugin così (sintassi jQuery):
1 2 3 4 | $('.grid').magnet({ itemSelector: '.grid-item', layoutMode: 'grid' }); |
così se uso vanilla js:
1 2 3 4 | var elem = document.querySelector('.grid'); var mgnt = new Magnet(elem, { itemSelector: '.grid-item' }); |
Se utilizziamo il plugin per un portfolio (gli elementi della griglia sono immagini) dobbiamo ricordarci di usare $(window).load in modo da utilizzare magnet solo quando tutte le foto sono state caricate (in questo caso consiglio di abbinare magnet ad un preloader), per box testuali è sufficiente $(document).ready:
1 2 3 4 5 6 7 | $(document).ready(function() { $('.grid').magnet(); }); $(window).load(function() { $('.grid').magnet(); }); |
Usiamo i filtri
Magnet permette di filtrare gli elementi di una griglia in modo semplice. E’ sufficiente applicare una classe che indichi la categoria di appartenenza dell’elemento ad es. “.frutta”:
1 2 3 4 5 6 7 | <div class="grid"> <div class="grid-item frutta"> <div class="grid-item frutta"> <div class="grid-item carne"> <div class="grid-item verdura"> <div class="grid-item pesce"> </div> |
Ora creiamo una pulsantiera dove ciascun bottone abbia uno specifico data-filter:
1 2 3 4 5 6 7 8 | <div class="button-group filter-group"> <button data-filter="*">Tutto</button> <button data-filter=".carne">Carne</button> <button data-filter=".pesce">Pesce</button> <button data-filter=".frutta">Frutta</button> <button data-filter=".verdura">Verdura</button> <button data-filter=".carne.pesce">Proteine</button> </div> |
E’ possibile combinare più classi per filtrare più categorie contemporaneamente. A questo punto si può creare uno script che applichi il filtro desiderato ad un evento click:
1 2 3 4 | $('.filter-group').click(function() { var filter = $(this).data('filter'); $('.grid').magnet({filter: filter}); }); |