Creazione di slideshow e caroselli jQuery in Drupal 7. Parte 1

Spesso è necessario — o semplicemente desiderabile — aggiungere un tocco di vivacità a un sito web. I siti realizzati su Drupal in una configurazione base tendono ad avere un aspetto statico e ordinario, ma possiamo renderli più originali, dinamici, colorati e accattivanti. Un buon modo per farlo è aggiungere un menu a discesa, delle pagine aggiornate dinamicamente o un banner animato nella testata del sito.

Le conoscenze di CSS ci aiuteranno molto: grazie a esso possiamo personalizzare il sito, modificarne la combinazione di colori e renderlo unico. Tuttavia, anche con i template standard “out of the box”, possiamo ottenere un sito più attraente, magari non perfetto, ma comunque migliore. Iniziamo con il banner.

In passato, i banner venivano creati quasi sempre come immagini .gif animate (che contenevano più frame) oppure in Flash. Le GIF richiedevano tempo per essere create e raramente offrivano un risultato visivamente accattivante come i banner in Flash. Tuttavia, anche Flash aveva i suoi difetti — ad esempio, il consumo eccessivo di risorse durante la visualizzazione.

Sarebbe stato possibile creare banner anche in JavaScript, ma richiedeva più tempo e la conoscenza del linguaggio. Con l’arrivo del framework jQuery, tutto è diventato molto più semplice e veloce — e non è più necessario conoscere JavaScript in dettaglio.

Ecco il sito di esempio che useremo per questa lezione:

Per cominciare, creiamo una nuova regione in cui inseriremo il blocco del banner.

Apriamo il file .info del nostro tema e, subito dopo la sezione con la definizione delle regioni, aggiungiamo il seguente codice:

regions[content] = Content 
regions[right] = Right sidebar 
regions[left] = Left sidebar 
regions[footer] = Footer

Aggiungiamo una nuova regione personalizzata per il banner:

regions[topbanner] = Top banner

Ora dobbiamo scegliere il tipo di banner che vogliamo. Se ci basta una semplice rotazione di immagini, possiamo realizzarla tramite il modulo Views Slideshow. Installiamo questo modulo insieme ai suoi sottomoduli Views Slideshow: SingleFrame e Views Slideshow: ThumbnailHover. Per funzionare, questi richiedono il modulo Views, che probabilmente è già installato.

Views Slideshow: SingleFrame — consente di realizzare una presentazione (slideshow) in un singolo blocco.
Views Slideshow: ThumbnailHover — consente di creare uno slideshow con miniature (thumbs) o con i titoli di ciascuna diapositiva come menu di navigazione.

Creiamo una nuova vista (View) e, nel campo Tags, scriviamo slideshow:

Ora aggiungiamo i campi (fields) che vogliamo visualizzare. Ad esempio, io aggiungerò il nome e cognome di un dipendente, la sua posizione e la sua foto. Tu puoi aggiungere il titolo (title) e il corpo (body) del nodo, se preferisci.

Nei filtri impostiamo: Contenuto: Pubblicato = Sì; Tipo di contenuto = Dipendente (oppure il tuo tipo, come Pagina, Articolo, ecc.).

Come criterio di ordinamento (Sort criteria) impostiamo: Nodo: Data di pubblicazione = Discendente.

Aggiungiamo una visualizzazione come blocco (Display: Block).

In Basic settings selezioniamo lo stile Style: Slideshow. Apparirà una finestra con le impostazioni dell’effetto; se non compare, clicca sull’icona dell’ingranaggio accanto a “Style: Slideshow”.

Le impostazioni principali dello slideshow per la modalità Slideshow mode: SingleFrame sono:

• Timer delay: intervallo in millisecondi tra una diapositiva e l’altra;
• Initial slide delay offset: tempo (in ms) prima del primo cambio di slide;
• Speed: velocità di transizione tra le slide;
• Controls: pulsanti testuali per navigare tra le slide;
• Pager: controlli numerici per passare da una slide all’altra;
• Image Counter: mostra il numero della slide corrente;
• Items per slide: numero di slide mostrate contemporaneamente;
• Effect: tipo di effetto visivo usato durante la transizione.

Per la modalità Slideshow mode: ThumbnailHover abbiamo invece:

• Main frame fields: campi visualizzati all’interno della slide;
• Breakout fields: campi mostrati nel menu dello slideshow (ad esempio miniature più piccole delle immagini principali);

Tutte le altre impostazioni sono identiche a quelle della modalità SingleFrame.

Dopo aver configurato la vista, salviamo. Se abbiamo creato una visualizzazione “Block”, possiamo ora assegnarla alla regione Top banner creata in precedenza.

Per personalizzare l’aspetto grafico del banner, sarà necessario modificare il file CSS — ad esempio style.css del tuo tema — in base alla palette di colori e al design del sito.

Nelle prossime parti della lezione realizzeremo i pulsanti di navigazione sotto forma di immagini, un banner jQuery senza moduli aggiuntivi e infine una carosello jQuery.