Visto il buon riscontro avuto dall'articolo Slideshow con effetto fade, ho pensato di proporre alla votra attenzione una soluzione alternativa rispetto al semplice script presentato in quell'occasione. L'esempio che andremo a realizzare è basato su SmoothGallery, una libreria dedicata alla creazione di slideshow e gallerie di immagini dinamiche opera di Jonathan Schemoul. È una delle tante realizzazioni basate su Mootools, la fantastica libreria di effetti Javascript creata da Valerio Proietti.
Ancora due parole di introduzione sull'esempio. Più che riproporre una delle demo presenti sul sito di Jonathan Schemoul (potete andare direttamente a vederle voi stessi), ho pensato di modificarne una per creare una sorta di multiheader. Di cosa si tratta? Ne abbiamo parlato in un post sul nostro blog. Un multiheader è un tipo di pannello animato sempre più presente su diversi siti. Consente di mostrare in una forma accattivante, grazie alle foto, i titoli o le news o gli argomenti più importanti del giorno. Un esempio recente è quello implementato sul sito di Time. Una foto, un titolo, una descrizione che scorrono e su cui è possibile cliccare per andare a leggere l'articolo collegato.
Per prima cosa, a questo punto, potete iniziare a scaricare lo zip che contiene tutti i file usati. Al suo interno troverete, oltre alle pagine HTML e alle immagini create per lo scopo, i fogli di stile e gli script necessari all'esecuzione. Lo script è compatibile con: Firefox, Opera, Internet Explorer 6 e 7, Safari.
Come procedere
Uno dei pregi di SmoothGallery è la facilità di implementazione. I passi da compiere sono pochi.
Per prima cosa, una volta creato un nuovo documento (X)HTML, inseriremo i riferimenti ai due JS fondamentali, la versione compressa di Mootools e la libreria di Jonathan Schemoul:
<script src="scripts/mootools.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
Il path presuppone che entrambi siano all'interno di una cartella 'scripts' (come nella demo che scaricherete).
Il box contenente lo slideshow può essere formattato a piacere con i CSS. Tutte le regole vanno definite all'interno del foglio di stile jd.gallery.css presente nella cartella 'css'. Attenzione: all'interno di questa cartella ne troverete una seconda, 'img'. Contiene tutta una serie di immagini usate per gli elementi di navigazione e per altri effetti come la trasparenza degli sfondi. Se intendete usare gli stili originali lasciatela dov'è.
Sempre se intendete usare gli stili originali, dovrete però modificare una regola del foglio di stile jd.gallery.css. È la prima, che imposta le dimensioni del box. Esse dovranno/potranno essere adeguate alle dimensioni delle immagini. Nel nostro caso, per esempio, avendo usato immagini di 640x480px, ho impostato queste dimensioni nel CSS:
#myGallery
{
width: 640px;
height: 480px;
Apportate, eventualmente, queste modifiche, si può inserire nella pagina il collegamento al CSS:
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
Nella sezione <head>, quindi, dovremmo avere questa situazione:
<script src="scripts/mootools.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
Ovviamente, potrete creare un altro foglio di stile per formattare il resto della pagina a vostro piacimento. Ripeto, jd.gallery.css agisce solo sul box con lo slideshow.
Arriviamo ora alla definizione della parte HTML.
Il pannello va definito come un div con id="myGallery":
<div id="myGallery">
........
</div>
Al suo interno andremo a definire tanti div con class="imageElement" quante sono le immagini da mostrare (nel nostro caso sono 4):
<div id="myGallery">
<div class="imageElement">
.....
</div>
<div class="imageElement">
.....
</div>
<div class="imageElement">
.....
</div>
<div class="imageElement">
.....
</div>
</div>
All'interno di ciascun div con class="imageElement", inseriremo:
- un
<h3>che funge da titolo; - un
<p>che ospita la descrizione; - un elemento
<a>conclass="open"per inserire il link all'articolo collegato (non preoccupatevi della forma, lo script si occupa di gestire il tutto); - l'immagine a cui nel nostro caso è assegnata la classe "full" perché viene mostrata nella sua interezza.
Il codice dell'esempio è dunque questo:
<div id="myGallery">
<div class="imageElement">
<h3>Acqua!</h3>
<p>Vai alla pagina di questo elemento...</p>
<a href="acqua.html" class="open"></a>
<img src="immagini/acqua.jpg" class="full" />
</div>
<div class="imageElement">
<h3>Terra!</h3>
<p>Vai alla pagina di questo elemento...</p>
<a href="terra.html" class="open"></a>
<img src="immagini/terra.jpg" class="full" /></div>
<div class="imageElement">
<h3>Fuoco!</h3>
<p>Vai alla pagina di questo elemento...</p>
<a href="fuoco.html" class="open"></a>
<img src="immagini/fuoco.jpg" class="full" /></div>
<div class="imageElement">
<h3>Aria!</h3>
<p>Vai alla pagina di questo elemento...</p>
<a href="aria.html" class="open"></a>
<img src="immagini/aria.jpg" class="full" />
</div>
</div>
Va detto che l'indicazione di quei nomi delle classi per i vari div, per il link e per l'immagine è obbligatoria, perché serve allo script per individuare i vari elementi su cui operare.
Manca solo una cosa: il richiamo allo script. Si fa aggiungendo in un punto qaulunque della pagina (prima o dopo il div 'myGallery') queste righe di Javascript:
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.onDomReady(startGallery);
</script>
La cosa da notare sono le opzioni. Con timed: true si imposta uno slideshow che scorre automaticamente le immagini ogni x secondi, con showArrows: false specifichiao che non vogliamo visualizzare le frecce per lo scorrimentoa manuale, con showCarousel: false specifichiamo che non vogliamo mostrare il navigatore della galleria. Di questi due elementi parleremo la prossima settimana.
Dopo aver visto nella prima parte un esempio molto di base realizzato con SmoothGallery, vediamo ora come creare una galleria più completa. Subito il link al secondo esempio, visto che la prova diretta vale più di tante parole.
Rispetto al primo, presenta due elementi aggiuntivi. Le immagini scorrono automaticamente e con la consueta transizione ad un intervallo prestabilito, ma se si passa il mouse sull'immagine compariranno a destra e a sinistra due freccie con le quali si può passare avanti e indietro nello slideshow. Inoltre, in alto, è presente il testo 'Immagini'. Cliccandoci sopra si aprirà una sorta di navigatore (carousel) che contiene le miniature delle immagini. Nell'esempio non rende magari bene l'idea perché sono state usate solo quattro foto, ma usandone di più potrete apprezzarne meglio la funzionalità, soprattutto lo scorrimento orizzontale.
Per quanto concerne l'implementazione, rispetto al primo esempio, dobbiamo apportare pochissime modifiche.
Nulla cambia rispetto al collegamento degli script e del CSS:
<script src="scripts/mootools.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
Nella parte HTML, dovremo invece aggiungere un dettaglio:
<div id="myGallery">
<div class="imageElement">
<h3>Acqua!</h3>
<p>Vai alla pagina di questo elemento...</p>
<a href="acqua.html" class="open"></a>
<img src="immagini/acqua.jpg" class="full" />
<img src="immagini/acqua_mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Terra!</h3>
<p>Vai alla pagina di questo elemento...</p>
<a href="terra.html" class="open"></a>
<img src="immagini/terra.jpg" class="full" />
<img src="immagini/terra_mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Fuoco!</h3>
<p>Vai alla pagina di questo elemento...</p>
<a href="fuoco.html" class="open"></a>
<img src="immagini/fuoco.jpg" class="full" />
<img src="immagini/fuoco_mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Aria!</h3>
<p>Vai alla pagina di questo elemento...</p>
<a href="aria.html" class="open"></a>
<img src="immagini/aria.jpg" class="full" />
<img src="immagini/aria_mini.jpg" class="thumbnail" />
</div>
</div>
Se si fa il confronto con il primo esempio, si noterà che è stato aggiunto, subito dopo, il codice per l'inserimento dell'immagine principale, un secondo elemento <img> che punta alla miniatura corrispondente:
<img src="immagini/fuoco.jpg" class="full" />
<img src="immagini/fuoco_mini.jpg" class="thumbnail" />
Si noti che è obbligatorio assegnare al primo la classe 'full', al secondo la classe 'thumbnail'.
Ovviamente, sarà necessario preparare in anticipo le immagini ridimensionate. Le dimensioni ottimali sono 100x75px. In alternativa, si può usare lo script PHP resizer.php, che provvede a creare automaticamente le thumbnail. Sull'utilizzo di questo componente rimando direttamente al sito ufficiale di SmoothGallery.
Per il resto, nulla cambia nella struttura. Un titolo <h3>, un paragrafo per la descrizione, un link (eventualmente, non è obbligatorio) che rimanda ad una pagina collegata o alla visualizzazione dell'immagine a dimensioni ancora maggiori.
Il secondo cambiamento riguarda il codice Javascript che attiva la galleria e che, lo ricordo, va inserito in un punto qualsiasi della pagina. È questo:
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.onDomReady(startGallery);
</script>
Una possibile variante può consistere nel realizzare una galleria senza timer, ovvero una galleria in cui lo spostamento da un'immagine all'altra avviene solo tramite le freccie o il navigatore a thumbnail (esempio 3). Nulla di più facile. Basterà modificare così il Javascript visto qui sopra:
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.onDomReady(startGallery);
</script>
Come si vede, è stato sufficiente modificare il valore della variabile timed da true a false.
Anche per questi esempi è disponibile un pacchetto zip.
