Una galería con orden aleatorio | Oloblogger En ocasiones tenemos la necesidad de mostrar una serie de enlaces, de imágenes o de cualquier tipo de elemento, pero de manera que no demos ...

18 de diciembre de 2009

Una galería con orden aleatorio

En ocasiones tenemos la necesidad de mostrar una serie de enlaces, de imágenes o de cualquier tipo de elemento, pero de manera que no demos prioridad a ninguno de ellos. Es el caso de concursos, votaciones o similares. Los primeros que se ven siempre parece que tienen alguna ventaja, sobre todo en listas muy largas que normalmente no se llegan a ver enteras, por lo que mostrarlas de forma aleatoria cada vez que se accede, parece que es la mejor solución para que todos tengan la misma oportunidad de ser vistos.

Con el sistema que se explica, cada vez que se accede a la página (o se refresca) el orden en que aparecen los elementos va cambiando. Probadlo con esta galería de iconos, refrescando (F5) esta página. Vereis como aunque la secuencia es la misma, cada vez se empieza de una imagen distinta.



El script es muy sencillo y lo único un poco más engorroso es rellenar la matriz que contiene las imágenes y sus enlaces. Para que todo funcione bien, sólo hay que tener cuidado en la redacción de estos.

<script type="text/javascript">
var indice = 0;
enlace = new Array();
enlace[0] = '<a href="URL_ENLACE0"><img src="URL_IMAGEN0"/></a>';
enlace[1] = '<a href="URL_ENLACE1"><img src="URL_IMAGEN1"/></a>';
enlace[2] = '<a href="URL_ENLACE2"><img src="URL_IMAGEN2"/></a>';

indice = Math.random() * (enlace.length);
indice = Math.floor(indice);
for (i=1;i<=enlace.length;i++) {
if (indice == enlace.length) indice = 0;
document.write(enlace[indice]);
indice++;
}
</script>


El ejemplo está hecho con tres pero se pueden insertar más imágenes simplemente añadiendo más elementos a la matriz, con el siguiente ordinal que toque. Dentro de cada elemento de la matriz (ENLACE[X]) se puede poner cualquier código HTML por lo que podrían contener una imagen sin enlace, un enlace de texto, un vídeo...

Una variante sería mostrar una cantidad limitada de elementos de entre todos los de la matriz. Para eso, en la siguiente línea

