ZANETTE
MARCO
JAVASCRIPT GALLERY
Slideshow gallery con effetto fade in javascript
In questo articolo vi presento una slideshow con effetto fade e
con inoltre la possibilità di mostrare del testo in un popup nella parte inferiore.
Questa slideshow è sviluppata solamente attraverso JavaScript e CSS e senza l'utilizzo di librerie esterne.
Questa photogallery è rilasciata sotto
licenza MIT.
DOWNLOAD DEMO
DOCUMENTAZIONE SLIDESHOW
Di seguito riporto tutti i passaggi necessari per implementare la slideshow con effetto fade in una pagina.
IMPLEMENTAZIONE HTML
Nella parte superiore della vostra pagina all'interno del tag head includete il file css e il file javascript.
- <link rel="stylesheet" href="style.css" />
- <script type="text/javascript" src="slideshow_fade.js">
Dopodichè create un div e al suo interno inserite le immagine che volete utilizzare nella slideshow.
Per sfruttare la possibilità di visualizzare del testo nel popup della parte inferiore utilizzate l'attributo
title per inserire un titolo e l'attributo alt per inserire del testo.
- <div id="slideshow_fade">
- <img src="img/img1.jpg" alt="Testo immagine 1" title="Titolo immagine 1" />
- <img src="img/img2.jpg" alt="Testo immagine 2" title="Titolo immagine 2" />
- <img src="img/img3.jpg" alt="Testo immagine 3" title="Titolo immagine 3" />
- </div>
L'ultimo passaggio necessario per far funzionare nella vostra pagina lo slideshow è quello di richimare la classe
javascript creando un'istanza attraverso la seguente istruzione:
new SlideshowFade('slideshow_fade',1000,1);
I parametri passati:
- id del div che contiene le immagini;
- tempo in millisecondi che deve passare tra un ciclo e l'altro di visualizzazione (il tempo che deve trascorrere tra quando l'immagine è al 100% di opacità e quando devi iniziare il fade per visualizzare quella dopo);
- visualizzazione del testo: impostare 0 se non si vuol fare visualizzare mai il testo attraverso il popup oppure 1 per farlo visualizzare (se impostato ad 1 il popup non verrà comunque visulizzato nel ciclo in cui un'immagine non abbia testo inserito sia nell'alt che nel title).
- <script type="text/javascript">
- new SlideshowFade('slideshow_fade',1000,1);
- </script>
IMPLEMENTAZIONE CSS
Non è necessaria alcuna implementazione di css in quanto è sufficiente il file incluso precedentemente nell'head della pagina,
è comunque possibile modificare le caratteristiche di esso cambiando valori agli stili presenti all'interno
(modificare dimensioni, colori, opacita..).
Vediamo alcuni esempi:
- modificare colore di background durante il fade di transizione: modificate la proprietà background-color dello stile '#slideshow_fade';
- modificare le dimensioni del popup testo: modificate le proprietà width ed height dello stile '#popup_txt'.
IMPLEMENTAZIONE JAVASCRIPT
Non serve scrivere nessuna riga di codice javascript ulteriore è sufficiente aver incluso il file "slideshow_fade.js" scaricato.
Per segnalarmi dei problemi o se hai dei suggerimenti per migliorare questo lavoro mandami una mail .