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

Nella parte precedente della lezione abbiamo creato uno slideshow; nel mio caso, mostrava i dipendenti di un’organizzazione, ma tu potresti utilizzarlo, ad esempio, come banner nella testata del sito. Tuttavia, la soluzione predefinita non mi soddisfa: vorrei aggiungere dei pulsanti per passare al precedente e al successivo slide. Questo dà un aspetto molto più curato rispetto ai semplici link testuali o numerici di navigazione.

Ricordo che abbiamo già installato i moduli Views e Views Slideshow.

Bene, ho allegato alcune immagini di frecce: usiamole per il nostro slideshow. Prima di tutto, dobbiamo aggiungere un controllo di navigazione testuale per i pulsanti dello slideshow.

Ora il nostro slideshow deve mostrare i controlli “Next” (successivo) e “Previous” (precedente).

L’idea è di usare il CSS per aggiungere un’immagine di sfondo ai link “next” e “previous” e posizionarli nel punto desiderato all’interno del layout.

Per lavorare in modo più comodo, useremo un’estensione per Firefox chiamata Firebug, che fornisce ottimi strumenti per l’analisi e la modifica del CSS. Ecco come appare il blocco dei link di navigazione visto con Firebug:

Ci interessano gli attributi id degli elementi: sono quelli che useremo per definire gli stili CSS. Inoltre, ci serviranno le immagini delle frecce: copiale nella cartella images del tuo tema.

Dopo aver copiato i file delle frecce nella cartella images del tema, apriamo il file style.css e aggiungiamo il seguente codice. I valori possono essere adattati al layout del tuo tema.

a#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png'); /* immagine della freccia sinistra */
    width: 30px; /* larghezza della freccia */
    height: 0px; /* altezza impostata a 0 */
    padding-top: 30px; /* crea spazio equivalente alla larghezza */
    position: relative; /* posizione del link */
    top: 0px; /* distanza dal bordo superiore del blocco */
    overflow: hidden;
    z-index: 5; /* posiziona il link sopra lo slideshow */
    display: block; /* visualizza come blocco */
}

Il selettore a rappresenta un tag di link, mentre # indica che ci riferiamo a un elemento tramite il suo id.

Il CSS per la freccia “next” sarà simile, con piccole differenze:

a#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 30px;
    height: 0px;
    padding-top: 30px;
    position: relative;
    top: 0px;
    left: 30px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

Il link “pausa” può essere nascosto completamente:

a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}

I valori di padding e position possono essere regolati facilmente in tempo reale tramite Firebug e poi copiati nel file style.css. Alla fine, il mio CSS risulta così:

#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: -55px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}

#views_slideshow_singleframe_controls_view_slideshow-block_1 {
    height: 0px;
}

Il banner è pronto! Nella prossima parte della lezione creeremo una carosello jQuery.