Slider sencillo con entradas aleatorias | Oloblogger Hace un tiempo publicamos sobre un slider jQuery muy muy sencillo , que luego complicamos un poco má...

10 de enero de 2014

Slider sencillo con entradas aleatorias

Hace un tiempo publicamos sobre un slider jQuery muy muy sencillo, que luego complicamos un poco más sumándole un sistema que le incorporaba automáticamente título, imagen y enlace cargados desde un feed.

Hoy le vamos a dar una vueltecita más y para evitar que en portada coincidan las últimas entradas publicadas, con un slider que muestra las últimas entradas publicadas, o sea lo mismo, lo que haremos será extraer aleatoriamente entradas de cualquier fecha.

Lo mejor es que en esta ocasión apenas lo vamos a complicar, ya que sólo hay que añadir una línea de código más a lo anterior.

Slider con posts aleatorios


La línea en cuestión la pondremos en la parte JavaScript que cargaba los datos necesarios del feed (función galeriaposts) y lo que hará será simplemente "desordenar" el array o grupo de datos que almacenaba los índices de cada elemento leído.

Ese array lo llamamos en aquel entonces indexPosts y lo que hará que se reordene aleatoriamente es simplemente esto:

indexPosts.sort(function() {return 0.5 - Math.random()});

Por tanto, si esto lo insertamos después de leer los datos y antes de empezar a manipularlos, pues ya conseguimos un número x de entradas que no serán las últimas sino otras cualquiera, las que el destino haya querido poner en la cola del feed.

No voy a repetir por tercera vez todo el código necesario ni a explicarlo de nuevo por razones obvias (ver enlaces del principio del post), pero para que todos sepáis ubicar el punto de inserción, reproduzco la parte dónde va:

...
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {indexPosts[i] = i;}
// Línea para reordenar aleatoriamente las entradas leídas
indexPosts.sort(function() {return 0.5 - Math.random()});
if (numposts_gal > numPosts) {numposts_gal = numPosts;}
...


Y aquí la demo. Refrescando la página podréis comprobar que cada vez salen unas entradas distintas de otro blog en el que participo (modo publi ON).El enlace es cualquier punto del cuadrado y pasando el puntero por encima (hover) aparecerá el título del post.




Sólo añadir que esa función sort con el Math.random de esa manera os puede servir para otras aplicaciones JavaScript en las que necesitéis sacar elementos al azar obtenidos desde un feed. Precisamente he publicado esto para que no se me olvide a mí y poderla encontrar a golpe de buscador interno ;)

¿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
Copy URL

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

follow us in feedly

