In questo articolo vedremo come creare un portfolio con jQuery e aggiungervi un filtro per categorie. Come vedrete, il codice è incredibilmente semplice una volta che abbiamo compreso il rapporto esistente tra i link del menu delle categorie e i link delle anteprime dei siti. Vediamo insieme i dettagli.
La marcatura è la seguente:
<div id="portfolio">
<ul id="categories">
<li><strong>Categorie:</strong></li>
<li><a href="#" rel="sport">Sport</a></li>
<li><a href="#" rel="print">Servizi per la stampa</a></li>
<li><a href="#" rel="culture">Cultura</a></li>
<li><a href="#" rel="company">Gruppi societari</a></li>
</ul>
<ul id="showcase">
<li>
<a href="http://www.linea4office.com/" class="print">
<img src="linea4office.jpg" alt="Linea4 Office" />
</a>
</li>
<li>
<a href="http://www.icosfitness.com/" class="sport">
<img src="icosfitness.jpg" alt="Icosfitness" />
</a>
</li>
<li>
<a href="http://www.btmagazine.it/" class="company">
<img src="btmagazine.jpg" alt="BT Magazine" />
</a>
</li>
<li>
<a href="http://www.nicolacolecchia.it/" class="culture">
<img src="nicolacolecchia.jpg" alt="Nicola Colecchia" />
</a>
</li>
</ul>
</div>
Il trucco, se così vogliamo chiamarlo, è semplice: il valore dell'attributo rel dei link delle categorie corrisponde al valore delle classi CSS impostate sui link delle anteprime.
Saputo questo, possiamo filtrare i risultati con un ciclo jQuery che riduce l'opacità di quegli elementi i cui link non hanno la classe CSS specificata:
var Portfolio = new function() {
var categories = $('li', '#categories').not(':first');
var showCases = $('li', '#showcase');
this.init = function() {
categories.each(function() {
var $li = $(this);
var $a = $('a', $li);
var rel = $a.attr('rel');
$a.click(function(event) {
showCases.css('opacity', 1);
showCases.each(function() {
var showCase = $('a', $(this));
if(!showCase.hasClass(rel)) {
$(this).css('opacity', 0.5);
}
});
event.preventDefault();
});
});
};
}();
Usiamo il metodo hasClass() per verificare se gli elementi hanno o meno la classe CSS del link corrispondente delle categorie. Il nostro codice viene usato nel seguente modo quando il DOM ha ultimato il suo caricamento:
$(function() {
Portfolio.init();
});
Potete visionare l'esempio finale in questa pagina.