Modificación script "Cambio de imágenes automático" de los FAQ

kagantxo · #1 (**permalink**) 01/12/2004, 11:28

Hola a todos, este es mi primer mensaje en el foro, hasta ahora siempre había leido buscando consejos y creo que ha llegado la hora de participar.

En fin, al grano:

Estaba intentando modificar el script de los FAQ del "cambio de imágenes automático" de esta dirección: dirección FAQ

Yo lo que quiero hacer es una pagina de presentación de varias galerías, es decir, en la página se encuentran los links a las galerías y al lado de estos una imagen en miniatura de esta galería. Se me había ocurrido que esa miniatura pudiera ir rotando, a modo de presentacion cuando situáramos el ratón encima del enlace (por supuesto con fotos de esa misma galería).

El problema que tengo es que el script sólo puede cargar una serie de fotos y no puede ser utilizado 2 o más veces, y no sé como solucionarlo.

En fin, a ver si me podéis echar una mano, ya que creo que puede quedar un script bastante útil para todos. Saludos

PD: Otra aplicación podría ser la de realizar una presentación de varias imágenes en una imagen central en grande al poner el ratón sobre una de los enlaces a las galerías.

tunait · #2 (**permalink**) 01/12/2004, 11:34

Hola kagantxo, bienvenido/a a los foros

Mira, aquí tengo expuestos algunos scripts, incluyendo el de la FAQ mejorado (para todos los navegadores). Te dejo el link a una galería que se acerca a lo último que propones, tal vez te pueda servir

http://javascript.tunait.com/javascr...aleriaimagenes

kagantxo · #3 (**permalink**) 01/12/2004, 11:40

Muchas gracias por la bienvenida y esa respuesta tan rápida. Ahora mismo voy a echarles un ojo

Saludos

kagantxo · #4 (**permalink**) 01/12/2004, 11:53

Hola de nuevo tunait, he estado viendo el script que mencionas...la idea es parecida a esa, pero la foto central debe ser una presentación, no sólo una imagen estática. Es la dificultad del asunto, ya que no he sido capaz de adaptar el script a eso.

Ya tengo tu página en mis favoritos. Saludos.

tunait · #5 (**permalink**) 01/12/2004, 12:02

Hola de nuevo kagantxo,

la verdad que ando algo escasa de tiempo para enredarme en algo de esto (ganas no me faltan). Igual, espera a que asome por aquí don caricatos que él tiene unas cuántas aplicaciones hechas para galerías y presentaciones de imágenes. Tal vez él tenga yá hecho algo como lo que necesitas. No te dejo ningún link porque no me lo sé

pero no creo que tarde en asomar por aquí caricatos.

Un saludo

caricatos · #6 (**permalink**) 02/12/2004, 00:51

Hola a todos:

kagantxo: recibe también mi bienvenida

Hola tuanit

... A ver si puedo ayudar en el tema

kagantxo: Lo de "una presentación", no sé muy bien a que te refieres. Yo estuve haciendo cosas que intentaba simular las presentaciones powerPoint, pero se trata de algo un poco complejo, y sobre las galerías, hace muy poco presenté mi última versión que si haces una búsqueda en los foros, seguramente te será fácil encontrar.

Antes de continuar, te voy a mostrar esas cosillas, para que me digas si algo de eso te puede servir:

En esta página: http://www.pepemolina.com/imagenes/index.html fíjate donde pone "proyector de diapositivas", ya que es lo que tengo hecho sobre simulación de presentaciones powerPoint...

En esta otra página http://www.pepemolina.com/galeria/index.html presento la versión más actual de mi galería, que es bastante configurable.

Aparte de esto, si conoces algún enlace que muestre mejor lo que quieres (al menos que se acerque a tu idea), también sería de gran ayuda.

Saludos

P.D: tunait... ¡No trabajes mucho! Un abrazo

kagantxo · #7 (**permalink**) 02/12/2004, 06:00

Hola caricatos....muchas gracias por la bienvenida y sobre todo por tu interés.

