Una galleria di immagini con jQuery

Esistono molti modi di realizzare una galleria di immagini accattivante e funzionale. Sul web sono disponibili soluzioni gratuite e pronte all'uso, ottime se non vogliamo reinventare la ruota. Quel che manca, a volte, è il supporto necessario per integrare (e adattare) le soluzioni “per-confenzionate” nel nostro sito. Trattandosi di una questione pratica, discutiamo un esempio concreto, considerando la galleria di immagini disponibile a questo indirizzo.

Dopo aver scaricato i files del pacchetto in locale, la galleria dovrebbe già funzionare con delle immagini d'esempio. La struttura del pacchetto è la seguente

index.html (file)

style.css (file)

images (directory)

js (directory)

Se pensiamo di usare la galleria più volte nel sito, mantenendo invariato aspetto e funzionamento, vorremmo probabilmente cambiare questa struttura, per evitare di replicare la cartella js e il file style.css ogni volta che usiamo la galleria per un set di immagini diverse. Il vantaggio è centralizzare le risorse comuni per snellire la manutenzione del codice.

Modifichiamo il pacchetto come segue

• Rinominiamo la pagina index.html della galleria come slider.html, per evitare confusione ed ambiguità con la nostra index
• All'interno della sezione head della slider.html cambiamo il riferimento a style.css, indicando il percorso dove vogliamo centralizzare i CSS, ad esempio /css/slider.css. Ovviamente dobbiamo anche spostare (e probabilmente rinominare) il file style.css
• Sempre nella head della slider.html cambiamo i valori src degli elementi script, in modo da spostare le librerie Javascript in un unico punto del sito. Dobbiamo ovviamente anche spostare i files scripts.js e jquery.js, che potrebbero essere rinomati in modo più appropriato, diventando (ad esempio) slider.js e jquery-1.5.1.min.js. L'obbiettivo è quello di centralizzare gli scripts mettendoli dove teniamo tutte le risorse condivise (ad esempio nella cartella /scripts del nostro sito)
• Spostiamo in un posto più adatto, ad esempio /images/slider le quattro immagini condivise dalle varie istanze della galleria, che sono: header-bg.png, nav-bg.png, slide-bg.png e slide-nav.png. Dopodiché aggiustiamo gli url() nel file CSS delle proprietà background e background-image che puntano a queste quattro immagini
• Cambiamo i valori src delle immagini argomento della galleria, per puntare alle nostre immagini (vedere elementi img del file index.html aventi ID slide-img-1, slide-img-2 ecc.)

A questo punto, se ignoriamo la patch (tra l'altro inutile) per IE6, la struttura della nostra galleria di immagini è stata così ridotta

• Una pagina slider.html dove sono specificati i riferimenti alle nostre immagini (all'interno del div avente ID=slide-runner)
• La nostra serie di immagini, salvata da qualche parte nella directory /img, /images (o quello che è)
• Una serie di risorse integrate e centralizzate nel nostro sito, nella fattispecie gli scripts scripts.js e jquery.js (eventualmente rinominati), il file style.css (eventualmente rinominato) e le immagini di sfondo header-bg.png, nav-bg.png, slide-bg.png e slide-nav.png

La nuova configurazione ci permette di copiare la pagina slider.html tutte le volte che vogliamo, producendone una copia per ogni galleria che inseriamo sul sito: ogni copia sarà una sorta di istanza della galleria. Poi andremo a specificare i riferimenti alle immagini della specifica galleria. Infine potremo puntare direttamente alla pagina della galleria, o includerla come iframe

<iframe type="text/html" width="600px" height="330px"

scrolling="no" src="slider.html" frameborder="0"></iframe>

Avendo snellito l'architettura possiamo sfruttare meglio il software, ottenendo una nuova galleria ogni volta che personalizziamo una copia della slider.html.

Se dobbiamo adattare la galleria a gruppi di immagini con dimensioni diverse, dovremo usare una versione ad hoc del file style.css per ogni istanza della galleria. Le proprietà CSS da cambiare sono le seguenti

• Sostituire tutti i riferimenti alla width:993px; con la larghezza della nostra galleria
• Sostituire tutti i riferimenti alla height:299px; con l'altezza della nostra galleria (meno 1 pixel)
• Aggiustare il selettore div#header div#slide-holder div#slide-runner per inserire larghezza e altezza nostra galleria, entrambe ridotte di una ventina di pixels
• Aggiustare il selettore div#header div#slide-holder div#slide-controls per inserire larghezza della nostra galleria, ridotta di una ventina di pixels, e aggiustare il parametro bottom per sistemare i controlli di navigazione all'altezza che più ci piace

Ci vorrà forse un po' di pazienza e almeno mezz'ora di tempo per sistemare la galleria come vogliamo noi, ma il risultato è di gran lunga superiore a qualsiasi soluzione che potremmo scrivere “a manina” nello stesso tempo (mezz'ora).