Un plugin per jQuery che permetta di creare slider orizzontali con effetto fisarmonica: semplice, veloce e adattabile a diversi progetti.

Il plugin Easy Accordion nasce da questa esigenza.

Le origini

Tutto nasce dall’acquisto di Slidedeck (per 99$). Dopo averlo acquistato per un progetto su cui stavamo lavorando, ci siamo resi conto che non aveva la flessibilità che ci avrebbe fatto comodo.

Inoltre, il codice cifrato non ci permetteva di modificare lo script per modificare leggermente il comportamento dello slider.

Per questo – e per garantire il supporto a Internet Explorer 6 (esistono clienti per cui conta ancora quel browser e non si possono lasciare a piedi) abbiamo deciso di realizzare un nostro plugin per gestire slideshow orizzontali con effetto fisarmonica.

Easy Accordion: il plugin

Easy Accordion non è stato esattamente “easy” da creare, ma il risultato funziona molto bene ed è in grado di gestire qualunque tipologia di contenuto (testo semplice, immagini, liste, div, etc.).

Un ringraziamento speciale va a Andrew Thompson perché senza il suo prezioso aiuto saremmo probabilmente ancora in cerca della soluzione per far funzionare istanze multiple dello slider sulla stessa pagina.

Demo – GitHub

Come funziona?

Il plugin Easy Accordion prende le vostre definition lists (DTs) e genera un piacevole e funzionale slider orizzontale con effetto fisarmonica. Potete poi decidere se impostare un autoplay in modo da creare una slideshow a tempo oppure se lasciarlo statico.

Potete osservare il plugin Easy Accordion in azione qui.

Cosa introduce di nuovo?

Easy Accordion mantiene l’HTML al minimo, è ottimizzato per i motori di ricerca e completamente accessibile, utilizza i CSS per ruotare i titoli delle slide (non c’è bisogno di usare immagini), funziona in tutti i maggiori browser, consente di impostare l’autoplay, è opensource e completamente personalizzabile.

E, ciò che conta di più, è gratis.

Funzionalità

  • Create facilmente piacevoli e funzionali slider con effetto fisarmonica
  • Decidete se animare lo slider automaticamente oppure no
  • Inserite instanze multiple dello slider nella stessa pagina
  • Impostate la slide che si aprirà per prima quando l’utente carica la pagina
  • Scegliete se mantenere o rimuovere il numero delle slide
  • Il testo è ruotato grazie ai CSS
  • Easy Accordion è completamente personalizzabile attraverso i CSS: potete cambiare l’altezza, la larghezza, impostare bordi, padding, utilizzare immagini come background e molto altro ancora
  • Accessibile e SEO friendly
  • Potete gestire sottoforma di slide qualcunque tipo di contenuto (div, testo, immagini, liste, etc.)
  • Pesa meno di 8KB
  • Non dipende da altri plugin

Utilizzo

Di seguito trovate l’HTML per una semplice lista di definizioni inclusa all’interno di un DIV contenitore:

<div id="il-vostro-contenitore">
   <dl>
      <dt>Title slide</dt>
      <dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
      <dt>One more</dt>
      <dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
      <dt>Another slide</dt>
      <dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
   </dl>
</div>

Nella head del documento vanno inclusi tre file differenti: la libreria di jQuery, il plugin Easy Accordion e il file JavaScript dal quale attiveremo il plugin.

Se non sapete come fare a includere jQuery nelle vostre pagine trovate una spiegazione dettagliata in questo tutorial per jQuery.

Potete attivare il plugin utilizzando i numerosi selettori resi disponibili da jQuery.

Il plugin accetta diversi parametri in entrata.

Parametri

Assicuratevi di includere la vostra lista di definizioni (DT) all’interno di un DIV contenitore e di chiamare il plugin sul DIV e non direttamente sulla lista:

$('#il-vostro-contenitore').easyAccordion();

Se non passate alcun parametro il plugin produrrà per default un semplice slider con numero delle slide e senza autoplay. Per espandere le slide nascoste gli utenti dovranno cliccare sui rispettivi titoli.

Per impostare l’autoplay dovete semplicemente settare il parametro “autostart” su “true” e “slideInterval” (in millisecondi) su un qualunque numero come viene mostrato di seguito:

$('#il-vostro-contenitore').easyAccordion({
 autoStart: true,
 slideInterval: 5000
 });

In questo esempio il plugin cambierà slide ogni 5 secondi. Non appena sarà giunto all’ultima slide ripartirà dall’inizio. Se cliccate su uno dei titoli delle slide, la slideshow si ferma, permettendo all’utente di leggere con tranquillità il contenuto e di proseguire la navigazione delle slide in maniera autonoma.

Potete anche rimuovere il numero delle slide impostando il parametro “slideNum” su “false” come viene mostrato di seguito:

$('#il-vostro-contenitore').easyAccordion({
 autoStart: true,
 slideInterval: 3000,
 slideNum: false
 });

Personalizzare il CSS

Nella pagina demo troverete due diverse parti di CSS, evidenziate da commenti. La prima non dovrebbe essere modificata a meno che non siate più che sicuri di cio’ che state facendo. La seconda parte, invece, può essere cambiata al fine di personalizzare lo slider in base alle vostre necessità.

Supporto Browser

Il plugin Easy Accordion per jQuery è stato testato sui seguenti browser:
Firefox 3.5+, IE6/7/8, Safari 5+ e Google Chrome.

Conclusioni

Potete scaricare l’esempio della pagina demo qui (250KB – ZIP) oppure scaricare il file JavaScript del plugin.