Te explico, lo que estoy buscando es exactamente una mezcla entre los 2 ejemplos que me has presentado, es decir, habrían varios links o imágenes en miniatura a cada una de las galerías. Al colocar el ratón sobre cada una de ellas empezaría sobre esas miniaturas (o en una imagen central en grande...se puede estudiar tb) una proyección de diapositivas como la que tienes en tu página.

Cada proyección, debe de ser distinta...ya que cada enlace pertenece a una galería distinta, la minipresentación (o presentación central) debe de contener fotos distintas.

No sé porqué, pero no he encontrado ningún ejemplo en internet. Así que me lo invento para tí

:

Imagínad una página de galerías como la tuya que tenga un enlace a la galería de "coches", al lado otro a "chicas"(

), al lado otro a "chicos"(

)...y así todas las que se deseen.

Si coloco el ratón sobre el link (que puede ser una imagen en miniatura o texto) en el enlace de coches....esa miniatura sería una proyección de diapositivas entre varías imágenes de coches. SI lo coloco sobre chicas, pues saldría Sabrina

, Marta Sanchez

, la legionaria del Gran Hermano

.....y si es sobre chicos, salimos nosotros

.

No sé si me he explicado, es decir, sería una modificación del proyector de diapositivas para que aceptara series de imágenes distintas, que se activan en sitios distintos de la pantalla (las miniaturas) o en una imagen central compartida (imagen central).

Yo no he sido capaz, debido a que no sé como conseguir que el script marque las series distintas.
Saludos y muchas gracias.

caricatos · #8 (**permalink**) 02/12/2004, 06:35

Hola otra vez:

Tratando de hacerme la idea, pienso que se tornaría complejo lo que tu quieres, aunque se me ocurre que se pueden crear distintos proyectores (páginas html) y tener un iframe en el que vayan cargándose según el paso del ratón, aunque habría que tener mucho cuidado con el peso de las imágenes...
De esa manera el proyector sería el mismo para todas las galerías, y en la galería de miniaturas en sí, tan solo habría que modificar el script, para que en vez de usar el evento onclick funcione con onmouseover... y en vez de enlazar en una ventana con la ampliación de la miniatura, enlace con una página de presentaciones.

Como te decía, es algo complejo, pero en la facultad siempre dicen "divide y vencerás", así que tomando el proyecto grande como una serie de proyectos pequeños, tendría que salir todo bien.

Si crees que es buena idea, trata de hacer funcionar el proyector de diapositivas, y dime que opinas sobre seguir adelante.

Saludos

kagantxo · #9 (**permalink**) 02/12/2004, 06:40

Me parece una gran idea.

EL proyector de diapositivas ya lo tengo funcionando en mi pagina, con onmouse over, pero claro, probé a duplicar el script cambiando las fotos y nada. No funciona.

Lo que no tengo claro es como usar los iframes, ya que nunca los he utilizado.

En cuanto al tema del peso, es por lo que es conveniente hacerlo en las miniaturas. Lo que no entioendo tampoco es si todo el iframe cabe en una miniatura de 125x80 pixeles...mas o menos (pregunta de zoquete).

Un saludo y gracias de nuevo.

caricatos · #10 (**permalink**) 02/12/2004, 06:52

¡Je, je!

Un iframe puede tener cualquier medida, igual que los frames, Lo que no me entero es si quieres que las presentaciones se hagan en las miniaturas o si quieres que se hagan en la imágen grande... Aunque puede hacerse en cualquiera de los sitios.

La cuestión es que por cada presentación se prepare un array con las fotos que se quieran y sus transiciones (creo que lo mejor es que sean aleatorias).
Luego enlazar la página en el iframe.

Trataré de preparar un ejemplillo.

Saludos

kagantxo · #11 (**permalink**) 02/12/2004, 06:59

Muchas gracias

He pensado en hacerlo en las miniaturas por el tema del peso de las fotos....aunque tener el recurso de verlo en grande no estaría mal.

Espero ansioso ese ejemplo. Un saludo.

caricatos · #12 (**permalink**) 03/12/2004, 06:14

Bueno:

Acabo de subir el ejemplo: http://www.pepemolina.com/Diapositivas/galeria.html

La verdad es que me costó más de lo que pensaba, pero de paso retoqué un poco el código para poderlo modificar más fácilmemte en el futuro.

