Foros del Web » Programando para Internet » Javascript »

diapositivas y transiciones

Estas en el tema de diapositivas y transiciones en el foro de Javascript en Foros del Web. Hola amigos: Estoy haciendo un proyector de diapositivas, y en un principio va bien, pero preparé unas pocas transiciones (descubrir por los 4 costados) y ...
  #1 (permalink)  
Antiguo 28/01/2004, 13:07
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
diapositivas y transiciones

Hola amigos:

Estoy haciendo un proyector de diapositivas, y en un principio va bien, pero preparé unas pocas transiciones (descubrir por los 4 costados) y mozilla no hace "ni puto caso"

Este es el código:

Código PHP:
function fichas(imagentiempo)    {
    
this.imagen imagen;
    
this.tiempo tiempo;
}

var 
fichero = new Array();
fichero[0] = new fichas('fotos/maxi/Diapositiva52.jpg'13000);
fichero[1] = new fichas('fotos/maxi/Diapositiva62.jpg'13000);
fichero[2] = new fichas('fotos/maxi/Diapositiva66.jpg'13000);
fichero[3] = new fichas('fotos/maxi/Diapositiva73.jpg'13000);
fichero[4] = new fichas('fotos/maxi/Diapositiva82.jpg'13000);
fichero[5] = new fichas('fotos/maxi/Diapositiva91.jpg'13000);
fichero[6] = new fichas('fotos/maxi/Diapositiva95.jpg'15000);
fichero[7] = new fichas('fotos/maxi/Diapositiva100.jpg'13000);

var 
actual 0;
var 
capa1capa2;
var 
capaX 0;
var 
capaY 0;
var 
altoancho;
var 
foto1foto2;
var 
principio 0;

function 
iniEfecto()    {
    
capa2.style.left 0;
    
capa2.style.top 0;
    
capaX 0capaY 0;
    
efectos[Math.floor(Math.random() * efectos.length)]();
/*
    switch(Math.floor(Math.random() * efectos.length))    {
        case 0: izqADer();
        break;
        case 1: derAIzq();
        break;
        case 2: arrAAba();
        break;
        case 3: abaAArr();
        break;
        otherwise
            derAIzq();
        break;
    }
*/
}

var 
efectos = [izqADerderAIzqarrAAbaabaAArr];

function 
izqADer()    {
    
capaX capaX 10;
    
capa2.style.left capaX;
    if (
parseInt(capaX) < parseInt(ancho)) setTimeout("izqADer()"10);
}

function 
derAIzq()    {
    
capaX capaX 10;
    
capa2.style.left capaX;
    if (
parseInt(capaX) > parseInt(ancho * -1)) setTimeout("derAIzq()"10);
}

function 
arrAAba()    {
    
capaY capaY 10;
    
capa2.style.top capaY;
    if (
parseInt(capaY) < parseInt(alto 1)) setTimeout("arrAAba()"10);
}

function 
abaAArr()    {
    
capaY capaY 10;
    
capa2.style.top capaY;
    if (
parseInt(capaY) > parseInt(alto * -1)) setTimeout("abaAArr()"10);
}


function 
presentar()    {
    
iniEfecto();

    var 
siguiente = (actual 1) % fichero.length;
    
window.status "foto: " fichero[siguiente].imagen;
    
asignarFondo(capa2fichero[actual].imagen);
    
asignarFondo(capa1fichero[siguiente].imagen);

    var 
tiempo fichero[actual].tiempo;
    
actual siguiente;
    
setTimeout("presentar()"tiempo);
}

function 
asignarFondo(capaimagen)    {
    var 
salida "url(" imagen ")";
    
capa.style.backgroundImage salida;
}

function 
crearCapa()    {
    
capa document.createElement("div");
    
capa.style.backgroundPosition "center center";
    
capa.style.backgroundAttachment "fixed";
    
capa.style.backgroundRepeat "no-repeat";
    
capa.style.top 0;
    
capa.style.left 0;
    
capa.style.margin "0";
    
capa.style.height "100%";
    
capa.style.width "100%";
    
capa.style.overflow "hidden";
    
capa.style.position "absolute";
    return 
capa;
}

