Ci sono alcuni validi motivi per cui non è sempre consigliabile il ricorso ad "ammennicoli" JavaScript: dopo un'analisi attenta si rivelano non sempre utili, a volte si possono trovare soluzioni alternative altrettanto funzionali, non sempre danno garanzie di sviluppi futuri o correzione di bug e non sempre sono abbastanza flessibili per le nostre esigenze di sviluppo.
Step Carousel Viewer
Per inserire una galleria JavaScript scorrevole in un CMS open-source cercavo una galleria che fosse compatibile con il framework jQuery, che fosse leggera, facile da implementare e personalizzabile. Di gallerie di questo tipo ce ne sono tantissime, ma dopo un po’ di ricerche mi sono soffermato a testare Step Carousel Viewer.
Le specifiche sembravano buone: solo 18KB, tag non intrusivi, funzioni ben personalizzabili.
Installazione
Il primo passo è scaricare jQuery e incorporarlo nell’head della pagina:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>Altrettanto facciamo per lo script Step Carousel Viewer dal sito http://www.dynamicdrive.com/ (per motivi di copyright vanno lasciati i commenti nel tag script).
<script type="text/javascript" src="js/stepcarousel.js">
/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library
(www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>La parte HTML
Quindi si passa al codice HTML per definire la struttura della gallery scorrevole:
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel"><img src="ima/demo.jpg" /></div>
<div class="panel"><img src="ima/demo.jpg" /></div>
<div class="panel"><img src="ima/demo.jpg" /></div>
<div class="panel"><img src="ima/demo.jpg" /></div>
<div class="panel"><img src="ima/demo.jpg" /></div>
</div>
</div><!--/stepcarousel-->CSS di base
Proseguiamo con il codice CSS. Sul sito ufficiale è inserito in linea, ma è preferibile inserirlo in un CSS esterno, più facile da modificare successivamente e più ordinato:
.stepcarousel { position: relative;
border: 10px solid black;
overflow: scroll;
width: 270px; height: 200px; }
.stepcarousel .belt { position: absolute;
left: 0; top: 0; }
.stepcarousel .panel { float: left;
overflow: hidden;
margin: 10px; /* Margine attorno ai pannelli */
width: 250px; /* Larghezza di ogni pannello, */
/* se rimosso ogni larghezza viene */
/* adattata automaticamente al contenuto. */
}Extra
Nelle ultime versioni sono state aggiunte nuove funzioni:
<p>
<strong>Pannello attuale:</strong>
<span id="statusA"></span>
<strong style="margin-left: 30px">Pannelli totali:</strong>
<span id="statusC"></span>
</p>Con gli ID statusA, statusB, statusC applicati a degli <span> vuoti otteniamo delle variabili numeriche che indicano rispettivamente il numero del primo pannello visualizzato, il numero dell'ultimo pannello visualizzato e i pannelli totali. Utile per indicare la posizione della galleria.
<p id="mygallery-paginate" style="width: 250px; text-align:center">
<img src="ima/opencircle.png"
data-over="ima/graycircle.png"
data-select="ima/closedcircle.png"
data-moveby="1" />
</p>Con questo codice visualizziamo la paginazione, indicata in questo esempio da pallini neri che rappresentano in maniera visuale la posizione nello scorrimento delle immagini.
<p>
<a href="javascript:stepcarousel.stepBy('mygallery', -1)">Indietro di 1 pannello</a>
<a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Avanti di 1 pannello</a>
<br />
<a href="javascript:stepcarousel.stepTo('mygallery', 1)">Vai al I Pannello</a>
<a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Avanti di 2 pannelli</a>
</p>Queste ultime righe danno la possibilità di applicare la navigazione a pulsanti (immagini o testo) più o meno distanti dalla galleria scorrevole e di regolare la quantità e le modalità di scorrimento. Ad esempio aumentare gli step di scorrimento oppure tornare direttamente alla prima o ultima immagine.
Ecco un esempio.
Personalizzazioni e semantica
Che siate dei puristi del codice o solamente degli amanti dell'ordine si possono fare molte modifiche al codice HTML di presentazione, per esempio sostituire il <div class="belt"> che contiene le immagini con una lista non-ordinata <ul class="belt"> e i div interni <div class="panel"> con <li class="panel">.
Indichiamo così al browser (e ai motori di ricerca) che abbiamo una lista di oggetti, in questo caso immagini. Volendo nelle liste possiamo inserire una piccola didascalia che scorrerà assieme alle immagini.
Ecco il secondo esempio basato su queste specifiche.
Abbelliamo con uno sfondo
Ho aggiunto un div che userò per uno sfondo personalizzato:
<div id="bg"> </div>e alcune righe di CSS per applicare lo sfondo:
#bg { width: 270px; height: 220px;
padding: 145px 135px;
background: url(../ima/bg-demo-ul.jpg) center center no-repeat; }Configurazione avanzata
Quel che mi è piaciuto dello script è la serie di configurazioni applicabili a Step Carousel. Sufficienti per non impazzire ma avere flessibilità per le proprie esigenze.
I vari parametri vanno inseriti all'interno di una sezione Javascript da inserire anch'essa nella head della pagina (stepcarousel.setup({});):
I primi tre indicano allo script la struttura del contenitore e dei vari pannelli scorrevoli, poi troviamo l'impostazione autostep per attivare o meno lo scorrimento con tempi indicabili in millisecondi.
panelbehavior è obbligatorio ed indica la velocità di scorrimento da un pannello all'altro e se memorizzare l'ultimo pannello visitato per riaprilo nella visita successiva
defaultbuttons indica quali immagini usare per lo scorrimento destra/sinistra e la posizione
contenttype è una funzione aggiunta nell'ultima versione 1.8 e permette l'uso di contenuti in linea oppure di file esterni (o chiamate Ajax) per scaricare e scorrere contenuti esterni. La funzione è particolarmente importante per non appesantire la pagina con troppe immagini o all'interno di portali dinamici con molti contenuti. Inoltre, in abbinamento con l'evento esterno stepcarousel.loadcontent() possiamo creare navigazioni dinamiche con facilità.
Tre funzioni di controllo ci aiutano a sviluppare progetti avanzati e interazioni con altri javascript: oninit, onslide e onpanelclick; indicano quando la galleria è caricata, quando è finito lo scorrimento di un pannello e quando si clicca su un pannello.
Il limite è solamente nel tempo di personalizzazione del CSS; per il resto Step Carousel fornisce l'indispensabile di cui si ha bisogno in una galleria scorrevole.
Gli esempi completi sono disponibili per il download.