17 comentarios :

  1. Está muy bueno Oloman! yo lo usaría definitivamente ;-)

    ResponderEliminar
  2. Me parece un Slider chulisimo, de lo mas original sobre todo por lo de entradas aleatorias. Saludos

    ResponderEliminar
  3. Buenísimo el slider en general, Oloman. Menos mal que le has hecho esta actualización, porque no había visto los dos anteriores.
    Al incluirlo en el blog no me sale más que el “border”. He cambiado los tamaños pero debo haberme dejado algo. Te dejo el blog para que le eches un vistazo a ver si a simple vista es un problema recurrente.
    http://frentealbaluarte.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Lo único que puedo ver desde aquí es que tienes todo el código necesario, pero que no se carga nada en el DIV vacío, así que lo que debe fallar es el JavaScript.

      Reinicia todo y comprueba si el slider con imágenes y enlaces fijos funciona porque creo que puedes tener alguna segunda versión de jQuery también instalada que provoca conflicto o algo así. Empieza por el slider sencillo y si te funciona añade lo de las entradas recientes. Si te funciona, pues ya esto es lo fácil.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Elimino el anterior para escribir aquí la información buena, ya que había un fallo:

      Todo funciona si al resultado final SIN LA LÍNEA DE REORDENA LAS ENTRADAS le dejo tu feed, o el de Musicae Memorándum, o cualquiera que se me ocurra. Debe ser algo de lo de FeedBurner que me comentaste...
      Añadiendo la línea para hacerlo aleatorio no funciona con ningún blog de los que he probado. Sin añadirla, con la mayoría salvo el mío.

      Eliminar
  4. Hola Oloman, Espero y me disculpes las molestias.
    pasa que yo tengo un blog de actulidad y a diario publico alrededor de 15 y 20 entradas y por publicar tan a menudo tengo problemas en webmaster tools con Etiquetas de título duplicadas del tipo ?m=0 ?m=1, tu me recomendaste que ajustara los parametros url como lo tienes pero no me ayuda en nada por que como te dije yo publico a diario y webmaster tools tardar mucho tiempo en actualizar y para cormo cuando actualiza me salen las etiquetas Etiquetas de título duplicadas y de inmediato bajo en cuanto al posicionamiento. entonces yo pence en bloquear a los robots desde el archivo robots.txt para que no tengan acceso a esas paginas, por ejemplo agregando la linea: Disallow: /*?m=

    y quiero saver si esta correta en cuanto a tu opinion?

    ResponderEliminar
    Respuestas
    1. Julio, aunque publique algunas cosillas al respecto, el tema del SEO no es mi especialidad y el manejo del robots.txt, menos todavía. Lo que te recomendé en su momento es lo que a mí me estaba funcionando, pero era sólo tras haberlo probado, sin saber a priori si lo haría bien.
      A mí me parece una buena idea, pero como no lo sé seguro, lo único que te puedo decir es que pruebes... y si no te importa, que luego nos cuentes como te fue :)

      Eliminar
  5. Muchas gracias. Se puede también hacer un slide de las entradas de los blogs que sigo ?? para poner en la sidebar. Gracias.

    ResponderEliminar
    Respuestas
    1. Claro Lourdes. Como las entradas las cargas desde un feed, sólo tendrías que crearte un único feed que aglutinara esos que sigues, o bien hacer un slider distinto para cada uno de ellos. Hay herramientas online para mezclar feed, pero ahora mismo no recuerdo ninguna en concreto para recomendarte.

      Eliminar
  6. Me pasa como a RGV, me funciona perfectamente el slider sencillo y el de entradas recientes, pero al incorporar la línea de entradas aleatorias me deja de funcionar

    ResponderEliminar
    Respuestas
    1. Sí. No sé qué pasa, pero ya se lo comenté a RGV por privado. El tema de los posts aleatorios con unos feeds funciona y con otros no, pero no he encontrado el patrón para poderlo solucionarlo.

      Por si podéis añadir casos el que me funciona es el nativo de Blogger y el otro es de FeedBurner, pero no tengo para comprobar si es eso.

      Eliminar
  7. Saludos desde la CUNA del continente AMERICANO, de verdad que te envió mis más grandes felicitaciones, por el trabajo que realizas, al permitirles a aquellas personas como nosotros que no somos tan diestros, poder transmitir nuestras reflexiones de una mejor forma a las personas que pueden leernos, además quisiera que me facilites algunos consejos para aumentar los lectores en mi blog. Cuando pueda pueden visitarnos y darnos las recomendaciones que encuentren necesarias.

    GRACIAS.
    http://guaridadelingeniero.blogspot.com/
    GUARIDA DEL INGENIERO
    REPÚBLICA DOMINICANA - QUISQUELLA

    ResponderEliminar
    Respuestas
    1. Prefiero no hacerlo Ricardo. Nunca me han gustado los "críticos entendidos en la materia" y no quiero ser uno de ellos. Seguro que lo hicisteis con el máximo cuidado y a vuestro gusto, que es lo que importa.

      Eliminar
  8. Gracias por el tuto. No se si puedes ayudarme en un tema similar, pero en este caso el objetivo es que la imagen cambie al momento de cargar la pagina(en mi caso la imagen del header). Lo he intentando localmente y si me sale, pero al momento de colocar el mismo codigo en mi blog no me funciona, espero tu ayuda y nuevamente gracias por los tutoriales.

    ResponderEliminar
    Respuestas
    1. Hoy me estáis dejando algunas preguntas a las que no puedo responder porque no me facilitáis datos ¿qué código pones? (usa primero el conversor html/texto plano si lo vas a pegar en un comentario)

      Eliminar