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

Come scegliere un hosting WordPress per il tuo nuovo CMS

Come scegliere l’hosting WordPress per il tuo nuovo CMS

Aziende Italia offre un servizio di hosting di prima qualità per il tuo CMS WordPress con blog o sito web. Precisione, performance e assistenza.

Ogni professionista ti [...]

3 commenti che dovresti cancellare subito dal tuo blog

Come gestire al meglio i commenti sul tuo blog

Cancellare i commenti dal blog è un momento importante che non va sottovalutato. Ecco perché dovresti essere preparato...

Stiamo parlando di una delle merci più preziose dei blog, [...]

Server dedicati e cloud: quando un dedicato è più conveniente

Server dedicati vs Server cloud: quando un dedicato è migliore

Nel corso degli ultimi anni i sistemi cloud hanno cambiato in modo significativo l'erogazione dei servizi web. Grazie agli sviluppi della tecnologia oggi è possible [...]

Cisco
DELL
Intel
NetApp
OnApp
Ripe