galeria de imagenes aleatorias

gebo · #1 (**permalink**) 01/11/2010, 09:28

Hola a todos,

A ver si me podeis ayudar con un script que no consigo realizar. El script tendría que cargar varias imagenes una al lado de la otra como si fuera una galeria de imagenes (hasta aquí lo tengo controlado)... pero necesito que las imagenes se cargen en diferente orden, aleatoriamente, cada vez que se refresque la página.
Con la función "Math.random" sólo he conseguido que se cargue una imagen cada vez .

Gracias de antemano, un saludo.

caricatos · #2 (**permalink**) 01/11/2010, 11:10

Hola gebo, bienvenido a los foros

:

Siempre puedes usar un reordenamiento de un array, puedes encontrar alguna respuesta sobre ese tema en estos foros, pero si son imágenes de una base de datos, yo prefiero rescatarlas con order by rand() de mysql,

Saludos

gebo · #3 (**permalink**) 01/11/2010, 12:19

Hola Caricatos, gracias por contestar.

He buscado por los foros lo del reordenamiento de array pero sólo lo he encontrado en php. Yo ahora mismo tengo esto:

Código:

var indice = 0;
enlace = new Array();
enlace[0] = "imagen1.jpg";
enlace[1] = "imagen2.jpg";
enlace[2] = "imagen3.jpg";
enlace[4] = "imagen4.jpg";
enlace[5] = "imagen5.jpg";
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++;
}

Con esto consigo que se cambie la primera imagen que se muestra, pero el orden sigue siendo el mismo y yo lo que quisiera es que el orden sea totalmente aleatorio....

Un saludo.

furoya · #4 (**permalink**) 12/11/2010, 14:09

Hola gebo, caricatos :

Este mensaje me trajo recuerdos de cuando el IE 5 (o Win 98, ya no estoy seguro) desconocía algunos métodos para array y terminamos inventando prototype's y demás para hacerlos compatibles. Al final encontré el tema

Manipular array

Fue un "Volver a Vivir", me encontré contigo, caricatos, con Gul Dukat, kepawe, y hasta después se sumó Neuron_376.
Seguramente algo te va a servir, gebo. Aunque hoy ya todos los métodos funcionan en los últimos navegadores, creo que el "shuffle" no lo agregaron.

De todas formas, el ejemplo que pusiste tiene un par de errores de concepto. Y redundancias. También "idas y vueltas" innecesarias.
Supongo que si te dejo un ejemplo que funcione lo vas a saber desarmar para adaptarlo a tu página. Lo que uso es un while, que me parece más eficiente en estos casos que un bucle for.
Por supuesto que splice() destruye el array original, porque le extrae (al azar, por Math.random()) un elemento en cada vuelta; pero como supongo que una vez cargado el documento ya no vas a usar de nuevo esa lista, el mecanismo sirve.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>DESORDENA IMÃGENES.</title>
<script type="text/javascript">
var lista = "";
var enlace = new Array();
enlace[0] = (new Image()).src = "http://img4.imageshack.us/img4/9595/fishes.th.jpg";
enlace[1] = (new Image()).src = "http://img338.imageshack.us/img338/7682/relojvillalongafurlongm.th.jpg";
enlace[2] = (new Image()).src = "http://img358.imageshack.us/img358/5474/screenshot036el.th.jpg";
enlace[3] = (new Image()).src = "http://img329.imageshack.us/img329/1169/img0420jn3.th.jpg";
enlace[4] = (new Image()).src = "http://img201.imageshack.us/img201/9135/ichatimage3259540742dy5.th.jpg";
enlace[5] = (new Image()).src = "http://img9.imageshack.us/img9/3651/marioquinterosc.th.jpg";

while ((enlace.length) > 0) {
var indice = Math.floor(Math.random() * enlace.length);
var otraImag = enlace.splice(indice, 1);

//PARA ENLACE  IMAGESHACK
var orig = (""+otraImag+"").split(".th").join("");
lista += "<a href="+ orig +" title='"+ orig +"'>";

lista += "<img src="+ otraImag +" alt='"+ otraImag +"'>";

//PARA ENLACE  IMAGESHACK
lista += "</a> ";
}

document.write(lista);
</script>

<style type="text/css">
body {text-align: center; }
</style>
</head>
<body>

</body>
</html>

Le agregué además los enlaces por si alguien quiere ver las imágenes originales y no las thumbnails; están marcados con comentarios para que los saques si no te sirven.