3.5.5. Views slideshow - Visualizza slideshow e caroselli jQuery tramite Views.

In Drupal 7 esistevano molti moduli per integrare diversi slideshow jQuery con Drupal. Probabilmente il più popolare e comodo era Views Slideshow. Nella versione 7 del modulo Views Slideshow c’era un solo difetto: non era responsive. Ora, nella versione 8, questo problema è stato risolto, quindi realizziamo lo slideshow proprio con Views Slideshow.

Per prima cosa, è necessario scaricare e installare il modulo Views Slideshow stesso, e sarà anche necessario abilitare il sottomodulo Views Slideshow Cycle:

https://www.drupal.org/project/views_slideshow

Avremo anche bisogno di librerie jQuery aggiuntive. Devono essere collocate nella cartella libraries. Se non hai ancora la cartella libraries nella radice del sito, creala.

/libraries/jquery.hoverIntent/jquery.hoverIntent.js

https://github.com/briancherne/jquery-hoverIntent

/libraries/jquery.cycle/jquery.cycle.all.js

http://malsup.github.io/jquery.cycle.all.js

/libraries/json2/json2.js

https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js

Ora che abbiamo aggiunto queste librerie, possiamo creare una View con output tramite Views Slideshow. Per iniziare, crea un tipo di contenuto o utilizza un tipo di contenuto esistente con un campo immagine. Ad esempio, io ho un tipo di contenuto Galleria con il campo Foto.

Ora crea una View e specifica nel formato di visualizzazione Views Slideshow (Slideshow):

Ora avremo uno slideshow con numerose impostazioni. Clicca su Settings nella colonna Format, e analizziamo insieme le funzionalità del modulo Views Slideshow.

Row class. L’impostazione predefinita per le righe della View è views-row, che in questo caso rappresenta una slide; qui puoi impostare una classe personalizzata per la slide.

Stile.
Skin. Qui puoi aggiungere e scegliere le opzioni di design per Views Slideshow. All’inizio è disponibile solo l’opzione predefinita, ma puoi installare moduli aggiuntivi per personalizzare il design di Views Slideshow.

https://www.drupal.org/node/909020

Slides.
Tipo di slideshow. Qui si sceglie il plugin jQuery tramite cui funzionerà Views Slideshow, ad esempio FlexSlider Views Slideshow:

https://www.drupal.org/project/flexslider_views_slideshow

Tipo di slideshow.
Qui troviamo le impostazioni di transizione tra le slide.

Effetto. Il passaggio tra le slide può avvenire con diversi effetti. Presta attenzione a scrollHorz: se lo imposti, lo slideshow assumerà l’aspetto di un carosello jQuery.

View Transition Advanced Options.

Timer delay. Tempo tra un cambio di slide e l’altro.

Speed. Durata diretta della transizione della slide.

Initial slide delay offset. Tempo di attesa prima dell’avvio del primo ritardo. Utile se il sito impiega tempo a caricarsi, in modo che l’utente possa vedere la prima slide prima che avvenga il cambio.

Random. Permette di mostrare le slide in ordine casuale.

Azione

Qui possiamo regolare la pausa nello slideshow, così come l’altezza dello stesso.

Pause On Click. Mette in pausa quando si clicca sulla slide.

Pause on mouse click. Ferma lo slideshow al clic.

View Action Advanced Options

Start Slideshow Paused. Lo slideshow non parte fino a quando la pausa non viene rimossa tramite passaggio del mouse o clic.

Start On Last Slide Viewed. Ricorda lo stato dello slideshow in modo che l’utente, tornando sulla pagina, veda di nuovo la slide corrente.

Pause When the Slideshow is Not Visible. Ferma lo slideshow se l’utente non lo vede. Utile per una landing page quando lo slideshow si trova a metà pagina.

End slideshow after last slide. Lo slideshow arriverà alla fine e non continuerà a scorrere.

Make the slide window height fit the largest slide. Impostazione interessante: le slide non hanno sempre la stessa altezza. Se l’altezza dello slideshow dipende da quella della slide, il contenuto sottostante si sposterà continuamente durante la transizione, risultando fastidioso. Tuttavia, se la differenza tra le slide è troppo grande, si creerà un grande spazio vuoto sotto lo slideshow. Perciò, cerca di mantenere le slide di altezza simile.

Items per slide. Puoi far apparire Views Slideshow come un carosello jQuery impostando qui, invece di 1, la visualizzazione di più slide contemporaneamente. Se aggiungi anche l’effetto scrollHorz (vedi sopra), avrai un effetto carosello completo.

Wait for all the slide images to load. Lo slideshow non passerà alla slide successiva finché tutte le immagini non saranno caricate. Se utilizzi immagini molto pesanti, forse è meglio disabilitare questa opzione.

Ottimizzazioni per Internet Explorer

Puoi ignorare queste impostazioni se non hai testo o colore di sfondo nello slideshow. Inoltre, funzionano solo in IE.

Advanced jQuery Cycle Plugin Settings. Per personalizzazioni aggiuntive del plugin jQuery Cycle, probabilmente realizzerò una lezione separata.

Widget. Puoi visualizzare i controlli di cambio slide sia in alto che in basso.

Controlli. Puoi includere i link di testo Next / Previous. Con un po’ di CSS aggiuntivo, puoi trasformarli in eleganti pulsanti avanti/indietro per rendere lo slideshow più gradevole. Vedremo la parte di styling di Views Slideshow nella lezione sulla creazione di un tema basato su Bootstrap.

Contatore delle slide. Mostra quante slide ci sono in totale e quale è attualmente visualizzata.

Pager. Con questa impostazione puoi creare dei punti di navigazione per il cambio delle slide. Per farlo, aggiungi il campo Views result counter all’output e seleziona questo campo nel Page Navigator. Vedremo anche come creare punti di navigazione nella lezione sulla tematizzazione Bootstrap per Drupal 8 e versioni successive.

Nel frattempo, puoi provare a creare uno slideshow basato su Views Slideshow. Se non ci riesci, puoi scriverlo nei commenti.