function 
proyector()    {
    
document.body.style.margin 0;
    
document.body.style.width "100%";
    
document.body.style.height "100%";

    
capa1 crearCapa();
    
document.body.appendChild(capa1);
    
    
capa2 crearCapa();
    
capa1.appendChild(capa2);

    
ancho = (document.all) ? document.body.offsetWidth window.innerWidth;
    
alto = (document.all) ? document.body.offsetHeight window.innerHeight;

    
foto1 = new Image();
    
foto1.src fichero[0].imagen;

    
foto2 = new Image();
    
foto2.src fichero[1].imagen;

    
asignarFondo(capa2fichero[0].imagen);
    
asignarFondo(capa1fichero[1].imagen);
    
window.status "foto: " fichero[0].imagen;

    
setTimeout("presentar()"fichero[actual].tiempo);
}

function 
ambiente(sonido)    {
    var 
musiquita document.createElement("embed");
    
musiquita.src sonido;
    
musiquita.loop true;
    
musiquita.style.display "none";
    
document.body.appendChild(musiquita);

se puede ver aquí: http://www.pepemolina.com/imagenes/proyector.html

Se puede ver un comentario que pretendía ser una alternativa a los efectos...
No lo he borrado porque provoca un buen efecto (para quien le interese)

Académicamente me gustaría destacar la forma de usar los efectos "aleatoriamente"...
efectos[Math.floor(Math.random() * efectos.length)]();
... se trata de un array de funciones, y se activan simplemente poniendo () detrás de el elemento del array...

Pues eso: Si alguien encuentra la forma de que funcione en mozilla le agradecería la info...

y si quieren poner más efectos ¡yabadabadú...!

Saludos

Última edición por caricatos; 08/11/2005 a las 13:23
  #2 (permalink)  
Antiguo 29/01/2004, 08:35
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Oye qué bonito


Una cosa... cuando la imagens (la que sea) se desplaza para apartarse se queda la mitad en el medio ¿es normal? yá sabes que yo sigo con mi explorer 5.0 a pedales (siempre digo que si logro hacer andar las cosas en este navegador andará en cualquiera )
  #3 (permalink)  
Antiguo 29/01/2004, 08:40
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Mira una captura de pantalla

http://www.tunait.com/forosdelguep/caricatos.jpg

Ahí es donde detiene la transición
  #4 (permalink)  
Antiguo 29/01/2004, 10:23
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola tunait:

Gracias, por el comentario, la cosa es que no me funcionaba en Mozilla por no poner el "maldito px" en los estilos de las posiciones (top/left), y viendo el post original he notado que también faltaba (no hacía las "transiciones" pero iban cambiándose las imágenes)

Dime si se ha "atascado" en pocos casos o siempre... ...

Verás... quería poner muchas transiciones más y ahora el atascado soy yo, porque posiblemente no hice bien el planteamiento inicial... El efecto es de "descubrir" la imágen de atrás y al querer hacer el inverso (cubrir) me hice un lío, así que estoy (en los ratos que puedo) replanteando el tema... además en Mozulla se "crean" barras de desplazamiento, y no sé muy bien como evitarlo (voy a probar los "clips")

Se trata de conseguir las transiciones de powerPoint (al menos las que se puedan). Y ahe visto que cubrir y descubrir se puede, el efecto difuminado creo que será con filtros, pero el que creo más difícil serán los mosaicos.

Bueno, trataré de no aburrir a nadie, pero si quieren hacerme sugerencias, estaré agradecido.

Saludetes
  #5 (permalink)  
Antiguo 30/01/2004, 14:16
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola otra vez:

Ya tengo 20 transiciones (cubrir y descubris por todos los lados y esquinas, también desde el centro, y el difuminado, que como expliqué anteriormente va con filtros, pero me parece que es una transición que consume muchos recursos y no interesa.

Si alguién quiere ver la página, este es el link: http://www.pepemolina.com/imagenes/proyector.html
Aunque no pude quitar las barras en Mozilla, salvo abriendo la página como popup.
Desde esta página: http://www.pepemolina.com/imagenes/index.html se puede abrir como popup.

Me gustaría saber si se ve bien.

Saludos
  #6 (permalink)  
Antiguo 03/02/2004, 03:25
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Hola, caricatos.

Hasta ahora no había podido ver bien la página (con una conexión lenta parece que no cargan bien las fotos)

Está realmente bien Si no se sabe parece que esté hecho con cualquier cosa menos con JavaScript.

Saludos y adelante,
  #7 (permalink)  
Antiguo 03/02/2004, 15:12
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola otra vez:

Gracias Javi, pretendo simular las presentaciones powerPoint, pero tratando con imágenes es muy difícil conseguir rapidez...

He puesto intervalos de unos 15 segundos pensando que sería suficiente, pero al hacer pruebas en casa las transiciones se me hacen eternas y cambio los intervalos, así que a veces se me cuelan los rápidos en la web y no van bien ni con adsl (yo lo tengo, pero siempre estoy bajándome cosas...)

Por cierto... no te he felicitado por superar los 2000 mensajes... dentro de poco creo que me vas a superar...

Ahora voy a intentar hacer las transiciones de una en una.
Si quieres meterle mano, ya sabes que por mi parte no hay problema (como en los viejos tiempos)... ¡va para todos!

Saludetes
  #8 (permalink)  
Antiguo 10/02/2004, 16:08
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Parece que ya funciona

La página es: http://www.pepemolina.com/imagenes/
Hay que deplegar la capa "proyector de diapositivas" con un botón con una flecha que hay a la derecha.
Tuve que hacer una precarga de imágenes porque daba mucha "lata"...

Lo que lamento es que no pueda hacerse el "efecto fundido" en opera.

Ahora trataré de mejorar el contenido de la página.
Si alguien encuentra fallos, por favor, que me lo diga.

Saludos
  #9 (permalink)  
Antiguo 23/11/2005, 13:04
 
Fecha de Ingreso: noviembre-2005
Mensajes: 13
Antigüedad: 18 años, 5 meses
Puntos: 0
Hola Caricatos....

Me gusto tu sistema de reproduccion de diapositivas!! Esta muy bueno!!

solo tengo alguna pregunticas respecto a esto que desarrollastes...:

Como haces para que no sea un ciclo o Loop las laminas que se proyectan?

y como hago para quitarle el efecto que cuando cliqueo automaticamente me cambie la lamina??

Espero me ayudes porfa!!
Agradecido.....
  #10 (permalink)  
Antiguo 23/02/2006, 07:41
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 19 años
Puntos: 3
Caricatos muy buena la función esa de transiciones

Yo estaba pensando en hacer lo siguiente:

- la típica ventana de imágenes de un producto cualquiera, por ejemplo puestas en una fila una tras otra. Abajo, de primeras, se cargaría una de estas en un tamaño más grande.

Entonces, lo que estaba pensando que hacer lo que sea para que al pasar el ratón por encima de una de las pequeñas ó haciendo clic, se cargará en el sitio que ocupa la grande. Y que el cambio de imagen se hiciera por ejemplo a través de un fundido.

¿Se puede? ¿Cómo? ¿una ayudita? ¿Hay problemas entre navegadores para que el resultado sea óptimo?

Saludos,

zacktagnan.
=============================================
  #11 (permalink)  
Antiguo 23/02/2006, 07:46
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 19 años
Puntos: 3
Se me olvidaba por si influye en algo:

- los nombres de las imágenes vendrían dados desde una base de datos a través de ASP
  #12 (permalink)  
Antiguo 23/02/2006, 12:47
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola:

zacktagnan: Justamente el efecto "fundido" hasta el momento no funciona en opera, al menos hasta la versión 8.50 (Me he bajado la última, pero no probé el tema aún), pero cualquier otra transición funciona bien... Creo que en la página que referencio está el script, así que intenta hacerlo, y si tienes problemas no dudes en preguntar. (Aunque en estos momentos estoy un poco escaso de tiempo)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #13 (permalink)  
Antiguo 23/02/2006, 15:17
Avatar de El_Aprendiz  
Fecha de Ingreso: febrero-2005
Mensajes: 152
Antigüedad: 19 años, 2 meses
Puntos: 0
[IMG]C:\SITIO WEB CDI\www\cdi\imagenes\Foto1.JPG[/IMG]
[IMG]C:\SITIO WEB CDI\www\cdi\imagenes\Foto2.JPG[/IMG]
son dos imagenes que deseo colocar en la cabeza de una pagina php como logro este efecto
gracias
__________________
La verdadera grandeza no está en no caer, si no en levantarse cada vez que caemos.
  #14 (permalink)  
Antiguo 24/02/2006, 07:04
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 19 años
Puntos: 3
Hola caricatos:

A la hora de guardar la página "http://www.pepemolina.com/imagenes/index.html", no llega a descargarse el apartado del Proyector de Diapositivas dónde se ve el ejemplo con las imágenes y están los diferentes botones y menús para configurar las transiciones.

¿De dónde me puedo bajar el script que decías?

Respecto a:
- realizar el cambio de imágenes a través de un "onmouseover" en vez de con un botón, es posible ¿no?
- aunque los nombres de las imágenes se cojan de una base de datos a través de ASP, el script puede funcionar igualmente.

Saludos,

zacktagnan.
=============================================
  #15 (permalink)  
Antiguo 25/02/2006, 06:43
Avatar de zacktagnan  
Fecha de Ingreso: abril-2005
Mensajes: 501
Antigüedad: 19 años
Puntos: 3
Vale, ya sé porque no veía el proyector. Al guardar la página no se descargaron las carpetas de las imágenes que utiliza. Así que he creado los directorios y he puesto una serie de imágenes con los nombres que ponen en los scripts .js y ya funciona todo bien.

Otro usuario del foro, furoya, me dirigió a otro tema en el que incluía este código que hace lo que yo quería (bueno yo he cambiado el efecto para que haga el de fundido):

Código:
<HTML>
<HEAD>
<SCRIPT>
var foto=new Array()
foto[0]=new Image()
foto[0].src=
"http://www.forosdelweb.com/images/smilies/adios.gif"
foto[1]=new Image()
foto[1].src=
"http://www.forosdelweb.com/images/home.gif"
foto[2]=new Image()
foto[2].src=
"http://www.forosdelweb.com/images/a/header_calendario.gif"
foto[3]=new Image()
foto[3].src=
"http://www.forosdelweb.com/images/a/logo_header.gif"
</SCRIPT>
<SCRIPT>
var tamanio;

function cambiar(im){
cont.filters.revealTrans.apply();
if(foto[im].width>foto[im].height){
tamanio=" width=300";};
else {tamanio=" height=300"};
v0.value=foto[im].width;
v1.value=foto[im].height;
nuevoCont="<table border=0 width=302 height=302 cellspacing=0>"+
"<td align=center><img src="+foto[im].src+tamanio+"></td></table>";
cont.innerHTML=nuevoCont;
cont.filters.revealTrans.play();
}

</SCRIPT>
</HEAD>
<BODY>
<center>
<div id=cont style="filter:revealTrans(transition=12 , duration=4); 
width:310px; height:310px; background:
url('http://www.forosdelweb.com/images/a/right_bottom.gif')">
</div>
<p>
<input /*onclick="cambiar(0)"*/ onmouseover="cambiar(0)" height=30 type=image src=
"http://www.forosdelweb.com/images/smilies/adios.gif">
<input /*onclick="cambiar(1)"*/ onmouseover="cambiar(1)" height=30 type=image src=
"http://www.forosdelweb.com/images/home.gif">
<input /*onclick="cambiar(2)"*/ onmouseover="cambiar(2)" height=30 type=image src=
"http://www.forosdelweb.com/images/a/header_calendario.gif">
<input /*onclick="cambiar(3)"*/ onmouseover="cambiar(3)" height=30 type=image src=
"http://www.forosdelweb.com/images/a/logo_header.gif">
 _ Ancho original : <input id=v0 size=4> _ 
Alto original : <input id=v1 size=4>
</center>

</BODY>
</HTML>
El único inconveniente es que sólo funciona en el Internet Explorer y en otros navegadores como el Firefox no.

Tu Proyector de Diapositivas si que funciona bien en otros navegadores. Pero no logro entender como haces para que se efectúen bien las transiciones tanto en unos como en otros.

¿Podrías decirme como adaptar el código arriba indicado para que funcione también en otros navegadores aparte de en Internet Explorer?

Saludos,

zacktagnan.
==============================================
  #16 (permalink)  
Antiguo 25/02/2006, 09:20
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Hola zacktagnan:

Te había respondido y se me fue la conexión... espero decirte lo mismo...

Mira la respuesta que puse en el foro css... procura adaptarlo y dinos los problemas que tengas para orientarte.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:03.