Slider sencillo con entradas recientes

No hace mucho vimos como montar un slider muy simple para mostrar una serie de imágenes fijas (con o sin enlace) que iban pasando de manera secuencial. La cosa es que esto no cubre las necesidades de algunos que quieren que esas imágenes sean extraídas de las entradas del propio blog y que al mismo tiempo sirvan de enlace para acceder directamente a las mostradas.

Eso es lo que se viene llamando slider de entradas recientes y precisamente lo que vamos a ver a continuación para tener una variante más completa de aquel visor de imágenes que vimos.

Evidentemente el código ya no será tan simple pero tampoco es que sea muy largo, así que en lugar de cargar un fichero externo, propongo que se meta en la plantilla y que luego ya carguemos el feed desde un gadget.

En esta página de pruebas podéis ver una demostración de cómo funciona con el código que veremos a continuación.

---

Lo primero de todo sería colocar antes del </head> de nuestra plantilla, lo mismo que la otra vez: la librería jQuery, los estilos de la caja que forma el slider (estos también se pueden poner en la parte CSS) y el código que generaba la animación.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
<!-- SLIDER ENTRADAS RECIENTES -->
<!-- Estilo slider -->
<style type='text/css'>
#slider { 
  position: relative;
  overflow: hidden;
  width: 550px; 
  height: 200px; 
  border:4px solid #333;
  margin: 0 auto;
  padding: 0;
}
#slider > div {
  position:absolute;
  top:0;
  left:0;
  width: 550px;
}
#slider img {
  width:100%;
  min-height:200px;
  margin:0;
  padding:0; 
  border:0;
}
#slider p {
  position: absolute;
  top: 160px;
  left: 0;
  display: block;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 400px;
  height: 22px;
  margin:0;
  padding:0 5px;
  color: #eee;
  background: #990000;
  font-size: 16px;
  line-height:22px;
  text-align:center;
}
</style>
<!-- Slider -->
<script type='text/javascript'>
//<![CDATA[
  $(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(2000)
      .next('div').fadeIn(2000)
      .end().appendTo('#slider');},5000);}
  );
//]]></script>

Como decía, esto es exactamente lo mismo que vimos en Posiblemente el slider jquery más sencillo y la diferencia radica sólo en cómo vamos a construir la lista de imágenes/enlaces. En aquel la hacíamos manualmente y ya habíamos terminado, pero en esta ocasión crearemos una función que leerá un feed y de ahí extraerá título, URL e imagen de los últimos posts, creando automáticamente esa lista.

En esa parte de arriba, lo único que habría que tener en cuenta es no duplicar la carga de jQuery que es lo que hace la primera línea. Si ya lo tenemos en nuestro plantilla esa línea hay que omitirla.

Y esta es la función que recopila los datos y crea la lista. Hay que ponerla a continuación de lo anterior:

<!-- Obtener elementos entradas recientes-->
<script type='text/javascript'>
//<![CDATA[
var numposts_gal = 6;
var salida_gal = '';
function galeriaposts(json) {
  var numPosts = json.feed.openSearch$totalResults.$t;
  var indexPosts = new Array();
  for (var i = 0; i < numPosts; ++i) {indexPosts[i] = i;}
  if (numposts_gal > numPosts) {numposts_gal = numPosts;}
  for (i = 0; i < numposts_gal; ++i) {
    var entrada = json.feed.entry[indexPosts[i]];
    var titulo = entrada.title.$t;
    for (var k = 0; k < entrada.link.length; k++) {
      if ( entrada.link[k].rel == 'alternate') {enlace = entrada.link[k].href;break;}
    }
    if ("content" in entrada) {var contenido = entrada.content.$t;}
    x = contenido;
    a = x.indexOf("<img");
    b = x.indexOf("src=\"", a);
    c = x.indexOf("\"", b + 5);
    d = x.substr(b + 5, c - b - 5);
    if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {var imagen = d;}
    else {var imagen = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1dQOa_rad3kHZdO6txXzrYABkIS3xBWwJWujItZrU4wvPedHFzIXu8QidTlsRHI-LA1aGiPj2PFs_woODxggY_iWN6AboSUJUb8wYxiApyQW91KhcuXABhiNhcnippv7Nzyuj_VlgYDs/s0/sin-imagen.png';}
    salida_gal += '<div><a href="' + enlace + '"><img src="' + imagen + '" /></a>';
    salida_gal += '<p>' + titulo + '</p></div>';
  }
  document.getElementById('slider').innerHTML = salida_gal;
}
//]]>
</script>

Y ahora viene el último paso que es situar en el lugar dónde queremos que salga el slider, una caja vacía con la id #slider y la llamada a la función que generará la lista de imágenes/título/enlace.

Tal cual viene se puede incluir en un gadget tipo HTML/JavaScript para ponerlo bajo la cabecera o encima del cuerpo de las entradas.

<!-- SLIDER HOME RECIENTES -->
<div id='slider'></div>
<script style='text/javascript'>
  var numposts_gal = 6; // Número de entradas a mostrar
</script>
<script src='http://www.oloblogger.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=galeriaposts&amp;max-results=10'></script>

En ese trozo es dónde personalizaremos el número de entradas a mostrar y el feed desde dónde queremos cargar las imágenes. En este mismo orden son las dos cosas marcadas en verde. Se puede poner cualquier dirección de feed y no sólo el propio.

Si por casualidad alguien quiere ver más de 10 entradas, el valor tras max-results deberá ser aumentado.

Y por si no lo viste en la demo, aquí una reproducción más pequeña con el feed de otro blog:

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter