Filtra e ordina il tuo portfolio con il plug-in Mixitup

Filtra e ordina il tuo portfolio con il plug-in Mixitup

Oggi realizzo insieme a voi un portfolio filtrabile con un menù che ti permetterà di suddividere il tuo portfolio in diverse categorie. Il portfolio sarà realizzato con codice Html, css3 e Jquery e utilizzeremo il plug-in MixItUp https://mixitup.kunkalabs.com.

MixItUp è un plugin Jquery che ti permette di animare, filtrare e classificare il tuo portfolio, gallerie immagini e blog in modo molto accattivante. Inoltre si interfaccia molto bene con il codice Html e Css creando layout responsive in quanto riconosce molto bene tag come misure relative, media queries, colonne css3 ecc.

Veniamo all’esempio che ho preparato per te. Ti spiego passo passo come organizzarlo. Ovviamente metto a disposizione la risorsa che ho creato per poterla scaricare e usare a tuo piacimento.

Inseriamo i file jquery all’interno del tag head.
Utilizziamo il sistema CDN per aggiungere jqury 1.10.0 e il plugin di MixItUp in modo da non caricare molto il nostro server:


Infine utilizziamo un piccolo script che richiama la libreria di MixItUp che richiama il contenitore del box in questo caso la classe portfolio:

<script type="text/javascript">

$(function(){
  $(‘#Portfolio').mixItUp();
});
</script>

Prima di creare il contenitore per le nostre immagini relizziamo il nostro menù filtrabile:

<div class="controls">
</div>

ed all’interno inseriamo i pulsanti con la classe “filter” e il data-attribute di html5 ” data-filter” che riconoscerà la classe appartenente alla categoria e filtrerà l’immagine all’interno di quella categoria.
Quindi:

<div class="controls”>
<label>Filter:</label>

  <button class="filter" data-filter="all">Tutti</button>
  <button class="filter" data-filter=“.loghi”>Loghi</button>
  <button class="filter" data-filter=“.cat”>Cataloghi</button>
  <button class="filter" data-filter=“.buss-card”>Business Cards</button>
  <button class="filter" data-filter=“.web”>Siti Web</button>
  <button class="filter" data-filter=“.identity”>Identity</button>

</div>

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “FILTRA E ORDINA IL TUO PORTFOLIO CON MIXITUP”—

Name *

Email *

alederobertis75
info@alessandraderobertis.it
No Comments

Post A Comment