Imagen variable pero no repetida.

akiraproject · #1 (**permalink**) 19/04/2003, 19:10

Hola estoy intentando hacer una pagina con galerias de fotos, pero me gustaria que por ejemplo yo tengo en una carpeta 1000 thumbnails y que cada thumbnail tenga una direccion url de destino.
Como podria hacerlo para que por ejemplo se vieran en pantalla 50 thumbnails de esos "aleatoriamente" en cada pantalla, pero no repetidos!.
Ademas al aparecer aleatoriamente no se repetirian los mismos cada vez que un usuario entrara en la pagina.
Creo que eso en javascript se podria hacer, pero lo dificil es decir si se ha mostrado el thumbnail 23 que cuando piquen encima vaya a la url del 23.
Igual se puede hacer en PHP, pero yo no tengo ni idea de PHP.

ALGUNA SUGERENCIA?? o alguien sabe como hacerlo???

GRACIAS A TODOS!

maestro · #2 (**permalink**) 19/04/2003, 19:22

Podrias usar el objeto FSO para leer las imagenes que hay en una carpeta y detenerte en una de ellas al azar usando RANDOM despues un tag <IMG> normal y corriente para vincularla.

Creas un FSO
<%
'creacion del objeto FSO
Set filesystem = CreateObject("Scripting.FileSystemObject")
Set folder = filesystem.GetFolder(server.mappath("images"))
Set filecollection = folder.Files
%>

con esto podrias moverte a un fichero aleatorio de la coleccion
<%
Randomize()
intRandomNumber = Int((intTotalRecords * Rnd))
%>

Y lo muestras
<img src="images/<%=nombrefichero%>">

OJO, son solo ideas deberia capturar el nombre de la imagen y deternerte en una determinada sin pasarte del numero maximo

, eso ya te lo dejo para que te escurras el coco

akiraproject · #3 (**permalink**) 19/04/2003, 21:34

Ostias..... y que es un FSO?
Lo veo bastante chungo lo que me dices...
Bueno chungo... es que no se a que te refieres ???

KarlanKas · #4 (**permalink**) 21/04/2003, 02:53

Hola akiraproject!!

Tengo una duda, No quieres que se repitan las 50 imágenes en las distintas visitas que realice el usuario de tu página o sólo en una visita?
Si es sólo en una visita no habría problema. Si es a lo largo de distintas visitas tendría que hacerse con cookies y JS. O con cualquier lenguaje del lado del servidor.

Aclaralo y nos ponemos en marcha!

akiraproject · #5 (**permalink**) 21/04/2003, 04:14

Lo que no quiero es que se repitan en la pantalla.
Una vez el user vuelva a entrar volvera a escoger 50 imagenes de las 1000 del directorio y sin repetir ninguna de las 50.
Las haya visto ya o no las haya visto en otras entradas a la pagina.

KarlanKas · #6 (**permalink**) 21/04/2003, 05:30

OK! Mucho más fácil!

akiraproject · #7 (**permalink**) 21/04/2003, 16:45

Mucho mas facil?, pues para mi sigue siendo igual de dificil.
Nadie me puede ayudar?
Abrazos

tunait · #8 (**permalink**) 21/04/2003, 17:01

Hola akiraproject,

seguro KarlanKas lo tiene medio cocinado, sólo que hoy anduvo con algunos líos en su pc. En cuanto esté online te da tu script

saludos

akiraproject · #9 (**permalink**) 21/04/2003, 17:04

Gracias por la respuesta y me espero...
AGUR!

KarlanKas · #10 (**permalink**) 22/04/2003, 03:31

J.Diego!!

Gracias por la paciencia! No veas el infierno ayer!! Tuve que comprar un disco duro nuevo e instalar todo lo que tenía en el anterior... configurarlo todo... buscar copias de seguridad, pelearme con el IIS de nuevo... un auténtico infierno. Pero ya estoy aquí de nuevo!

