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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZbLmBuzTCUIiv27w25U_mc0VvdHHuhcJlXEEmajEw7NP7SuRE55iGDJmAVXA9OToQQqFo5vanBkWAXV8338sntgbs_qCb8vxdcOBIfAz2h62HhBfPmfDIQjJQ2MBhiKI4bGKEMgaqaDAY/s800/natura1.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQiumu0rjJfkQiMBktAilfKaVMwH-lmQG-gbSQAskkYnvgubtU1ZjDFenywU3FROCbvQQo9mI83Z0EVr8MyKAWbvOZ2uv1oyjFxjYCIbHfCpawWl8whx6QIWdNLW6bWHzmOsEASDBOf96y/s720/natura2.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGdtSPKVU5TT0XYTAjczHUD_mq3eeMtX5DUNiEfdi_kajGSskdWS4jux55YZq-TRC1_hz9xpoXb7KaGYBLXFhyBKPUAR3vKaBlP6YBfaGDwrixH-o6dY2azuWXY3C_0z47eKGZD7vOE5I/s912/natura3.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7VM0MyMTQyeO7RhG2amy86gUN0DMnhgOj3CT2OfuCh2GnSiLR0957RRe3z24UEqU8VAcNRbY98KDBPbVY2GA8oDlMNLfCTYnC22o1eu9DVBfmgKXjJ6tunLpIx77LHLhPpzl1vAxRyI/s912/natura4.jpg",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwZhLh2AvPoW3kRgl4uNg9UBW3nFWlyFWSnpTGJdya0_Rqk_A-VOTAHnpVKwsR04PozKYF3D424M8lGN4A6vHc5Mv0C_LtmLR6B99nTv-aJxByeyeKolcwy_EbqSogBz8t7xGZm5eS3oM/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.

Fonti | Backstretch e Ciudad Blogger -