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

```html

Protezione DDoS e Web Application Firewall: la nuova frontiera della Cyber Security

Nel contesto economico attuale, dove piattaforme web, portali eCommerce e applicazioni SaaS rappresentano il cuore operativo di molte aziende, la sicurezza informatica non può più limitarsi alla protezione perimetrale della rete.

Le minacce moderne prendono sempre più di mira lo strato applicativo (Layer 7), ovvero il ...

Disaster Recovery as a Service (DRaaS): La Nuova Frontiera della Business Continuity sotto la Direttiva NIS2

Nel 2026, la sicurezza informatica non è più un tema relegato esclusivamente alle sale server. È diventata una questione di governance, responsabilità legale e sopravvivenza sul mercato. Mentre molte aziende italiane si concentrano sulla difesa perimetrale per evitare intrusioni, spesso trascurano la domanda ...

Il tuo sito WordPress potrebbe essere vulnerabile. Anche se “sembra funzionare perfettamente”.

Molti attacchi non danno segnali immediati: lavorano in background, sfruttano vulnerabilità e colpiscono quando meno te lo aspetti.

La sicurezza non è qualcosa da sistemare dopo. È qualcosa da progettare prima.

Perché la sicurezza WordPress ...