for (i=1;i<=enlace.length;i++) {

...habría que cambiar enlace.length por un número, siempre teniendo en cuenta que debe ser menor que el total de elementos que haya.

En el siguiente ejemplo sólo se muestran 4 imágenes cada vez, de entre las 12 que lleva la matriz y como se pretende, en cada carga se escogen cuatro distintas.

¿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

49 comentarios :

  1. Me parece una buena solución.
    Saludos

    ResponderEliminar
  2. ¡Muy buena! Creo que la voy a usar para un par de enlaces en la sidebar^^

    ResponderEliminar
  3. ta bueno y es muy util y variado nice bro

    ResponderEliminar
  4. oloblogger tengo una preguntita cuando utilizo el efecto de cambiar de imagen al pasar el cursor por encima de otra imagen queria saber si ese codigo o de alguna forma se pueda combinar con el codigo de imagenes desubicadas quisiera poner una imagen cambiante pero fuera de los post.

    ResponderEliminar
  5. Claro. Colocas la imagen con POSITION o de la forma que estimes conveniente. Una vez que logres colocarla dónde quieres, le añades el efecto rollover.

    ResponderEliminar
  6. hola, ¿como insertaste ese fondo en cada comentario que te dejan?.

    Saludos.

    ResponderEliminar
  7. Tienes que buscar la clase .comment-body y allí incorporar un background con imagen (o color plano)
    background:url(URL_IMAGEN) #E3DFB0;

    ResponderEliminar
  8. Oloman muchísimas gracias x la primicia de este post, es justo lo que buscaba. Un fuerte abrazo y feliz navidad!

    ResponderEliminar
  9. Donde yo tengo el blog no existe la posibilidad de poner enlaces a entradas relacionadas. He pensado que podría poner el script en la plantilla (similar a una página web, con código html, divs y las variables a mostrar por ejemplo nombre del autor, título, artículo, comentarios...) para que mostrara enlaces a otros artículos en vez de imágenes (cambiando en el array las imágenes por los títulos de los artículos), pero ¿habría alguna forma de que seleccionara un array u otro en función de tags o de la categoría del artículo? En mi caso las categorías, lo que para tí son las etiquetas, se muestran en el artículo con <@EnlaceCategoriaNombre@> (El artículo final mostraría lo que en este artículo es Trucos, imágenes y scripts, debajo del artículo). La cuestión es que solo puedo modificar la plantilla general, no puedo añadir el script en cada artículo

    ResponderEliminar
  10. HOla...

    Paso a darte un gran besote y desearte a ti y los tuyos unas muy entrañables navidades y un estelar 2010..

    Bellos sueños

    ResponderEliminar
  11. No hay de qué KI. Un saludo y felices fiestas.

    100x100net. Lo cierto es que en estos asuntos me pillas. Realmente no tengo la menor idea de cómo funciona Blogcindario, la Cocktelera o cualquier otro que no sea Blogger. Por probar, puedes intentar con este otro sistema que es más sencillo y sólo tiene enlaces de texto. Supongo que las referencias que se dan para Blogger, no serán válidas para tu plataforma, pero confío en que sabrás cómo manejarlas. Saludos.

    Encantadora Balovega: ¡felices fiestas!

    ResponderEliminar
  12. Ops, ok. Bueno, en realidad necesitaba saber si había alguna forma de que en función de una variable (y ahí me he enlazado a explicar un rollo, sorry) se puede elegir una matriz u otra. El resto creo que sí puedo adaptarlo yo :)

    ResponderEliminar
  13. Siento de verdad no poderte ayudar más 100x100net.

    ResponderEliminar
  14. hola oloman me podrias dar un ejemplo del codigo que usas en el icono para seguirte en twitter ?

    un ejemplo del codigo ya que estado leiendo los post sobre rollover y imagenes desubicadas y no dice como combinar los dos.

    gracias :)

    ResponderEliminar
  15. Hola Oloman,

    Estos días estoy diseñando una nueva plantilla para mi blog y he añadido una pestaña como enseñaste en tu blog ( pestaña vertical para usos múltiples ), con un enlace a mi RSS.

    He estado actualizando el blog con mozilla firefox, y todo era como quería, pero luego he observado que hay ciertos problemas si para ver el blog utilizo Internet Explorer ( el fondo está mal distribuido y la pestaña está fuera de sitio ) o Google Chrome ( la pestaña tampoco está en su sitio )

    ¿ Cómo puedo hacer para que, tanto en Explorer, como en Firefox, como en Chrome, quede igual ?

    Muchísimas gracias

    ResponderEliminar
  16. Un saludo afectuoso antes de que acabe el año y te deseo felices fiestas y agradecerte, una vez mas,las veces que entro a consultar y me resuelves temas y dudas.

    ResponderEliminar
  17. Pau, el problema no está en el navegador, sino en la resolución de pantalla que utilices. Como fijaste el contenedor a 1045px a la izquierda, si la pantalla es más estrecha, el fondo se reajusta y la pestaña no. Esta sigue a 1045px.

    Para colocarla en un lugar distinto a left:0px; tendrías que cambiar un poco la cosa.

    Ya no sirve con poner en cualquier sitio el enlace y el DIV correspondiente. Lo tienes que poner dentro de otro DIV que esté por esa zona. Supongo que dentro del HEADER quedará bien.

    Sea cual sea el que uses como contenedor del contenedor de la pestaña (no tengo más remedio que llamerles igual), le tienes que añadir un position:relative;

    Por ejemplo #header {position:relative;}

    Una vez hecho esto, verás que te manda la pestaña a 1045px a la izquierda pero con la referencia del HEADER, por lo que tienes que ajustar la posición de #contenedor, cambiando los valores de TOP y LEFT.

    A partir de que hagas esos cambios, si cambia la posición de la cabecera, también cambiará la posición de la pestaña.

    ResponderEliminar
  18. Gracias Anna. Felicidades a tí también.

    ResponderEliminar
  19. Pasaba a desearte Felices Fiestas y un maravilloso 2010, tan maravilloso o más que este año que ya termina :D

    ResponderEliminar
  20. No se que hago mal, pero a mi no me funciona el codigo. Entiendo que donde pone URL_ENLACE0 es la url de la pagina donde ira al pinchar la imagen, y donde pone URL_IMAGEN0 la url de picasa donde esta la imagen en cuestion ¿cierto?

    ResponderEliminar
  21. Gem@, Feliz Navidad y que te crezca la boca un palmo :D

    Mercier, espero que te salga.

    Watanabe, necesitaría saber dónde intentas ponerlo y qué fallo te da concretamente.

    ResponderEliminar
  22. jajajaja hacía tiempo que no oía (leía) esa expresión :)

    ResponderEliminar
  23. Eso debe ser porque te comunicas poco con gente de por aquí ;D

    ResponderEliminar
  24. Hola Oloman, soy nuevo por aquí, pero me ha gustado mucho la ayuda que ofreces. Siento aprovechar la ocasión para preguntar, pero necesito solucionar una duda. Estoy tratando de implementar el orden aleatorio, pero necesito conbinarlo con un efecto deslizante tipo "marquee", y no lo consigo. ¿puedes aconsejarme? gracias.

    ResponderEliminar
  25. Parpix, necesitaría saber qué es lo que quieres mostrar con orden aleatorio para ver si se le puede aplicar después el MARQUEE.

    ResponderEliminar
  26. Gracias, ya lo he solucionado. Quería mostrar enlaces. Utilicé el código que enseñas y después lo introduje entre la función MARQUEE, pero no me funcionaba porque estaba escribiendo algo mal. Ahora queda fantástico porque añado enlaces con banner incluido que van deslizándose de forma vertical en un cuadro de 200px. Gracias

    ResponderEliminar
  27. Muy bueno. Lo he visto y efectivamente funciona.

    ResponderEliminar
  28. hola oloman,
    he estado intentado hacer esto, y me da un problema con el tamaño de la foto, yo introduzco todas las fotos en la matriz pero claro las fotos son tan grandes que no quedan como las tuyas sino que ocupan todo el espacio de entrada..
    la cosa es que he intentado hacerlo a mano, es decir, en vez de HTML lo e puesto en Redactar, y claro hay no salen las fotos..
    no se q hacer, no te puedo dejar el enlace del blog ya que es un blog privado a ver si me lo puedes solucionar..
    Gracias de antemano!

    ResponderEliminar
  29. ahora para colmo ni salen las fotos.. =S

    ResponderEliminar
  30. Hola Jorge V. En los elementos de la matriz, se pueden incluir estilos. Ahí podrías limitar el ancho de las imágenes. Te lo marco en uno de ellos en mayúsculas-negrita.

    enlace[0] = '<a href="URL_ENLACE0"><img src="URL_IMAGEN0" STYLE="WIDTH:400PX;"/></a>';

    ResponderEliminar
  31. Me sigue sin salir =S =S
    Puede ser porque tengo 19 fotos??
    =S =S
    la pagina sigue el mismo estilo que la tuya, es decir con leer mas.. y el ancho de la entrada es un pelin mas estrecho pero apenas es notorio..
    si me dejas un correo te invito para que veas "el por que"

    ResponderEliminar
  32. El correo está en el pie del blog.

    ResponderEliminar
  33. ya te invite, la entrada se llama bendicion...

    ResponderEliminar
  34. Jorge V. no veo por ningún sitio que hayas incluido el ancho de las imágenes, pero de todas formas tampoco te funciona el sistemas aleatorio.

    El caso es que si pretendes poner el codigo que propongo en un post, tendrás que teclearlo todo seguido para que funcione. O lo que es lo mismo, quitarle todos los saltos de línea. Son cosas de Blogger.

    <script type="text/javascript">var indice = 0;enlace = new Array();enlace[0] = '<a href="URL_ENLACE0"... etc.

    ResponderEliminar
  35. Hola, me parece muy interesante tu blog y te animo a seguir en esta línea de ayuda, sin embargo con el truco de las imágenes aleatorias como que me es imposible ponerlo en un post. Incluso quitándole todos los saltos de línea no hay manera "Su HTML no es aceptable: Tag is broken: A" Puedes escribirlo y te lo copio.
    Gracias

    ResponderEliminar
  36. Hola.
    Seguro que te faltó algo por copiar o redactar. Este es el código para un post, con dos imágenes. Copia, pega y si te funciona, ya sólo tienes que sustituir las imágenes por las tuyas y añadir las que necesites.

    <div align="center"><script type="text/javascript">var indice = 0;var final = 0;enlace = new Array();enlace[0] = '<img style="cursor:pointer; cursor:hand;width: 125px; height: 125px;" src="http://1.bp.blogspot.com/_0eC4K-qZ7AM/SxxVg40bxzI/AAAAAAAAK1s/TNzXnVmIdAo/s200/Untitled+13.jpg" border="0" alt=""/></a>';enlace[1] = '<img style="cursor:pointer; cursor:hand;width: 125px; height: 125px;" src="http://4.bp.blogspot.com/_0eC4K-qZ7AM/SxxVgkELEVI/AAAAAAAAK1k/PETgZ7Znp0M/s200/Untitled+7.jpg" border="0" alt=""/></a>'; indice = Math.random() * (enlace.length);indice = Math.floor(indice);for (i=1;i<=enlace.length;i++) {if (indice == enlace.length) indice = 0; document.write(enlace[indice]); indice++;}</script></div>

    ResponderEliminar
  37. Hola, problema resuelto, MUCHAS GRACIAS, el caso es que el código para dos imágenes tampoco me funcionaba, me decía: Su HTML no es aceptable: Tag is broken: IMG.... Lo que hice fue activar el Dejar de mostrar los errores HTML del cuerpo de esta entrada y voila por arte de magia si lo pude publicar.
    Gracias de nuevo y perdona las molestias

    ResponderEliminar
  38. Claro que no te funcionó. Acabo de darme cuenta de que me dejé dos </a> por ahí que no deberían estar. Quita esos dos tags y restaura lo de los errores.

    ResponderEliminar
  39. Hola, gracias por el script.

    Tengo unas dudas, si hay alguna forma de que las imágenes tengan una pequeña separación entre ellas y no estén pegadas, y como se puede controlar la cantidad de columnas y filas que aparecen.

    ResponderEliminar
  40. Arkano, para insertar cualquier otra cosa, sólo tienes que añadir un document.write con el contenido que quieras, detrás de la línea document.write(enlace[indice]);

    Por ejemplo, para un espacio en blanco, sería:
    document.write(' ');
    y para un salto de línea
    document.write("
    ");

    Sobre la cantidad de columnas y filas, lo más fácil es cambiar el tamaño de las imágenes para adaptarlo al ancho diponible. Si por ejemplo tienes 500px, para mostrar tres por fila, cada una debería tener entre 126px y 167px.

    Redimensionarlas complicaría bastante este código.

    ResponderEliminar
  41. Hola gracias! Tengo una duda, y si lo que se quisiera es una galeria en CSS?

    Por ejemplo tengo una galeria en CSS con diversas tablas escritas en css las cuales son

    Como podria rotar esos div?

    ResponderEliminar
    Respuestas
    1. Con CSS desconozco si se puede hacer de forma aleatoria, pero casi que apostaría a que no. Si lo que quieres es mostrar esas galerías dentro de una misma capa, en lugar de todo desplegado como se ve aquí, puede que te interese esto otro: Rotar botones o banners de manera aleatoria

      Eliminar
  42. Ya instale el código, pero las imágenes quedan pegadas y yo las quiero más despegadas para se puedan diferenciar las imágenes. Y no sé si también se le puede colocar un borde, así como están en el ejemplo. Gracias por todo.

    ResponderEliminar
    Respuestas
    1. asi queda http://mundxpres.blogspot.com

      Eliminar
    2. Ya vi que te apañaste con el hspace y el vspace. Pues de la misma forma puedes añadir un borde a la imagen: añadiéndolo como código a cada registro.

      Eliminar
  43. ME SIRVIÓ DE MUCHO PERO LO ÚNICO MALO ES QUE SI NO SE HAN DADO CUENTA LA FORMA ALEATORIA SIEMPRE SE PEGAN DE A DOS IMÁGENES ES DECIR SON ALEATORIOS PERO EN PAR

    ResponderEliminar