Pubblicato il 20/08/11 - aggiornato il  | 7 commenti :

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
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
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
effetto-rotazione-dissolvenza 
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.


7 commenti :

  1. Ciao sono un tuo grande ammiratore anche se non ti ho mai scritto.

    Volevo porti un quesito a proposito di immagini a rotazione.

    Girando in internet mi sono imbattuto in questo sito "http://intermatrix2.blogspot.com/", che a parte il contenuto, usa un bell'effetto per le immagini.

    Sai per caso come funziona?.

    Un altro effetto interessante è su questo sito "http://www.betitaliaweb.it/".

    Se hai tempo per spiegarmeli te ne sarei grato

    RispondiElimina
  2. @Mandrake
    Nel primo caso viene usato un template di Klodian di Deluxe Template. Esattamente uno di questi due
    http://www.deluxetemplates.net/search?q=Template+Style
    mi pare il secondo. L'effetto non è di Klodian ma è stato creato da
    S3slider
    http://www.serie3.info/s3slider/
    Vedo che è visibile anche con IE, se ho tempo ci potrei fare anche un post.
    Il secondo è un sito realizzato da un programmatore su progetto e quindi non può essere trasportato in Blogger.

    RispondiElimina
  3. Grazie per la risposta.

    Attenderò il tuo eventuale post (che penso possa interessare diverse persone), dal momento che sul sito di s3 slider non c'ho capito nulla

    RispondiElimina
  4. ciao! ma è possibile visualizzare tale effetto solo sulla home page 8all'interno di un elemento html/javascript ?

    RispondiElimina
  5. @DeimoniasPhotography
    Sì il codice lo puoi inserire in un widget andando su Design > Aggiungi un gadget > HTML/Javascript
    Se poi lo vuoi vedere solo in homepage devi inserire dei tag condizionali seguendo questo tutorial
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

    RispondiElimina
  6. grazie!!! Era da un po' che cercavo qualcosa che mi consentisse di ottenere un effetto simile per una galleria da inserire nella barra laterale del mio blog. E' davvero bello e sono entusiasta del risultato.
    Grazie per le tue spiegazioni sempre molto precise ed esaurienti. Ciao

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy