imagenes random

GidHarvey · #1 (**permalink**) 28/10/2009, 08:21

Buenas Noches amigos de FDW.
Tengo una duda con respecto a un codigo Ramdon image, el problema es que los codigos ramdon que eh puesto solo me generan para una imagen, pero yo quiero que me generen en los 6 cuadros que tengo puesto en mi index. me gustaria saber como puedo hacer para que me sirva este codigo para las 6 imagenes. un ejemplo de este codigo ramdon imagen esta aqui como puedo hacer yo para hacer eso para las 6 imagenes? aqui pongo un link de el codigo que estaba usando. aqui

aqui pongo el codigo donde estan mis 6 imagenes en el index.

Código:

<div id="radom"><span class="FontTitle">Random Images</span>
      <div id="imgrandom">
        <div class="in16"></div>
        <div id="boxrandom">
        <a class="linkopacity" href="images/random/1.jpg" rel="lyteshow[random]"><img src="images/random/box_1.jpg" width="50" height="50" border="0" class="trazo" /></a><a class="linkopacity" href="images/random/2.jpg" rel="lyteshow[random]"><img src="images/random/box_2.jpg" width="50" height="50" hspace="8" border="0" class="trazo" /></a><a class="linkopacity" href="images/random/3.jpg" rel="lyteshow[random]"><img src="images/random/box_3.jpg" width="50" height="50" border="0" class="trazo" /></a></div>
        <div class="in8"></div>
        <div id="imgrandom2"><a class="linkopacity" href="images/random/4.jpg" rel="lyteshow[random]"><img src="images/random/box_4.jpg" width="50" height="50" border="0" class="trazo" /></a><a class="linkopacity" href="images/random/5.jpg" rel="lyteshow[random]"><img src="images/random/box_5.jpg" width="50" height="50" hspace="8" border="0" class="trazo" /></a><a class="linkopacity" href="images/random/6.jpg" rel="lyteshow[random]"><img src="images/random/box_6.jpg" width="50" height="50" border="0" class="trazo" /></a></div>
      </div>
    </div>

Saludos de antemano muchas gracias.

GidHarvey · #2 (**permalink**) 28/10/2009, 18:37

alguien que me ayude porfavor...

GidHarvey · #3 (**permalink**) 30/10/2009, 12:17

lo que necesito basicamente es, que las imagenes que tengo en una carpeta de la raiz del sitio aparescan random en unos cuadraditos de 50x50 como puedo hacer esto, porfavor alguien que me ayude. salusod.

zerokilled · #4 (**permalink**) 30/10/2009, 19:34

fijate si el siguiente tema te ayuda. quizas necesites alguna pequeña adaptacion pero el codigo central esta ahi, http://www.forosdelweb.com/f13/funci...s-pero-749025/

GidHarvey · #5 (**permalink**) 31/10/2009, 09:53

buenas tardes zerokilled, muchas gracias por esa ayuda, pero como tendria que color yo esos codigos en mi html :s no entiendo en que parte los tendria que poner, dame alguna pista, saludos.

zerokilled · #6 (**permalink**) 31/10/2009, 11:53

el codigo lo tienes que poner entre las etiquetas <script> </script> y este lo pones dentro de HEAD o BODY. luego, cada vez que quieras imprimir una imagen, tienes que invocar la funcion ImagenAleatoria en el lugar donde quieres que aparezca la imagen. lo invocas de esta manera

Código:

<script type="text/javascript">
ImagenAleatoria(num); 
</script>

num es un numero fijo pero en cada invocacion tiene que ser diferente. el numero tiene que estar dentro de los limites de la longitud del array.

Cita:

lo que necesito basicamente es, que las imagenes que tengo en una carpeta de la raiz del sitio aparescan random...

quede claro que javascript no puede leer el contenido de carpetas, de modo que tu mismo tienes crear el array de rutas.

GidHarvey · #7 (**permalink**) 31/10/2009, 16:40

Buenas tardes Zerokilled.
Aqui tengo el codigo puesto como crei que se ponia, pero no funciona :S como tengo que ponerlo para que funcione? saludos y muchas gracias.

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<style type="text/css"> 
<!-- 
.in8 { 
    padding-bottom: 8px; 
} 
--> 
</style> 
</head> 
<script type="text/javascript"> 
ImagenAleatoria(num);  
var num = Math.floor(Math.random()*11)+1; 
var num2 = Math.floor(Math.random()*11)+1; 
if (num == num2) num2 = (num2-1) 
if (num2 == 0 && num < 11) num2 = (num+1) 
alert(num + " " + num2); 
</script> 
<body> 
<div id="radom"><span class="FontTitle">Random Images</span> 
      <div id="imgrandom"> 
        <div class="in16"></div> 
        <div id="boxrandom"> 
        <a class="linkopacity" href="images/random/1.jpg" rel="lyteshow[random]"><img src="images/random/box_1.jpg" width="50" height="50" border="0" class="trazo" /></a><a class="linkopacity" href="images/random/2.jpg" rel="lyteshow[random]"><img src="images/random/box_2.jpg" width="50" height="50" hspace="8" border="0" class="trazo" /></a><a class="linkopacity" href="images/random/3.jpg" rel="lyteshow[random]"><img src="images/random/box_3.jpg" width="50" height="50" border="0" class="trazo" /></a></div> 
        <div class="in8"></div> 
        <div id="imgrandom2"><a class="linkopacity" href="images/random/4.jpg" rel="lyteshow[random]"><img src="images/random/box_4.jpg" width="50" height="50" border="0" class="trazo" /></a><a class="linkopacity" href="images/random/5.jpg" rel="lyteshow[random]"><img src="images/random/box_5.jpg" width="50" height="50" hspace="8" border="0" class="trazo" /></a><a class="linkopacity" href="images/random/6.jpg" rel="lyteshow[random]"><img src="images/random/box_6.jpg" width="50" height="50" border="0" class="trazo" /></a></div> 
      </div> 
    </div> 
</body> 
</html>

zerokilled · #8 (**permalink**) 31/10/2009, 21:23

primero, la etiqueta <script> esta mal ubicada. no puede ir entre HEAD y BODY, tiene que ir dentro de uno de los dos. y segundo, el codigo que copiastes, no es el que necesitas. a continuacion la porcion que necesitas,

Código:

var listado = [/* tu array con rutas a imagenes o la informacion que fuera */];
// barajar el orden;
listado.sort(function(){return Math.round(Math.random()) - .5;});
function ImagenAleatoria(num) {
document.write('<P><IMG SRC="img_aleatorias/img_aleatoria'+ listado[num] +'.jpg" BORDER="0"></P>');
}

te recuerdo que cada vez que quieras imprimir una imagen, tienes que invocar la funcion en el lugar de tu documento donde quieres que aparezca la imagen.

GidHarvey · #9 (**permalink**) 01/11/2009, 09:58

Buenas Tardes Zerokilled.

Mira disculpa mi ignorancia pero soy nuevo en esto de javascript, y no entiendo mucho de los codigos y su metodologia, bueno eh puesto el codigo como me dijiste, pero el problema sigue no cambian las imagenes, yo creo que el problema es por que no entiendo mucho como tengo que configurar los codigos que me proporcionas, seria posible que fueras un poco mas claro en cuanto a la configuracion que tengo que darle al codigo? porfavor.

lo que yo hice es esto ahora.

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<script> 
var listado = ["box_1.jpg", "box_2.jpg", "box_3.jpg", "box_4.jpg", "box_5.jpg", "box_6.jpg", "box_7.jpg"]; 
// barajar el orden; 
listado.sort(function(){return Math.round(Math.random()) - .5;}); 
function ImagenAleatoria(num) { 
document.write('<P><IMG SRC="images/random'+ listado[num] +'.jpg" BORDER="0"></P>'); 
} 
</script> 
</head> 
 
<body> 
<div id="ramdon"> 
<div id="col1"><img src="images/random/box_1.jpg" width="50" height="50" /><img src="images/random/box_2.jpg" width="50" height="50" hspace="8" /><img src="images/random/box_3.jpg" width="50" height="50" /></div> 
  <div id="col2"><img src="images/random/box_4.jpg" width="50" height="50" vspace="8" /><img src="images/random/box_5.jpg" width="50" height="50" hspace="8" vspace="8" /><img src="images/random/box_6.jpg" width="50" height="50" vspace="8" /></div> 
</div> 
</body> 
</html>

zerokilled · #10 (**permalink**) 01/11/2009, 10:16

no tienes que poner explicitamente las imagenes en el codigo html, eso lo hara la funcion. es decir, dentro de los DIVs col1 y col2, solo tienes que invocar la funcion las tantas veces que tu quieras. o sea, dentro de los DIVs tienes que poner

Código:

<script type="text/javascript">
ImagenAleatoria(0); // esta linea la repites tantas veces tu quieras pero con un numero diferente como en la siguient linea.
ImagenAleatoria(1);
...
</script>

por otro lado, viendo tu ejemplo, la siguiente linea tienes que modificarla para que se ajuste a tus necesidades.

Código:

document.write('<P><IMG SRC="images/random'+ listado[num] +'.jpg" BORDER="0"></P>');

lo unico que tienes que cambiar es la porcion equivalente a HTML. es decir:

el SRC de la imagen para que sea equivalente con la estructura de directorios que tengas.
si deseas quitar la etiquetas P.
tienes que agregar las dimensiones width y/o height de la imagen.

GidHarvey · #11 (**permalink**) 01/11/2009, 10:48

Buenas zerokilled.
Ya lo entendi un poco mas pero sigue sin funcionar la opcion ramdon :s

aqui esta el codigo que consegui, no se que puede estar fallando :s

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<script> 
var listado = ["box_1.jpg", "box_2.jpg", "box_3.jpg", "box_4.jpg", "box_5.jpg", "box_6.jpg",]; 
// barajar el orden; 
listado.sort(function(){return Math.round(Math.random()) - .5;}); 
function ImagenAleatoria(num) { 
document.write('<IMG SRC="images/random'+ listado[num] +'.jpg" BORDER="0" width="50" height="50">'); 
} 
</script> 
</head> 
 
<body> 
<div id="ramdon"> 
<div id="col1"> 
<script type="text/javascript"> 
ImagenAleatoria(1); 
ImagenAleatoria(2); 
ImagenAleatoria(3); 
</script> 
</div> 
<div id="col2"> 
<script type="text/javascript"> 
ImagenAleatoria(4); 
ImagenAleatoria(5); 
ImagenAleatoria(6); 
</script> 
</div> 
</div> 
</body> 
</html>

zerokilled · #12 (**permalink**) 01/11/2009, 11:02

debe estar fallandote en el SRC, recuerda que el SRC debe apuntar al directorio donde tienes las imagenes. y por ultimo, te sigo recordando que el numero que le pasas a la funcion tiene que ser dentro de los limites del array. los array siempre comienzan por 0. es decir, si tienes 6 elementos, el primer elemento es 0, el segundo es 1, tercero 2, y asi sucesivamente.

GidHarvey · #13 (**permalink**) 01/11/2009, 11:24

no funciona el codigo zerokilled. aqui hice lo que me dijsite, las imagenes las tengo alojadas en images/random asi que el src esta bien :S cual sera el problema :S?

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<script> 
var listado = ["box_1.jpg", "box_2.jpg", "box_3.jpg", "box_4.jpg", "box_5.jpg", "box_6.jpg",]; 
// barajar el orden; 
listado.sort(function(){return Math.round(Math.random()) - .5;}); 
function ImagenAleatoria(num) { 
document.write('<img src="images/random'+ listado[num] +'.jpg" BORDER="0" width="50" height="50">'); 
} 
</script> 
</head> 
 
<body> 
<div id="ramdon"> 
<div id="col1"> 
<script type="text/javascript"> 
ImagenAleatoria(0); 
ImagenAleatoria(1); 
ImagenAleatoria(2); 
</script> 
</div> 
<div id="col2"> 
<script type="text/javascript"> 
ImagenAleatoria(3); 
ImagenAleatoria(4); 
ImagenAleatoria(5); 
</script> 
</div> 
</div> 
</body> 
</html>

JavierB · #14 (**permalink**) 01/11/2009, 11:27

Hola GidHarvey

¿No tendrías que ponerlo así?

Código javascript:

