Slideshow di immagini con descrizione e link mediante l'effetto Nivo Slider.

L'effetto Nivo Slider è stato presentato da Iole in un post forse un po' troppo criptico. Ho deciso di ripresentarlo in modo più analitico in modo che possa essere utilizzato anche da coloro che non sono particolarmente pratici di codici e di linguaggi di programmazione. Si tratta di una galleria di immagini che si susseguono con vari effetti di transizione. Si possono inserire dei collegamenti alle immagini, visualizzare delle descrizioni e inserire anche dei link in un anchor text della stessa descrizione. Ho messo in rete un esempio di come potrebbe essere questo slideshow

• Demo dell'effetto Nivo Slider per slideshow di immagini -

Le dimensioni delle immagini devono essere tutte uguali ma possono essere personalizzate a piacere modificando il file CSS di cui dirò in seguito.

Nella parte bassa ci sono anche i pulsanti per navigare all'interno delle foto e, se si passa sopra con il mouse, appaiono le frecce per spostarsi alle immagini adiacenti. Per l'installazione di questo effetto bisogna andare su Design > Modifica HTML e salvare il modello completo. Cercare la riga </head> e, immediatamente sopra, incollare il seguente codice

<!-- Nivo Slider Inizio -->
<link href='https://sites.google.com/site/scriptperilblog/slideshow/nivo-slider.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/scriptperilblog/slideshow/style.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/scriptperilblog/slideshow/jquery-1.4.3.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/slideshow/jquery.nivo.slider.pack.js' type='text/javascript'/>
<!-- Nivo Slider Fine - www.ideepercomputeredinternet.com -->

Adesso va cercata la riga </body> e, immediatamente sopra, va incollato quest'altro codice

<!-- Nivo Slider Chiamata Inizio-->
<script type='text/javascript'>
$(window).load(function() {
    $(&#39;#slider&#39;).nivoSlider();
});
</script>
<noscript><a href='http://goo.gl/i3lI5' target='_blank'><span style='font-size: x-small;'>Nivo Slider</span></a></noscript>
<!-- Nivo Slider Chiamata Fine -->

Salvate il modello. E' giunto il momento di creare lo slideshow vero e proprio. Prima di iniziare devono essere già state preparate le immagini della stessa misura che devono anche essere state caricate su Picasa o hosting analogo. Per ridimensionarle può essere usato l'ottimo tool online Pixlr. Il codice da postare in un elemento HTML o in una pagina statica sarà simile a quello che ho pubblicato su Google Documenti

• Demo del codice dello slideshow Nivo Slider -

Personalizzazioni e osservazioni

La riga iniziale e quella finale, evidenziate di rosso, servono solo per centrare lo slideshow nell'elemento pagina e possono essere eliminate se non c'è questa esigenza. Con il CSS che è stato caricato, le immagini debbono avere le dimensioni di 618x246 pixel. Sono forse un po' larghe per alcuni layout. Se si vogliono inserire immagini di altre dimensioni, si deve scaricare il file evidenziato di rosso nel primo codice. Detto file è stato anche caricato su DropBox e può essere scaricato da qui.  Va modificata questa parte del codice

#slider {
    position:relative;
    width:618px;
    height:246px;
    margin-left:190px;
    background:url(https://lh6.googleusercontent.com/_nT13UtBmmiU/TZV9FRtL91I/AAAAAAAASp8/WvnO9BfM23g/loading.gif) no-repeat 50% 50%;
}

in relazione alle dimensioni delle immagini. Possono anche essere fatte tutte le modifiche che si ritiene opportune per esempio riguardo alle icone di navigazione o in relazione a altri parametri. Il codice dello slideshow inizia con il tag <div id="slider"> e finisce con il tag </div>, entrambi evidenziati di blu. Le immagini dello slideshow possono essere inserite con queste differenti modalità:

Immagine senza descrizione e senza link
<img src="URL_IMMAGINE" alt="NOME_IMMAGINE" />
Immagine con descrizione senza link
<img src="URL_IMMAGINE" alt="NOME_IMMAGINE" title="DESCRIZIONE VISUALIZZATA IN BASSO" />
Immagine con link a una pagina
<a href="URL_COLLEGAMENTO"><img src="URL_IMMAGINE" alt="NOME_IMMAGINE" /></a> 
Immagine con link e descrizione
<a href="URL_COLLEGAMENTO"><img src="URL_IMMAGINE" alt="NOME_IMMAGINE" title="DESCRIZIONE"/></a>
Immagine e descrizione con link interno
<img src="URL_IMMAGINE" alt="NOME_IMMAGINE" title="#descrizioneX" /> 
Dopo aver inserito tutte le immagini deve essere inserito quest'altro codice
 <div id="descrizioneX" class="nivo-html-caption">
  Descrizione dell'immagine X
</div>  
Al posto di Descrizione dell'immagine X può essere inserito un codice HTML con grassetto (tag strong), corsivo (tag em) e anche link (tag a href=…)  a una data pagina. Ogni immagine così inserita dovrà avere la sua corrispondente descrizione numerata. Per una ulteriore personalizzazione di questo slideshow per quello che riguarda gli effetti di transizione, l'opacità, la velocità e altre opzioni vi rimando alle istruzioni di Nivo Slider. 
Aggiornamento: Consultate anche il post su Ulteriori personalizzazioni di Nivo Slider -