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