Ver originaldocument.write('<img src="images/random/'+ listado[num] ...

Saludos,

GidHarvey · #15 (**permalink**) 01/11/2009, 11:50

tampoco funciona eso, ya lo habia probado :( saludos.

zerokilled · #16 (**permalink**) 01/11/2009, 12:09

ademas de lo dicho por JavierB, quitale la extension .JPG en la linea que señalo JavierB.

GidHarvey · #17 (**permalink**) 01/11/2009, 12:20

Muchas Gracias zerokilled ahora si funciona, pero tengo un problema, las imagenes que tengo son artas y en la parte donde quiero que salgan solo tienen que salir 6 imagenes random. y si yo sigo agregando el valor:

Código PHP:

  ImagenAleatoria(0);

me siguen apareciendo mas imagenes entonces ya no serian 6 serian 7, como puedo hacer para que solo aparescan 6 imagenes y me tome toda la carpeta random?

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<script> 
var listado = ["box_1.jpg", "box_2.jpg", "box_3.jpg", "box_4.jpg", "box_5.jpg", "box_6.jpg"]; 
// barajar el orden; 
listado.sort(function(){return Math.round(Math.random()) - .5;}); 
function ImagenAleatoria(num) { 
document.write('<img src="images/random/'+ listado[num] +'" BORDER="0" width="50" height="50">'); 
} 
</script> 
</head> 
 
<body> 
<div id="ramdon"> 
<div id="col1"> 
<script type="text/javascript"> 
ImagenAleatoria(0); // si le sigo poniendo mas me saldrian mas de 6, yo quiero que me salgan 6 y a la vez que ramdomize toda las de la carpeta random 
 
ImagenAleatoria(1); 
ImagenAleatoria(2); 
</script> 
</div> 
<div id="col2"> 
<script type="text/javascript"> 
ImagenAleatoria(3); 
ImagenAleatoria(4); 
ImagenAleatoria(5); 
</script> 
</div> 
</div> 
</body> 
</html>

zerokilled · #18 (**permalink**) 01/11/2009, 12:39

del mensaje #6,

Cita:

quede claro que javascript no puede leer el contenido de carpetas, de modo que tu mismo tienes crear el array de rutas.

en el array listado tienes que ingresar manualmente todas las imagenes que tu quieres que aparezcan aleatoriamente. esto porque javascript no tiene la habilidad de leer contenido de carpetas. la cantidad de veces que vas a invocar la funcion va de acuerdo a la cantidad de veces que tu quieres imprimir en pantalla una imagen, o sea, en tu caso son un total de 6 veces, no mas ni menos.

GidHarvey · #19 (**permalink**) 01/11/2009, 13:41

sin son 14 imagenes y cada una se llama box_1.jpg box_2.jpg box_3.jpg hasta el box_14.jpg ,como tendria que ponerlas, podrias hacer un ejemplo porfavor?

zerokilled · #20 (**permalink**) 01/11/2009, 13:49

aqui mismo lo has hecho,

Código:

var listado = ["box_1.jpg", "box_2.jpg", "box_3.jpg", "box_4.jpg", "box_5.jpg", "box_6.jpg"];

es cuestion de poner el nombre de la imagen entre comillas, y cada elemento lo separas con una coma.

GidHarvey · #21 (**permalink**) 01/11/2009, 14:11

ah ok muchas gracias, yo entendi que lo tenia que poner aqui

Código:

document.write('<img src="images/random/'+ listado[num] +'" BORDER="0" width="50" height="50">');

GidHarvey · #22 (**permalink**) 01/11/2009, 15:38

creo que el codigo no me sirve para lo que yo quiero, por que si continuo agregando mas de estos

Código PHP:

  ImagenAleatoria(8);

en los div

Código PHP:

  <div id="col1"> 
<script type="text/javascript"> 
ImagenAleatoria(0); 
ImagenAleatoria(1); 
ImagenAleatoria(2); 
ImagenAleatoria(3); 
ImagenAleatoria(6); 
ImagenAleatoria(7); 
</script> 
</div>

por ejemplo

Código PHP:

  <div id="col1"> 
<script type="text/javascript"> 
ImagenAleatoria(0); 
ImagenAleatoria(1); 
ImagenAleatoria(2); 
ImagenAleatoria(3); 
ImagenAleatoria(6); 
ImagenAleatoria(7); 
ImagenAleatoria(8); 
</script> 
</div>

ya no me saldrian 6 imagenes me saldrian 7 imagenes para random. no es posible hacer que aparescan 6 imagenes pero que al randomizar tome por random 14 imagenes?

el codigo ya funciona asi que no hay problema, el problema es que salgan 6 imagenes al azar pero que sean 6 de la carpeta donde las tengo y en la carpeta tengo 14 imagenes es posible hacer esto o no :s?

zerokilled · #23 (**permalink**) 01/11/2009, 21:26

Cita:

el problema es que salgan 6 imagenes al azar pero que sean 6 de la carpeta donde las tengo y en la carpeta tengo 14 imagenes es posible hacer esto o no :s?

si es que comprendi bien, tienes que crear un listado de imagenes para cada carpeta. mira el siguiente ejemplo, http://medinacolon.awardspace.com/di...umb/random.htm, en el codigo fuente puedes apreciar que se carga el archivo random.js pero segun el documento, el listado tiene diferentes imagenes.

GidHarvey · #24 (**permalink**) 02/11/2009, 08:15

Buenos dias zerokilled, eso era exactamente lo que necesitaba, ya lo tengo listo el codigo, me encanto esta genial, ahora queria saber si es posible ponerle clase a este codigo? por ejemplo

Código:

hspace="8" border="0"

y tambien si se le puede poner link y como se haria para poner eso, es la unica duda que me estaria faltando.

muchas gracias zerokilled me ayudaste bastante hay va el karma, saludos.

atte Gidharvey

GidHarvey · #25 (**permalink**) 02/11/2009, 13:30

se podra hacer esto?

zerokilled · #26 (**permalink**) 02/11/2009, 21:06

le puedes añadir lo que tu quieras. fijate que dentro de los parentesis de document.write el contenido es simple codigo HTML. es cuestion de ir agregandole los elementos o atributos que necesites pero teniendo cuidado en no interferir con la sintaxis javascript. para ponerle link, lo mas obvio es que cada imagen tendra una ruta distintas por lo cual tienes que modificar practicamente todo tu listado para que en lugar retener una ruta este guarde un objeto que contenga dos informacion: la ruta de imagen y la ruta de enlace.

te viene bien los siguientes enlaces librosweb.es, lawebera.es, y puedes buscar muchos mas en tu buscador favorito con terminos tutorial javascript objetos. te aviso que no te proporcionare ningun codigo adaptado si no pones de tu parte.

GidHarvey · #27 (**permalink**) 03/11/2009, 10:06

muchas gracias zerokilled, ya lo habia echo, saludos y muchas gracias, cuidate

rakelurien · #28 (**permalink**) 04/11/2009, 02:38

Hola buenas.
solo comentaros que yo ando con lo siguiente: quiero que en un index haya 3 imagenes diferentes que estan metidos en en una tabla de 3 celdas diferentes y que cada vez que se actualize se cambien las tres imagenes.
quiero conseguir algo usando javascript.

el codigo es el siguiente:
<html>
<head>
</head>
<script>

rnd.today=new Date();
rnd.seed=rnd.today.getTime();
AImages=[
"foto1.jpg",
"foto2.jpg"
"foto3.jpg",
]
function rnd() {
rnd.seed = (rnd.seed*9301+49297) % 233280;
return rnd.seed/(233280.0);
};

function rand(number) {
var n=Math.ceil(rnd()*number);
document.getElementById("3d").src=AImages[n-1]
};

</script>
<body>

El apartado de la otra imagen seria lo mismo con su <script></script> correspondiente, pero cogiendo las imagenes de la carpeta que le corresponde y de la tercera imagen otro tanto con su <script > </script > correspondiente y sus imagenes.
luego en el body en la celda donde quiero aparecer la imagen pongo lo siguiente:
<td width="33%" align="center" valign="top"><img src="(nombre de la carpeta general donde esta las fotos)" id="(el nombre del getElementById) que le he dado arriba"></td>
cada una de las imagenes con su< td></td> en el body. Supongo que tendría que salir pero solo consigo que salga una de ellas y si pongo en comentario dos de ellas me sale la que no esta en comentario ¿podrías abrirme los ojos para ver donde fallo?
Gracias.