In questo articolo parliamo di Diapo, un plugin per jQuery che aiuta a creare slideshow completi e non semplicemente limitati alle immagini.
Il plugin è compatibile con la maggior parte dei browser in circolazione (tutti quelli più recenti) ed è supportato anche da Internet Explorer nelle sue versioni 7 ed 8. Il progetto è open-sourceInoltre l'autore del progetto, Manuel Masia, è italiano, il che ci inorgoglisce un po'.
Per un corretto funzionamento abbiamo bisogno di una versione di jQuery non inferiore alla 1.4. Alcune features inoltre richiedono altri plugins: jQuery Easing, jQuery HoverIntent e jQuery Mobile.
I risultati che si possono ottenere da questo plugin sono dei più vari:
- semplici slide con caption automaticamente implementate, mantenendo una sintassi piuttosto semplice;
- slide con più caption insieme, utili per presentare elementi quali notizie e relative anteprime o comunque elementi di questo genere;
- slide con al proprio interno ogni tipo di elemento HTML, inclusi pulsanti, form, media vari ed eventuali (oltre ovviamente alle immagini;
- diapositive contenenti al proprio interno dei video, in determinate modalità (nonostante la possibilità dell'uso di didascalie di presetazione in overlay);
- vere e proprie sezioni all'interno di una slide (particolarmente illustrativo è l'esempio sul sito ufficiale del progetto, dove viene presentato un servizio in vendita: in una sola slide un video di presentazione, del testo di prova e le tre soluzioni spiegate nel dettaglio);
Figura 1. Slideshow con effetto di transizione
(clic per ingrandire)
I metodi relativi presentati sono davvero pochi, ad un primo impatto. Tuttavia, una volta compresi si capisce che non ne servono altri:
| Metodo | Descrizione |
|---|---|
| diapo() | inizializza il plugin nella sua forma basilare |
| diapo("opzioni varie") | inizializza il plugin con opzioni ben definite e personalizzazioni, che vedremo più avanti nella pratica |
| diapoStop() | consente di collegare ad un qualsiasi controllo, o script, la funzione di stop della presentazione |
| diapoPlay() | in maniera opposta alla funzione precedente, permette di riprendere il ciclo di una presentazione precedentemente fermata o mai cominciata |
Tra le altre peculiarità piuttosto interessanti, inoltre, la possibilità di scegliere quali effetti utilizzare, distinguendo però l'esecuzione nel caso avvenga su un dispositivo mobile o meno, utilizzando un solo attributo in più.
Iniziamo quindi ad esaminare il plugin, scarichiamolo ed effettuiamo la prima prova pratica, per poi analizzare alcune delle di personalizzazioni possibili.
Installazione e primo test
Per rendere operativo al 100% Diapo occorre avere tutti i vari pre-requisiti pronti all'uso. Nel caso di questo articolo daremo per scontata la presenza non solo di jQuery, ma di tutti gli altri plugin consigliati dall'autore per attivare le varie features:
Per scaricarlo, invece, basta cliccare sulla scheda "Download" del sito ufficiale e successivamente selezionare "Download Diapo Slideshow", in modo tale da scaricare il pacchetto completo con tanto di demo per avere un aiuto in più.
Per rendere le cose più veloci ed evitare di trattare tematiche fuori dall'argomento, useremo i file forniti con l'esempio, inclusi nel pacchetto del download. Modificheremo solo il codice relativo al Javascript e l'HTML collegato. Ecco come si presenta, infatti, la prima pagina di prova.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>HTML.IT - Primo test con Diapo</title>
<meta name="viewport" content="width=960">
<link rel='stylesheet' id='style-css' href='diapo.css' type='text/css' media='all'>
<script type='text/javascript' src='scripts/jquery.min.js'></script>
<!--[if !IE]><!--><script type='text/javascript' src='scripts/jquery.mobile-1.0b2.min.js'></script><!--<![endif]-->
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='scripts/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='scripts/diapo.js'></script>
<script>
$(function(){
$('.pix_diapo').diapo();
});
</script>
<style>
body { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
line-height: 20px; }
section { display: block; overflow: hidden; position: relative; }
</style>
</head>
<body>
<section>
<div style="overflow:hidden; width:960px; margin: 100px auto; padding:0 20px;">
<div class="pix_diapo">
<div data-thumb="images/thumbs/megamind1048.jpg">
<img src="images/slides/megamind1048.jpg" />
<div class="caption elemHover fromLeft">
Prima immagine di prova con relativa didascalia.
</div>
</div>
<div data-thumb="images/thumbs/megamind_07.jpg">
<img src="images/slides/megamind_07.jpg" />
</div>
<div data-thumb="images/thumbs/up-official-trailer-fake.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
<div class="elemHover caption fromLeft elemToHide">Didascalia del video (anche se adesso ad essere mostrata è l'immagine "data-fake").</div>
</div>
</div>
</div>
</section>
</body>
</html>Per quanto riguarda la sezione head, dopo aver richiamato jQuery e i vari script di supporto precedentemente menzionati, si richiama con la stessa direttiva anche il file diapo.js. A quel punto, viene lanciato il metodo principale "diapo()" sul tag html che presenta la classe pix_diapo. Tutto sarà automaticamente costruito su questo elemento.
Analizziamo adesso le tre slide di questo esempio: la prima è una semplice slide "classica" composta da testo e relativa immagine. Il testo viene mostrato in overlay rispetto all'immagine e tutto viene "indicato" tramite il semplice codice HTML.
Prima slide base.html:
<div data-thumb="images/thumbs/megamind1048.jpg">
<img src="images/slides/megamind1048.jpg">
<div class="caption elemHover fromLeft">
Prima immagine di prova con relativa didascalia.
</div>
</div>L'attributo data-thumb che viene dato al div principale della diapositiva serve ad identificare il file da usare come thumbnail per l'immagine vera e propria. All'interno, invece, trovano posto in sequenza il file immagine (il tag "img" senza specifiche aggiuntive) e il tag div con classe "caption", che rappresenta la didascalia da aggiungere alla slide.
Passiamo quindi alla seconda slide, decisamente più semplice della precedente, che presenta solo una semplice immagine. Il codice riportato di seguito è molto facile da capire, e non ha bisogno di commenti ulteriori.
Seconda slide
<div data-thumb="images/thumbs/megamind_07.jpg">
<img src="images/slides/megamind_07.jpg">
</div>Arriviamo quindi alla terza slide, al cui interno trova posto un video. Tra i contenuti che è possibile inserire in una slide, infatti, si trovano anche i video, che hanno bisogno però di un "fake". Anzi, per essere precisi, tutti gli elementi "iframe" e "object" hanno bisogno di un'immagine che li sostituisca durante le varie transizioni.
Terza slide
<div data-thumb="images/thumbs/up-official-trailer-fake.jpg">
<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>
<div class="elemHover caption fromLeft elemToHide">
Didascalia del video (anche se adesso ad essere mostrata è l'immagine "data-fake").
</div>
</div>L'elemento "fake" del quale parliamo viene specificato nell'attributo data-fake all'interno del tag interessato. Il nostro primo slideshow è concluso: con pochissimo codice abbiamo raggiunto già un risultato assolutamente non indifferente. Tuttavia, questo non ci basta.
Le opzioni del plugin
Vediamo come operare direttamente sulle opzioni, in modo tale da decidere ogni singolo aspetto della presentazione.
Come già detto in precedenza, esistono due metodi "principali" per richiamare diapo al suo dovere. Quello basilare, nella forma "diapo();" oppure quello più complesso, che consente di ricevere in input parametri di vario genere. Dagli effetti di transizione al selettore predefinito, passando per il tipo di loader e tempistiche.
Effetti di transizione
Il parametro "fx" permette di selezionare l'effetto di transizione da una diapositiva all'altra. C'è parecchia scelta: si può optare per un "fade", oppure per un'alternativa più complessa. Sperimentare è il modo migliore per trovare l'effetto giusto e sul sito ufficiale vi è la lista completa, che ne elenca più di venti (al momento ventiquattro). Gli effetti si possono anche combinare oppure si può scegliere di mostrarne uno scelto a caso, inserendo la parola chiave "random" come valore.
"mobileFx": come già anticipato in precedenza, questa opzione permette di cambiare l'effetto utilizzato quando il sito è visualizzato su un dispositivo mobile. Particolarmente utile se si vuole alleggerire la versione mobile del sito, lasciando sulla versione "Web" gli effetti più interessanti;
Loader
Il loader è l'elemento visuale che viene visualizzato in fase di caricamento delle immagini e dei media inclusi nelle slide. Può avere una forma a torta (la parola chiave in questo caso è "pie") oppure una più tradizionale barra ("bar").
Possiamo però modificare molte delle caratteristiche del loader: l'opacità (tramite loaderOpacity), i colori primari o dello sfondo (loaderColor e loaderBgColor), senza considerare i parametri "specifici" per ogni tipo di loader, come "pieDiameter", "piePosition", "barStroke", "barPosition" e così via.
Timer
Il parametro time consente di impostare il tempo che intercorre tra la fine di un effetto e l'inizio del successivo. In poche parole permette di decidere quanto tempo deve intercorrere tra una diapositiva e l'altra. Se invece si vuole bloccare Diapo, allora bisognerà impostare l'opzione "autoAdvance" su "false".
Tramite l'opzione "mobileAutoAdvance", inoltre, si può personalizzare l'andamento per il sito quando è visualizzato su dispositivi mobili.
Anteprime
Il parametro thumbs permette di specificare se per ogni diapositiva deve essere mostrata anche l'anteprima (dove disponibile) oppure se è possibile farne a meno. Può assumere i valori true oppure false.
Eventi
Per garantire una personalizzazione massima, infine, non mancano gli event handler dedicati ("onStartLoading", "onLoaded", "onEnterSlide", "onStartTransition", i cui nomi parlano da soli sullo scopo) che permettono di definire azioni da compiere in ogni momento dell'esecuzione.
In conclusione un buon prodotto, all'altezza (se non migliore) di molte altre soluzioni analoghe attualmente in circolazione.