Por ahora la galería solo muestra los iframes dentro de los marcos de diapositivas, y las páginas de los iframes solo hacen transiciones aleatorias y responden con el onclick para evitar el retardo. Para poner otro marco con las transiciones en grande se pueden usar los comentarios que hay debajo de las diapositivas.

Saludos

kagantxo · #13 (**permalink**) 03/12/2004, 17:56

Gracias Caricatos, voy a echarle un ojo y te cuento......

kagantxo · #14 (**permalink**) 03/12/2004, 19:20

¡¡Eso era básicamente lo que estaba buscando!! Muy buen trabajo, gracias.

He estado ojeando el código fuente...es una buena idea lo de introducir el array, lo hace muy sencillo. Además es muy fácil subir las fotos, y las transiciones son muy buenas y limpias.

Debo decir que de todos los archivos js empleados, solo he encontrado el llamado "galeria.js". El ejemplo ya lo tengo funcionando con mis fotos localmente en mi ordenador, pero no me aparece el marco de diapositiva (el que lleva tu avatar) y me sale desalineado....es decir la foto no aparece en el medio.

Esto no es tan importante, ya que me gustaría modificarlo para mostrar la imagen sola (sin el marco de la diapositiva). Además me gustaría mostrar las galería una debajo de otra y no al lado....que debería modificar, la variable aMostrar??

(La verdad es que tengo la picha hecha un lio con tanta variable

) Para que os hagáis una idea, el modo de presentación sería como una enumeración de galerías (una debajo de otra) con el título a la derecha de cada una, en vez de debajo de como está ahora.

Otro detallito, es cómo se deshabilita el inicio automático en la presentacion, para que sólo se mueva cuando tenga el ratón sobre ella.

Finalmente (creo que ya estoy dando mucha guerra por el momento

), me gustaría preguntar si sería muy dificil hacer que la imagen cambiara no al clickar sobre ella, sino al clickar (o poner el ratón) sobre la descripción. La idea es que la descripción o nombre de la galería sea un enlace a la página de la galería, y sólo se pase el ratón por los nombres de éstas, en vez de por las imágenes.

Creo que ya me estoy pasando, pero es que veo el script enorme....para lo poco que sé.

Muchas gracias por tu paciencia, trbajo y tiempo Caricatos. Algún día te pagaré unas cervis

caricatos · #15 (**permalink**) 04/12/2004, 02:24

Hola otra vez:

Sobre el marco, lo que te falta es el fichero galeria.css... su contenido es este:

Código:

div.diapositiva	{
	position: relative;
	border-width: 3px;
	border-color: white;
	border-style: outset;
	margin: 5px 20px;
	padding: auto;
	background-color: #eeeeee;
}

div.diapositiva iframe	{
	position: absolute;
	border-width: 3px;
	border-color: white;
	border-style: inset;
	margin: 0px;
}

Para que no haya tanto borde, debes poner algo así:

var bordeMarco = 1;
var ratioMarco = 1;

... detrás de donde tienes el fichero galeria.js, y galeria.css, debe ser más o menos así:

div.diapositiva {
border: 1px solid black;
margin: 0px;
background-color: white;
}
div.diapositiva iframe {
border: 1px solid gray;
}

Pero sobre el aspecto de la galería te recomiendo que veas la página donde la presento, que tiene unas cuantas variaciones: http://www.pepemolina.com\galeria\index.html

Y si quieres hablar del tema, es mejor este otro link, en donde van solucionándose dudas: http://www.forosdelweb.com/f13/galeria-fotos-243928/

Lo del uso del evento onmouseover (pasar el ratón por encima), es algo más trabajoso, porque es algo constante, y el click es transitorio, se puede hacer algo, pero un poco trabajoso... haré algunas pruebas y veremos...

Otra cosa, entonces ¿no quieres que se realice nada desde el iframe?...

Esa cuestión no la tengo muy clara.

Saludos

kagantxo · #16 (**permalink**) 05/12/2004, 11:48

Cita:

Iniciado por caricatos

Hola otra vez:

Para que no haya tanto borde, debes poner algo así:

