Sul web, si sa, ce n’è che ce n’è e in certe volte per caso si scoprono cose molto interessanti.
Ultimamente, mi sono trovato davanti un bellissimo script, che consente di realizzare una photogallery veramente accattivante. Il nome dello script è “The Wall”, è un plugin per Mootools e… fortunatamente veste bene un nome così altisonante. Scopriamolo insieme.
The Wall, consente di avere una murata scrollabile (drag & release) con le vostre foto, ordinatamente disposte una di fianco al’altra.
Altra interessante caratteristica è la possibilità di sovrapporre delle maschere, così come è facile notare sul sito del progetto, che offre anche un esaustivo ed 
elegante trailer nel quale è illustrato il funzionamento del tutto.
Ma andiamo al sodo.
Scaricati i files (li trovate sul sito ufficiale) e decompressi in una cartella su vostro spazio web, vi troverete davanti a una sottocartella Demos, all’interno della quale sono presenti due files d’esempio…trascrivendone il path per esteso sulla barra degli indirizzi del vostro browser, potrete vederli in azione.
Per personalizzare il tutto ed avere la vostra personale murata con le vostre immagini, dovrete innanzitutto ridimensionarle e numerarle progressivamente (pochi secondi per chi possiede un Mac :P), dopodichè caricarle sul vostro spazio web (io ho scelto di posizionarle in una sottocartella della root).
Andiamo avanti.
Aprite il file “01-wall.js”, all’interno della cartella assets, contenuta in Demos, e sovrascrivetene il contenuto col seguente codice:
var maxLength = 77; // Max Number images or array length
var counter = 1;
var wall = new Wall(“wall”, {
“width”:180,
“height”:180,
“rangex”:[-100,100],
“rangey”:[-100,100],
callOnUpdate: function(items){
items.each(function(e, i){
if( counter > maxLength ) counter = 1;
counter++;
var a = new Element(“img[src=path/dellevostre/immagini”+counter+”.jpg]”);
a.inject(e.node).fade(“hide”).fade(“in”);
// Reset counter
})
}
});
// Init Wall
wall.initWall();
[/spoiler]
Certamente avrete notato la presenza di alcuni parametri numerici, ovvero maxlenght, width ed height , i quali, nell’ordine, sono relativi al numero di files presenti nella vostra cartella (e che quindi vorrete mostrare) e alle dimensioni di quest’ultimi, espresse in pixel (io ho ridimensionato le immagini a 180px di lato). L’altro parametro da editare è il path delle immagini da mostrare (personalmente vi consiglio un path assoluto, per non avere problemi nelle fasi successive).
Non resta che indicare alla pagina principale (01-wall.html, ma rinominatela come preferite…), dove posizionare il nostro muro: raggiungete la stringa di inclusione dello script d’esempio (quello che mostrava i quadrati colorati) e “traslocatela” all’interno del div “wall”, et voilà il nostro muro è servito.
A scanso di equivoci, la riga è questa:
<script src=”assets/javascript/01-wall.js” type=”text/javascript” charset=”utf-8″> </script>
Vi invito a dare uno sguardo al file wall.js, contenuto all’interno della cartella “Sources”, per abilitare e modificare tutte le altre funzionalità offerte.
All’interno del sito ufficiale, trovate vari esempi di utilizzo di questo bellissimo script, inclusa la modalità con cui generare maschere come quella mostrata in alto. Unica nota di demerito per questo giovane progetto tricolore è il sito web, che -non mene voglia l’autore- a dispetto della magnifica cornice, offre delle spiegazioni eccessivamente stringate (personalmente ho impiegato 2 ore per venirne a capo) e talvolta incomplete…genio e sregolatezza!
Complimenti comunque al bravo Marco Dell’Anna per questo ottimo prodotto e …buon muro a tutti!
