Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Orbit, slideshow responsive e touch

Creare slideshow adatti a tutti gli schermi e azionabili con comandi touch come il classico swipe. Personalizzabili facilmente con classi HTML e "data-".
Creare slideshow adatti a tutti gli schermi e azionabili con comandi touch come il classico swipe. Personalizzabili facilmente con classi HTML e "data-".
Link copiato negli appunti

In questa e nella prossima lezione analizzeremo da vicino due dei componenti Javascript di Foundation, quelli che abbiamo usato nella nostra demo, ovvero:

  • Orbit (per lo slideshow all'inizio della pagina);
  • Section (per l'accordion in basso).

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:

Figura 1 - Componenti per la navigazione di Orbit
screenshot

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.

Ti consigliamo anche