var bordeMarco = 1;
var ratioMarco = 1;

... detrás de donde tienes el fichero galeria.js, y galeria.css, debe ser más o menos así:

div.diapositiva {
border: 1px solid black;
margin: 0px;
background-color: white;
}
div.diapositiva iframe {
border: 1px solid gray;
}

..............

Lo del uso del evento onmouseover (pasar el ratón por encima), es algo más trabajoso, porque es algo constante, y el click es transitorio, se puede hacer algo, pero un poco trabajoso... haré algunas pruebas y veremos...

...................

Otra cosa, entonces ¿no quieres que se realice nada desde el iframe?...

Esa cuestión no la tengo muy clara.

Saludos

Hola de nuevo, no tengo muy claro donde es detrás de donde tengo los ficheros galeria.js y .css...¿te refieres al script principal?

Desde el iframe no quiero que se realice nada, es decir, es sólo para enseñar algunas fotos que hay en esa galería, pero el enlace a dicha galería es otro.

Espero tus impresiones sobre el onmouse over.....un saludo y mil gracias de nuevo.

caricatos · #17 (**permalink**) 05/12/2004, 12:12

Hola otra vez:

Sería más o menos:
<script type="text/javascript" src="galeria.js"></script>
<script type="text/javascript" >
bordeMarco = 1;
ratioMarco = 1;
</script>

Sobre el onmouseover, no he llegado a tratarlo, en principio porque no se me ocurría ¿cómo hacerlo?, pero ahora se me ocurre que podría usar una variable para saber el estado del ratón.

Cuando tenga algo te aviso.

Saludos

caricatos · #18 (**permalink**) 05/12/2004, 16:11

Hola otra vez:

Subí un fichero de miniaturas modificado (el de la derecha)

Cuando creas que está bien, nos ponemos con los enlaces.

Saludos

kagantxo · #19 (**permalink**) 05/12/2004, 18:36

Si señor, está perfecta....esa era mi idea. El efecto del onmouseover es el que tenía pensado, que continuase según lo dejas encima y que pare cuando lo quitas.

Me quito el sombrero.

Como he visto que hay dudas cada vez que explico sobre lo que estamos buscando, básicamente (muy básicamente) sería esto:

ejemplo

La imágenes (donde ahora sólo pone el núero de la galería) variarían según el script de caricatos, cuando se pasara el ratón sobre los enlaces a esas galerías...espero haber aclarado algo. Luego ya se puede hacer más bonito, haciendo los enlaces como imágenes con rollover y todas esas cositas.

Pues nada caricatos, sigo esperando tus indicaciones, pero por lo que veo (y por lo que sabes) va a ser muy posible poder implementar eso
Por cierto, si se quiere hacer que los enláces sean una imagen con rollover (a modo de script), ¿interferiría mucho con tu diseño?

Un saludo.

caricatos · #20 (**permalink**) 06/12/2004, 02:09

Hola otra vez:

Anímate a subir más que un esquema... una galería de pruebas, o algo así...
Con los rollover no creo que haya problemas...
Sobre las indicaciones, en un principio es mirar el codigo de la página en cuestión, pero ahora está un poco lioso...
Lo voy a depurar un poco y acomodarlo también en el otro iframe... me puede llevar algún tiempo, pero por tu parte intenta enterarte viendo la página: http://www.pepemolina.com/Diapositiv...royector1.html

Básicamente he anulado en "activar()" la linea que activa la automatización:
setTimeout("auto2()", fichero[0].tiempo);
...también he modificado "auto2()"

Código:

function evento2()	{
	if (hayActividad) return;
	hayActividad = true;
	detener();
	auto2();
}

...además agregué esto:

Código:

var hayActividad = false;
function salir()	{
	detener();
	hayActividad = false;
}

Y por último la asignación de eventos quedó así:

document.getElementById("proyector").onmouseover = evento2;
document.getElementById("proyector").onmouseout = salir;

No sé si me habré olvidado algo...

Si necesitas explicaciones de cómo funcionan las cosas que no entiendas, avisa, ya que a medida que te vayas enterando podrás hacer tus propias modificaciones.

Saludos