Come inserire immagini a rotazione in un articolo, in una pagina statica o in un widget.

Questo effetto grafico si chiama Image Cross Fade e fu creato diverso tempo fa da Kevin C. Smith. Lo stesso autore lo ha recentemente aggiornato rinominandolo Image Cross Fader Redux. Gli utenti di Blogger (ma anche di altre piattaforme tipo Splinder) possono utilizzarlo per inserire immagini a rotazione con effetto dissolvenza in un post, in una pagina statica o in un widget HTML. Ho postato in rete una

• Demo di Image Cross Fader Redux -

Le immagini appariranno una di seguito all'altra con un effetto dissolvenza (fade) molto suggestivo. La sua installazione non presenta molte difficoltà. Basta andare su Design > Modifica HTML e cercare la riga </head>, subito sopra va incollato questo

• CSS e javascript per Image Cross Fader Redux -

Si possono variare le dimensioni delle immagini (nel codice proposto c'è width: 500px e height: 340px) e anche la durata della permanenza di ciascuna di esse. Nello script è stato inserito il valore 3500, vale a dire tre secondi e mezzo, che può essere adeguato alle nostre esigenze. Ovviamente si salva il template. In precedenza avevamo salvato quello senza modifiche per sicurezza. Per ottenere un effetto simile

 

bisogna incollare il codice HTML in un post o in un widget. Il codice che ho utilizzato per la demo è il seguente

<div id="imageContainer">
<a href="http://demo-blogger-widget.blogspot.com/2011/08/dimostrazione-dello-slideshow-per-gli.html"><img alt="Immagine1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxL4kRMKZ-ERcezjgVUO_daIykdHrwhA-QL8343W5-y3D5iyM88a8FqJac6XG-YchJTcjnL6yxv6bkVMalxZjHdlJ59EM_mhrDbyhXwQ0GeJhc54CHHP7vJioO8gJzUsYH9uSELT6IB-I/" title="Post1" /></a>
<a href="http://demo-blogger-widget.blogspot.com/2011/08/lorem-ipxum-1_11.html"><img alt="Immagine2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj81mPlXp4fheYnEHUjpHdE-vNj9igPMFjgJL11LJqarQ6ff2fNEgi5NrYfKmXgnqTPC7obzDDvGDQhk2TeMsz9XFLtv6W93Dxjq23MFa7z6hjoqhBBKbVEgJFNP3PQwbe42EtqXCcgxOg/" title="Post2" /></a>
<a href="http://demo-blogger-widget.blogspot.com/2011/08/lorem-ipxum-2_11.html"><img alt="Immagine3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifPjIP6S3Eo6p80l6399K3OYL-hp5KhujY_3MwqmqvBUAPxkIPi1MHMH0S6HoWCeKm4nmlFW8f44SKzVowhtK86XrKvAmOb11SFtvNI_UpX22n-6SKYNZMx9ZrSizArzxWvpZCnQlGk5k/" title="Post3" /></a>
<a href="http://demo-blogger-widget.blogspot.com/2011/08/slideshow-dei-post-piu-popolari.html"><img alt="Immagine4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmY0Wd9-Zgksiu1LFTrsKAzksiodITRtw2tH3xQaCrXpjCBbOkuKF1cKx4i8u50vJPtm7SgFLO25uGOLWgIqHeJ3scDv_iKa07Aysa_rXA4kYgZJgEQmfge-Cn7TQDAtWymd9bGGYbKuw/" title="Post4" /></a>
<a href="http://demo-blogger-widget.blogspot.com/2011/08/demo-del-widget-roundabout.html"><img alt="Immagine5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfGhXnfSkO12baOx_wDz3B7MqX0nk6BuVtSe1OUDNz6-wplHvLO0_klo34wIe4mFpmqFWdYTy6x5hNTydTN-Dw4jqwgvPCIYmZOYWjPqji-Gx7VUhTIn_tXLQ8M7GK8wyU02Fp4iwxoTI/" title="Post5" /></a>
<a href="http://demo-blogger-widget.blogspot.com/2011/08/demo-del-gadget-book-flip.html"><img alt="Immagine6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO6Inapyrx2hWWXOBT3q-Mhn0FiNkPIosgMNRU3Y4F4p0NHJn7DqNr7Q2XFONswEyBUCanqvy4APjFpgaWGFCho4EG_glFKw4Hyr9piKA8pyboXu1slX_ms4SMA7l__9WHhnDO8wtoLXQ/" title="Post6" /></a></div>

Se si incolla in un articolo o in una pagina statica, occorre passare alla modalità HTML mentre, se si opta per un widget, si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito.

Si può inserire un URL collegato a ciascuna immagine, colorato di rosso, mentre gli indirizzi delle foto sono colorati di viola. Sono pure presenti i tag Alt, per inserire il nome della immagine, e Title, se si vuole visualizzare il nome dell'articolo collegato quando ci si passa sopra con il mouse. La registrazione della dissolvenza non è venuta molto bene, quindi l'immagine animata in GIF perde un po' in nitidezza, ma osservando l'effetto Image Cross Fader Redux con il browser nella pagina demo si nota che la qualità della visualizzazione è ottima.