JavaScript  »  Articoli  »  MooTools 

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:

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:

Altri articoli

Altre guide

Altre newsletter