Pubblicato il 23/10/12e aggiornato il

Come alternare immagini di sfondo su Blogger.

Come inserire uno slideshow di immagini come sfondo di un blog su Blogger.
Nei blog di Blogger si possono impostare colori di sfondo o anche selezionare immagini che vengano visualizzate come background. Bisogna andare su Modello > Personalizza > Sfondo e scegliere una delle immagini proposte oppure caricarne una dal nostro hard-disk.

In articolo di qualche mese fa ho illustrato come alternare degli header diversi in modo casuale. Il passaggio da una immagine a un'altra avveniva però solo ricaricando la pagina o aprendo un altro post.

La personalizzazione che vado a presentare mostra invece le foto di background con una sorta di slideshow. Vediamo quindi come sia possibile mostrare un numero indefinito di immagini di sfondo che si alternino a distanza di un tempo prestabilito con effetto dissolvenza tipico di JQuery. Come mio solito ho postato una dimostrazione dell'effetto che andremo a creare



Si tratta di una personalizzazione veramente suggestiva a cui non mancheranno gli estimatori. Le immagini che saranno scelte come sfondo dovranno essere di dimensioni piuttosto grandi non inferiori ai 1800 pixel di larghezza come del resto è consigliato anche per gli sfondi di Blogger.

Per l'installazione si va su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla questo codice

<!-- Slideshow Sfondo Blog Inizio -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>
<script>
//<![CDATA[
var images = [
"https://lh6.googleusercontent.com/-PXwomMeG4Tw/UIabO6vwuYI/AAAAAAAAbkI/5Ay3-ETI0IU/s800/natura1.jpg",
"https://lh6.googleusercontent.com/-dOZPRLdZCKw/UIabTwd028I/AAAAAAAAbkQ/Qj__DICgrq8/s720/natura2.jpg",
"https://lh6.googleusercontent.com/-RHvPZIryhgw/UIabYasWDAI/AAAAAAAAbkY/u5CG_BUkRoo/s912/natura3.jpg",
"https://lh3.googleusercontent.com/-p9YxLDVCHFw/UIabcJgQciI/AAAAAAAAbkg/iZeq93c9LOU/s912/natura4.jpg",
"https://lh5.googleusercontent.com/-IWFannULXL4/UIabjoxsYZI/AAAAAAAAbko/ZYznZQFIyBc/s800/oscillatore.jpg",
  ];
  $(images).each(function(){
$('<img/>')[0].src = this;
  });
  var index = 0;
$.backstretch(images[index], {speed: 1000});
  var slideshow = setInterval(function() {
  index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);
//]]>
</script>
<!--Slideshow Sfondo Blog Fine -->

Si salva il modello. Gli URL colorati di rosso sono quelli di cinque immagini caricate su Picasa e ovviamente debbono essere sostituiti dagli indirizzi delle vostre foto. Si possono diminuire il numero delle immagini mostrate cancellando un URL insieme alle virgolette e alla virgola oppure possiamo mostrare anche altre immagini inserendo altre righe con la stessa sintassi.
Le immagini saranno mostrate nell'ordine che abbiamo scelto. Si può settare il tempo che ciascuna di essa rimane visibile modificando il valore 5000 (5 secondi) e la velocità della transizione (1000). Lo sfondo tipo slideshow creato con questo javascript è visibile con Internet Explorer, Chrome e Firefox. Le immagini caricate su hosting diversi da Picasa potrebbero non essere visibili con alcuni browser. All'inizio le avevo infatti caricate su SkyDrive e lo sfondo non si vedeva con IE e Firefox ma solo con Chrome.




14 commenti :

  1. Ho seguito il link demo ma mi porta ad una pagina senza questo effetto: http:// numeri-navigazione.blogspot .it
    forse c'è un errore

    RispondiElimina
    Risposte
    1. @Giorgiogal
      Non c'è un errore è che mi sono accorto solo adesso che funziona solo con Chrome :(

      Elimina
    2. Peccato, peccatissssimo. Mi interessava proprio! Un giorno ho visto un sito che aveva questo effetto. Con un particolare in più: all'alternarsi delle immagini in un box sotto all'header (il classico box dei featured post) si alternava ANCHE il fondo, creando un bellissimo effetto!
      se ti riesce di farlo funzionare anche su forefox e IE sarebbe bello!
      Grazie comunque :)

      Elimina
    3. In molti temi di Wordpress c'è la parte bassa del blog di un colore diverso, più scura dove solitamente si ineriscono i link utili, di contatto ecc...
      Tempo fa mi avevi spiegato il metodo della tabella tramite Window writer, per caso hai qualche consiglio per realizzare una cosa più qualitativa?

      Elimina
  2. @AndreaSapuppo
    Per mettere un colore diverso basta andare su Modello > Modifica > Personalizza > Avanzato > Footer

    @Giorgiogal
    In questa demo dell'autore che ho linkato
    http://ciudadmatrix.blogspot.mx/p/lorem-ipsum.html
    l'effetto funziona anche con IE e Firefox quindi dovrebbe essere solo un problema del modello del blog che ho scelto come test

    RispondiElimina
  3. ADESSO LO SCRIPT FUNZIONA CON TUTTI I BROWSER

    RispondiElimina
  4. Io ho copiato ed incollato l'intero codice ma non funziona sul mio blog www.diemmemakeup.com !
    Potresti aiutarmi?
    100000 grazie

    RispondiElimina
    Risposte
    1. Forse hai già JQuery nel tuo modello
      http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
      Prova a aggiornare
      http://www.ideepercomputeredinternet.com/2011/10/aggiornare-jquery-per-rendere.html
      Per essere sicura incolla prima il mio codice così com'è e guarda se funziona prima di sostituire gli URL delle immagini
      @#

      Elimina
  5. Grazie avevo trovato un codice simile e l'ho cancellato ora funziona! Grazieeeeeeeeeeee

    RispondiElimina
  6. Ciao Eccomi nuovamente per un quesito! c'e' un modo in questo codice per centrare lo sfondo? Da firefox l0immagine risulta tagliata!
    Ancora grazie!

    RispondiElimina
    Risposte
    1. Prova a mettere immagini di maggiori dimensioni
      @#

      Elimina
    2. Ho modificato grazie alcuni però lo vedono bene altri tagliato nonostante tutto. 10000 grazie

      Elimina
  7. Ciao Ernesto, forse sto per fare una domanda stupida ma ci provo lo stesso... sai se c'è un modo per rendere responsive questo effetto? Grazie!

    RispondiElimina
    Risposte
    1. Onestamente non te lo so dire. Si dovrebbe testare. Non è una cosa semplice comunque
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.