domingo, 5 de abril de 2015

Slideshow de imágenes como fondo del blog

Actualidad BackStretch blog Bogotá Colombia Fondo imágenes magazine noticias prensa publicidad revista Slideshow
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.

Slideshow-de-imágenes-como-fondo-del-blog


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.

--
revista-whats-up

Si te gustan nuestras actualizaciones no
olvides compartirlas y comentarlas
Siguemos
https://www.facebook.com/revistawhatsuponlinehttps://twitter.com/revistawhatsuphttp://www.linkedin.com/in/revistawhatsuphttp://www.youtube.com/SarahLeePrensahttp://instagram.com/revistawhatsup

Sarah Lee Méndez

Directora / Jefe de Prensa / Editora Contenido / Fotógrafa / Twitters: @AnastasiaLeeEdi @revistawhatsup / Instagram @sarahleefotografia

Con más de una década de experiencia en relaciones públicas, manejo de redes sociales, CM, diseño de Blogs, fotógrafa para eventos.

Suscribete vía Email / Es importante para nosotros!

 

VISITA OTRAS SECCIONES

  • Copyright © Tecnología, Redes Sociales - Whats up™ REVISTA WHATS UP.
    / AFICIONES COLOMBIA DISEÑO SARAH LEE