In questa e nella prossima lezione analizzeremo da vicino due dei componenti Javascript di Foundation, quelli che abbiamo usato nella nostra demo, ovvero:
Rimandiamo alla lettura della documentazione ufficiale o prossimi aggiornamenti di questa guida per un'analisi degli altri plugin, non senza aver fatto una premessa. Nulla ci impedisce di usare altre soluzioni, sotto forma di script o plugin, per ciascuno di questi componenti. Per alcuni di essi, come Clearing, una sorta di Lightbox, vi sono decine di corrispettivi indubbiamente più efficaci e più gradevoli nello stile.
Per altri (tooltip, popover e box modali, dropdwown), il motivo principale che potrebbe portare ad usare quelli predefiniti di Foundation è la coerenza stilistica rispetto agli altri elementi del framework. La loro configurazione è estremamente semplice e riteniamo che la documentazione sia più che sufficiente per passare rapidamente dalla lettura alla pratica.
Realizzare slideshow responsive e pronti per il touch
Parlando di Orbit avremo modo di comprendere da vicino uno degli aspetti più interessanti introdotti con Foundation 4: l'insieme di API Javascript che consente di configurare i componenti senza scrivere nemmeno una riga di Javascript.
L'inizializzazione e persino la definizione delle opzioni può avvenire semplicemente attraverso classi HTML e l'uso di attributi data-. Oltre a ciò, la caratteristica più notevole di questo componente è quella di essere responsivo e adatto alla navigazione su dispositivi touch, dove la navigazione tra le immagini può avvenire attraverso il classico swipe.
La struttura di base di uno slideshow con Orbit è rappresentata da una lista ul. Ecco il codice usato per lo slideshow della nostra demo:
<ul data-orbit>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
</ul>Il prerequisito essenziale è che il tag ul sia accompagnato dall'attributo data-orbit. È come dire: "Sono una lista di immagini, ma voglio diventare uno slideshow con Orbit!".
Se si vuole aggiungere una didascalia per le immagini, bisogna inserire dopo il tag img un div.orbit-caption con il testo:
<li>
<img src="img/1.png" />
<div class="orbit-caption">Testo didascalia...</div>
</li>Possiamo anche creare slideshow con pannelli contenenti testo inserendo nei list item div, titoli, paragrafi, form e quant'altro (esempio):
<ul data-orbit>
<li>
<div class="pannello">
<h2>Headline 1</h2>
<h3>Subheadline</h3>
<p>Pellentesque habitant morbi...</p>
</div>
</li>
</ul>Configurazione e opzioni
Una volta creata la struttura nei modi che abbiamo visto, lo slideshow è pronto e funzionante, nel senso che si può avanzare tra le slide usando le frecce, i marcatori in basso o lo swipe sui dispositivi touch. Se però vogliamo attivare l'autoplay e iniziare lo scorrimento delle immagini quando la pagina viene caricata, dovremo inserire in fondo alla pagina questo piccolo snippet di Javascript, dove #slideshow è l'id che avremo assegnato alla lista ul:
<script type="text/javascript">
$(window).load(function() {
$('#slideshow').orbit();
});
</script>Potremmo completare questo script aggiungendo altre opzioni di configurazione, ma Foundation ci offre un metodo alternativo.
Sempre a livello del tag ul, possiamo inserire un attributo data-options e valorizzarlo con le opzioni che vogliamo impostare. La lista completa è disponibile sulla pagina della documentazione. Nel nostro slideshow abbiamo usato questi parametri:
<ul data-orbit id="slideshow"
data-options="timer_speed:3500; bullets:false;
pause_on_hover: true; resume_on_mouseout: true;">La velocità del timer è settata a 3500ms; con bullets: false eliminiamo i marcatori di navigazione in basso; infine, facciamo sì che lo slideshow vada in pausa sull'hover con il mouse e che riprenda a scorrere in loop quando il mouse viene spostato dalla sua area. Non c'è che dire, un sistema comodo ed efficace per passare parametri di configurazione!
Gestire i componenti di navigazione
Se riprendiamo per un attimo il codice usato per costruire il nostro slideshow
<ul data-orbit>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
</ul>viene da chiedersi da dove spuntino tutti i componenti per la navigazione tra le immagini che potete vedere in azione su questo secondo esempio.
Quel che avviene è che Foundation inserisce dinamicamente del codice HTML aggiuntivo per creare, appunto, gli strumenti di navigazione. Eccoli schematizzati in questa immagine:
E queste sono le classi associate a ciascuno:
<!-- Prev/Next Arrows -->
<a href="#" class="orbit-prev">Prev <span></span></a>
<a href="#" class="orbit-next">Next <span></span></a>
<!-- Slide Numbers -->
<div class="orbit-slide-number">
<span>1</span> of <span>3</span>
</div>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer">
</div>
<!-- Orbit Bullet Slide Indicator -->
<ol class="orbit-bullets">
...
</ol>Se si vuole usare Orbit nella sua configurazione di base non è necessario agire su di esse. Ma se l'idea è quella di personalizzare in qualche modo il componente sono dati fondamentali da conoscere. Ne parleremo nelle prossime lezioni.