Slideshow de im?genes como fondo del blog

En la entrada anterior vimos c?mo hacer que la imagen de fondo del blog cubra toda la pantalla sin importar la resoluci?n del monitor. El m�todo que usamos con jQuery es un plugin llamado BackStretch el cual tambi�n tiene la opci?n de crear un slideshow de im?genes como fondo del blog sin perder la cualidad de ajustarse al ancho y alto de la pantalla.

Lo que haremos en esta en estrada es justamente eso, que el fondo del blog tenga im?genes que vayan cambiando, todas con un efecto de desvanecimiento entre cada transici?n.

Puedes ver un ejemplo en este blog de pruebas.

Para poner este slideshow de im?genes en el fondo del blog entra en la Edici?n HTML de la plantilla y antes de </head> agrega el siguiente c?digo:

<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 = [
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
 "URL de la imagen",
  ];

  $(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>

Ah? agrega las URLs de las im?genes que estar?n como fondo del blog.

Si quisieras a?adir m?s im?genes s?lo agrega despu�s de var images = [ otra l?nea como esta:

 "URL de la imagen",

Las im?genes ir?n pasando seg?n el orden que las hayas puesto, si quisieras que �stas fueran al azar entonces cambia la segunda parte del c?digo por este:

<script>
//<![CDATA[
var images=new Array();
images[ 1 ]="URL de la imagen";
images[ 2 ]="URL de la imagen";
images[ 3 ]="URL de la imagen";
images[ 4 ]="URL de la imagen";
images[ 5 ]="URL de la imagen";

  Array.prototype.shuffle = function() {
  var len = this.length;
  var i = len;
  while (i--) {
  var p = parseInt(Math.random()*len);
  var t = this[i];
  this[i] = this[p];
  this[p] = t;
  }
};

  images.shuffle();
  $(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>

Tambi�n puedes a?adir m?s im?genes agregando una l?nea como esta:

images[ 6 ]="URL de la imagen";

Sin embargo ver?s que en este caso hay unos n?meros consecutivos en color azul, por lo que si agregas otra ser? la 6, luego la 7, etc.

En ambos casos puedes modificar el tiempo que dura cada imagen en el 5000 que est? al final del script.

La ventaja de este slideshow en el fondo del blog es que las im?genes se redimensionar?n autom?ticamente al tama?o del monitor, as? que en cualquier resoluci?n se deber? ver bien.

No est? de m?s recordar que si usas Scriptaculous deber?s hacer unos cambios, y si ya usas jQuery deber?s dejar s?lo una versi?n.


P?gina del autor | BackStretch