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 qui.

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).

Ti potrebbero interessare

Perché condividere il tuo know-how su un blog?

Che senso ha dire tutto quello che sai sul blog ufficiale del tuo sito web? Te lo spieghiamo noi in poche parole.

Che senso ha dire tutto quello che sai sul blog ufficiale del tuo sito web? Non è forse pericoloso condividere con [...]

Come superare i competitor grazie a un buon blog?

Il contenuto è Re, ma come facciamo a mettergli davvero questa corona? L’unicità è l’unico segreto, altro che SEO

La SERP è una guerra che si vince con la buona SEO e, naturalmente, una scrittura fluida e [...]

Come integrare le newsletter al piano editoriale del blog

Rafforzare il piano editoriale del blog con una Newsletter

Hai mai pensato di integrare al tuo piano editoriale una newsletter? Sarebbe ora di cominciare se vuoi davvero far decollare il tuo progetto!

Ci sembrano obsolete e, più [...]

Cisco
DELL
Intel
NetApp
OnApp
Ripe