Mira, te he hecho este script que busca 50 números entre el 1 y el 1000 aleatoriamente. No repite ninguno. Pero no me termina de convencer... consume muchos recursos... estoy pensando hacerlo de nuevo. Lo que necesito saber es el formato del nombre de tus imágenes y demás para poder hacertelo más personalizado...

Dime si te sirve

Código:

<html>
<head>
	<title>Untitled</title>

</head>

<body style="font:normal 10px/15px courier;">

<script>
var mal=0;
imagen=new Array();
for (a=1;a<51;a++){
if (a<10){anadido="0"}
else{anadido=""}
if (a%10==0){salto="<br>"}
else{salto=""}

imagen[a]=Math.floor(Math.random()*1000);//Elige un número del 1 al 1000
for (b=0;b<(imagen.length-1);b++){
if(imagen[a]==imagen[b]){a=a-1;mal=1;break}//Comprueba que no sea igual a los anteriores
}// A partir de aquí es para mostrarlo en pantalla... se cambiaría por el código de las imágenes
if (imagen[a]<100){anadido1="0"}
if (imagen[a]<10){anadido1="00"}
if (imagen[a]>99){anadido1=""}
if(mal!=1){document.write("<b>"+anadido+a+":</b> "+anadido1+imagen[a]+"  |  "+salto);}
else{mal=0}
}

</script>

</body>

akiraproject · #11 (**permalink**) 22/04/2003, 04:31

Las imagenes son en gif o jpg da igual.
Son pequeñas unas 146x110.
Por cierto hay manera de poder mandar cada imagen a una url.
Por ejemplo si se ve la imagen 33 que al picar entres en la url que tenga el numero 33.
Yo habia pensado en un fichero de texto con las url y que la imagen fuera el numero de linea o separadas por una ",".
Gracias por tu ayuday un fuerte saludo.
Ahh! siento lo de disco duro.

KarlanKas · #12 (**permalink**) 22/04/2003, 04:53

Gracias por el pésame

Mira, lo mejor es que pongas, ya que las quieres tener ordenadas, todas las imágenes en un array, ¿como? creas un archivo de texto sin nada con el notepad y añades lo siguiente:

imagenes=new Array;

for (c=0;c<1000;c++){imagenes[c]=new Image;}

imagenes[0].src="imagenes/001akira.jpg";
imagenes[1].src="imagenes/002.jpg";
imagenes[3].src="imagenes/hisamutosentado.jpg";
...

Una vez hayas rellenado todo lo guardas con el original nombre de imagenes.js

Antes de seguir dime si lo entiendes o qué te parece la idea

akiraproject · #13 (**permalink**) 22/04/2003, 04:58

El nombre que le debo dar al fichero es x.js ?
Por lo demas TODO entendido y gracias y perdona las molestias.

KarlanKas · #14 (**permalink**) 22/04/2003, 05:12

No te preocupes! Me divierte!
eso es. Y cómo quieres que aparezcan las imágenes?

akiraproject · #15 (**permalink**) 22/04/2003, 07:15

Ahora si que no te entiendo...
Como quiero que aparezcan las imagenes???
No se a que te refieres de veras.
Pues que aparezcan.

KarlanKas · #16 (**permalink**) 22/04/2003, 09:30

Tienes que hacer el archivo que te dije, si lo llamas imagenes.js no tienes que hacer ningún cambio. Si no cambialo por el nombre del archivo que crees.

Una vez hecho esto ponlo en el mismo directorio que el archivo siguiente y dime que tal...

Código:

<html>
<head>
	<title>Untitled</title>
<script src="imagenes.js">
//Cambia el nombre de este archivo por el que tengas 
</script>
</head>

<body style="font:normal 10px/15px courier;">


<script>
var mal=0;
imagen=new Array();
for (a=1;a<51;a++){

imagen[a]=Math.floor(Math.random()*1000);
for (b=0;b<(imagen.length-1);b++){
if(imagen[a]==imagen[b]){a=a-1;mal=1;break}
}
if(mal!=1){
if (a%10==0){salto="<br>"+a}
else{salto="&nbsp;"+a}
document.write(salto+'<img src="'+imagenes[imagen[a]].src+'">');}
else{mal=0}
}

</script>

</body>

akiraproject · #17 (**permalink**) 22/04/2003, 09:34

Gracias esta noche lo pruebo y te comunico los resultados.
De todas maneras millones de gracias...
De verdad que gracias.

KarlanKas · #18 (**permalink**) 22/04/2003, 09:43

No tienes porqué darlas... estoy pensando que tal vez eso carga mucho la página...

Esperate que voy a probar otra cosa... Vamo, prueba esto a ver si te va bien. Pero voy a hacer unos pequeños cambios...

KarlanKas · #19 (**permalink**) 22/04/2003, 10:34

Listo!

He hecho unos cambios que espero que hagan que se inicie la página más rápido.

El archivo x.js (imagenes.js) es ahora más sencillo. Simplemente tiene :
----------------------- imagenes.js -------------------------------

Código:

imagenes=new Array();

imagenes[0]="http://www.fotitoschulas.com/mifoto.jpg";
imagenes[1]="imagen.jpg";
imagenes[2]="secciones/apaleamientos/supermanapaleado.gif";
...
imagenes[999]="laultimaimagen.jpg";

Y luego la página que los llama tiene lo siguiente:

Código:

<html>
<head>
	<title>50 Imágenes</title>
<script src="imagenes.js"></script>	
<script>
imagen=new Array();
for (a=0;a<50;a++){
			imagen[a]=new Image();
			elige=Math.floor(Math.random()*1000);
			imagen[a].src=imagenes[elige];
			imagen[a].numero=elige;
			for (b=0;b<(imagen.length-1);b++){
							if(imagen[a].numero==imagen[b].numero){
															a=a-1;break
																	}
											}

					}
	
</script>

</head>

<body>

<script>
for (d=0;d<imagen.length;d++){
if (d%10==0){document.write("<br>")}
document.write('<img ALT="'+imagen[d].numero+'" src="'+imagen[d].src+'"> ');}

</script>

</body>

Espero que te vaya bien!! Comentame lo que sea!

akiraproject · #20 (**permalink**) 22/04/2003, 20:42

He salido y he llegado tarde....
Lo siento... me voy a dormir porque estoy un poco hecho polvo. (mira la hora del mensaje!).
Mañana lo pruebo SEGURO y te digo algo.
Oye una cosa los espacios entre } y } son normales?
Los debo de incluir?.
Lo comprobare por ahora con una carpeta de 100 imagenes.
Por cierto se me plantea una duda... es posible montar varios ficheros x.js (imagenes.js) ??
Lo digo para ir cambiando de imagenes y de urls.
Abrazos y buenas noches!

KarlanKas · #21 (**permalink**) 23/04/2003, 02:29

No te preocupes!! La verdad es que las horitas no son como para estar haciendo
pruebas , espero que hayas dormido como un bendito.

Tómate un buen

café y lo pruebas hoy con más calma.

Los espacios no son necesarios, pero ayudan a la comprensión del código. Los puedes quitar si quieres.

Puedes hacer todos los archivos js, pero si vas a llamar a sólo uno cada vez no te olvides de
llamarlos imagenes[n] empezando siempre por imagenes[0].

Mi ordenador de casa sigue fallando

creo que es la fuente de alimentación... así que tal vez no
pueda contestarte esta noche...

Un saludo!

akiraproject · #22 (**permalink**) 24/04/2003, 19:59

Hola!
Oye lo estoy probando, tengo el imagenes.js pero una cuestion
Alli pongo el link de las imagenes... ??????????
Pero el link de la URL de la imagen???????

akiraproject · #23 (**permalink**) 24/04/2003, 20:39

Lo acabo de probar y... FENOMENAL!!!!
Eres un crack.
Lo he probado sobre una carpeta de 100 imagenes y que mostrara 50 aleatoriamente y... perfecto!
Lo has clavado, ademas va muy rapido.
Ahora me gustaria que cada imagen tuviera asociado un link.
Mi idea seria que en el archivo de imagenes.js
pudiera ser algo asi:

imagenes=new Array();
imagenes[0]="http://www.fotitoschulas.com/mifoto.jpg","URL DESTINO";
imagenes[1]="imagen.jpg","URL DESTINO";
imagenes[2]="secciones/apaleamientos/supermanapaleado.gif","URL DESTINO";
...
imagenes[999]="laultimaimagen.jpg","URL DESTINO";

No se si se podra hacer algo asi o similar...
Aunque visto lo bueno que eres al igual se puede con un sistema mucho mejor.
Tambien igual es haciendo otro urls.js con las url de destino en cada linea...
Miratelo y ya me diras algo yo de mientras a preparar imagenes

Cuando acabemos te enseñare el resultado compi.
ABRAZOS.

KarlanKas · #24 (**permalink**) 25/04/2003, 01:54

hola akiraproject!!
Me alegro de qe te fuera bien. Este proyecto me recuerda mucho a uno que mantuve hace
algún tiempo con epa2(Hola, agente transmutador!!) se llamaba el Proyecto PAIs.

Pues sí, es fácil eso. No te preocupes que lo hacemos. Pero sóo un favor, la próxima vez
pídelo todo junto. Es mas fácil así

Pues nada, en breve lo tienes

Un abrazo

PD.- Me encantaría ver tu página!

maestro · #25 (**permalink**) 25/04/2003, 03:46

Pues si, Karlankas es el rey del javascript.

Otra abduccion mas para ti.

KarlanKas · #26 (**permalink**) 25/04/2003, 04:59

Vamos a ver!

Ya está! Puedes poner un archivo de URL y otro de IMÁGENES o ponerlo todo juntos.
Sólo tienes que eliminar una de las dos opciones del código de la página, según elijas.

También he puesto una variable que determina si los enlaces se abren en una ventana nueva
o en la misma. Es nuevaVentana. Si está en false se abren todos los enlaces en la misma,
si pones true se abre en una nueva ventana.

Opción1

Código:

---------------------------imagenesyurl.js-----------------------------------------------------

imagenes=new Array();
enlaces=new Array();

imagenes[0]="http://www.fotitoschulas.com/mifoto.jpg";
enlaces[0]="http://www.fotosraras.com";

imagenes[1]="imagen.jpg";
enlaces[1]="http://www.cosasquepasan.com/cositas/otro.html";

imagenes[2]="secciones/apaleamientos/supermanapaleado.gif";
enlaces[2]="akira/biografia.html"
...
imagenes[999]="laultimaimagen.jpg";
enlaces[999]="www.ultimisimo.com";
--------------------------------------------------------------------------------

O separado:

Opcion 2

Código:

-----------------------------imagenes.js---------------------------------------------------

imagenes=new Array();

imagenes[0]="http://www.fotitoschulas.com/mifoto.jpg";
imagenes[1]="imagen.jpg";
imagenes[2]="secciones/apaleamientos/supermanapaleado.gif";
...
imagenes[999]="laultimaimagen.jpg";
--------------------------------------------------------------------------------

-----------------------------enlaces.js---------------------------------------------------

enlaces=new Array();

enlaces[0]="http://www.fotosraras.com";
enlaces[1]="http://www.cosasquepasan.com/cositas/otro.html";
enlaces[2]="akira/biografia.html"
...
enlaces[999]="www.ultimisimo.com";
--------------------------------------------------------------------------------

y el script de la página quedaría así:

Código:

<html>
<head>
	<title>50 Imágenes</title>

//-------------OPCIÓN 1--------------------
<script src="imagenesyurl.js"></script>
//----------------------------------------------

//----------- OPCIÓN 2----------------------
<script src="imagenes.js"></script>
<script src="enlaces.js"></script>	
//----------------------------------------------

<script>

var ventanaNueva=false; //Ponlo en true si quieres que los enlaces se abran en ventanas nuevas.

destino=(ventanaNueva)?"_blank":"_self";
imagen=new Array();
for (a=0;a<50;a++){
			imagen[a]=new Image();
			elige=Math.floor(Math.random()*1000);
			imagen[a].src=imagenes[elige];
			imagen[a].enlace=enlaces[elige];
			imagen[a].numero=elige;
			for (bb=0;b<(imagen.length-1);bb++){
							if(imagen[a].numero==imagen[bb].numero){
															a=a-1;break
																	}
											}

					}
	
</script>

</head>

<body>

<script>
for (d=0;d<imagen.length;d++){
if (d%10==0){document.write("<br>")}
document.write('<a onfocus="this.blur()" href="'+imagen[d].enlace+'" border="0" target="'+destino+'"><img border="0" ALT="'+imagen[d].numero+'" src="'+imagen[d].src+'"></a> ');}

</script>

</body>

</html>

Dime si tienes algún problema o algo falla....

Un saludo!

Muchas gracias por el piropo maestro, aunque creo que es exagerado, en estos
foros hay gente que se merecen el calificativo de rey del javascript mucho más
que yo! Un saludo para tí también!

akiraproject · #27 (**permalink**) 25/04/2003, 07:06

Hola!
He probado con la opcion 1 ya que veo la mas comoda, asi se tienen las imagenes y las urls en un fichero.
Al ejecutar la pagina me sale un cuadrado que me dice undefined.
Al pulsar sobre aviso de error de explorer me dice:
'imagenes' no esta definido.
Que puede pasar?

KarlanKas · #28 (**permalink**) 25/04/2003, 07:50

Hola!

He comprobado el código y había un pequeño fallo. Mira a ver ahora. También comprueba que tienes en el archivo js esto:

Código:

imagenes=new Array();
enlaces=new Array();

Código:

<html>
<head>
	<title>50 Imágenes</title>

<script src="imagenesyurls.js"></script>
<script>


var ventanaNueva=false; //Ponlo en true si quieres que los enlaces se abran en ventanas nuevas.

destino=(ventanaNueva)?"_blank":"_self";
imagen=new Array();
for (a=0;a<50;a++){
			imagen[a]=new Image();
			elige=Math.floor(Math.random()*1000);
			imagen[a].src=imagenes[elige];
			imagen[a].enlace=enlaces[elige];
			imagen[a].numero=elige;
			for (bb=0;bb<(imagen.length-1);bb++){
							if(imagen[a].numero==imagen[bb].numero){
															a=a-1;break
																	}
											}

					}
	
</script>

</head>

<body>

<script>
for (d=0;d<imagen.length;d++){
if (d%10==0){document.write("<br>")}
document.write('<a onfocus="this.blur()" href="'+imagen[d].enlace+'" border="0" target="'+destino+'"><img border="0" ALT="'+imagen[d].numero+'" src="'+imagen[d].src+'"></a> ');}

</script>

</body>

</html>

akiraproject · #29 (**permalink**) 25/04/2003, 10:14

Bueno... bueno... bueno...

Que sepas que el codigo va a la perfeccion!!!
Ahora dame un par de dias para añadir mis graficos y darle un diseño majo a la cosa en cuestion.
En cuanto lo tenga te envio un mensaje con la url para que veas la obra de arte.
Lo dicho que millones de gracias por tu ayuda y que sepas que lo tenia en mente desde hace mucho tiempo pero ahora por fin va a coger forma.
GRACIAS AMIGO !
Con gente como tu da gusto vivr.
Gracias.

KarlanKas · #30 (**permalink**) 25/04/2003, 15:29

Bueno bueno... de nada, hombre!!

Gente como tú es la que hace gratificante esto de participar en los foros!

Si tienes cualquier otro problema ya sabes donde recurrir.

Un saludo!