Foros del Web » Programando para Internet » Javascript »

Presentaciones

Estas en el tema de Presentaciones en el foro de Javascript en Foros del Web. Hola amigos: He hecho un script para realizar presentaciones (en un principio es para catálogo de fotos personal), lo que pasa es que las fotos ...
  #1 (permalink)  
Antiguo 23/07/2002, 11:13
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Presentaciones

Hola amigos:

He hecho un script para realizar presentaciones (en un principio es para catálogo de fotos personal), lo que pasa es que las fotos estrechas salen muy estrechas y las apaisadas muy estiradas. Espero que me puedan ayudar. Esta es la página:

<html>
<head>
<script language="javascript">
var fichas = "imagen1.gif,imagen2.gif";
var ficheros = fichas.split(",");
var actual = 0;
function presentar(){
var im = new Image();
im.src = ficheros[actual];
var imalto = im.height;
var imancho = im.width;
while (imalto > alto) {
imalto --;
imancho --;
}
while (imancho > ancho) {
imalto --;
imancho --;
}
document.getElementById("presente").src = im.src;
document.getElementById("presente").widt h = imancho;
document.getElementById("presente").heig ht = imalto;
if (actual == ficheros.length - 1)
actual = 0;
else
actual ++;
setTimeout("presentar()", 5000);
}

var alto, ancho;
function ini() {
alto = document.body.offsetHeight;
ancho = document.body.offsetWidth;
presentar();
}
</script>
</head>
<body onload="ini()">
<center>
<img id=presente src="" onclick="presentar()">
</center>
</body>
</html>

Saludos
  #2 (permalink)  
Antiguo 24/07/2002, 09:29
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 4 meses
Puntos: 381
Re: Presentaciones

:) Hola Caricatos,

pues si, efectivamente salían un poco chaparras las imágenes, jé. Oye... eso de imalto -- e imancho -- ¿qué indica??? primera vez que lo veo. He intentado deducir lo que hace pero lo dicho, primer encuentro.

Bueno, he hecho una modificación y parece que ahora le gusta más y las imágenes salen proporcionadas.

Te cuento:

Se trata de que si la imagen no es más alta que el area disponible de pantalla se deje su tamaño original pero si es más grande que la redimensione.

Como si la ajustamos en base al ancho es muy fácil que el alto rebase el area de visualización le he pedido que siempre ajuste al alto y luego ponga el ancho según el alto.

Resumiendo.

Si el alto de la imagen es mayor que el alto disponible el alto de la imagen se adapta al alto disponible. Luego se mira qué porcentaje del alto original hemos usado y se le aplica el mismo porcentaje al ancho e voilá!!

Además he metido la imagen en una celda para que las pequeñas se centren verticalmente.

<html>
<head>
<script language="javascript">
var fichas = "imagen1.jpg,imagen2.jpg,imagen3.jpg,imagen4. jpg,imagen5.jpg";
var ficheros = fichas.split(",");
var actual = 0;
function presentar(){
var im = new Image();
im.src = ficheros[actual];
var imalto = im.height;
var imancho = im.width;


if (imalto > alto )
{
porcentaje=100/imalto*alto
imalto=alto;
imancho =imancho*porcentaje/100;
}


document.getElementById("presente").src = im.src;
document.getElementById("presente").widt h = imancho;
document.getElementById("presente").heig ht = imalto;
if (actual == ficheros.length - 1)
actual = 0;
else
actual ++;
setTimeout("presentar()", 3000);
}

var alto, ancho;
function ini() {
alto = document.body.offsetHeight;
ancho = document.body.offsetWidth-20;
presentar();
}
</script>
</head>
  #3 (permalink)  
Antiguo 24/07/2002, 09:30
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 4 meses
Puntos: 381
Re: Presentaciones

<body onload="ini()" marginwidth="0" marginheight="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td align="center">
<img id=presente src="" onclick="presentar()">
</td>
</tr>
</table>
</body>
</html>
  #4 (permalink)  
Antiguo 24/07/2002, 10:48
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Re: Presentaciones

Hola otra vez:

Gracias por la respuesta tunait.
La verdad es que debo reconocer que se trataba de una auténtica chapuza, pero luego me dí cuenta y lo arreglé también.

Voy a comentar las cosas que he hecho (por cierto que voy a poner los atributos que faltan, y la tabla me parece también muy buena idea).

La idea de controlar tanto lo alto como lo ancho es porque las fotos son las que descargo de mi cámara, y las dos variables exceden del tamaño de las ventanas.

Otra cosa que he cambiado es antes de redimensionar la imagen, quitarla (supongo que coincidirás en que el efecto es horroroso).

También puse un parámetro para que no se repliquen los "setTimeout" si se llama a la función pinchando sobre la foto. Se trata de un valor lógico que en ese caso no "replica".

Y una última cosa es recalcular el tamaño de la ventana si se redimensiona ¿?...

En el siguiente mensaje va el código...

  #5 (permalink)  
Antiguo 24/07/2002, 10:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Re: Presentaciones

var ficheros = fichas.split(",");
var actual = 0;
var activo = false;

function presentar(estado) {
var im = new Image();
im.src = ficheros[actual];
var im_alto = im.height;
var im_ancho = im.width;
if (im_alto > alto || im_ancho > ancho) {
var viejo_ancho = im_ancho;
var viejo_alto = im_alto;
var muy_alto = (im_alto - alto) > (im_ancho - ancho);
if (muy_alto) {
im_alto = alto;
im_ancho = Math.floor(im_alto * viejo_ancho / viejo_alto);
}
else {
im_ancho = ancho;
im_alto = Math.floor(im_ancho * viejo_alto / viejo_ancho);
}
}

if (document.getElementById("presente").wid th != im_ancho ||
document.getElementById("presente").heig ht != im_alto) {

document.getElementById("presente").src = "";
document.getElementById("presente").widt h = im_ancho;
document.getElementById("presente").heig ht = im_alto;
}
document.getElementById("presente").src = im.src;
if (actual == ficheros.length - 2)
actual = 0;
else
actual++;
if (estado) setTimeout("presentar(true)", 5000);
}

var alto, ancho;
function medir() {
alto = (document.all) ? document.body.offsetHeight - 10 : window.innerHeight;
ancho = (document.all) ? document.body.offsetWidth - 10 : window.innerWidth;
}

function ini() {
medir();
presentar(true);
}

P.D. He empezado a prepararlo para que funcione también en Netscape, pero los atributos "width" y "height" de un objeto image, parece que no funciona bien. Voy a preguntarlo en el foro HTML.

Saludetes
  #6 (permalink)  
Antiguo 25/07/2002, 06:16
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 23 años, 4 meses
Puntos: 381
Re: Presentaciones

Hum... cuando vuelva a tener las neuronas en su sitio me estudiaré mejor el niu script. Ahora mismo me da error de "linea 31 se requiere un objeto".

Respecto al aspecto horroroso... creerás que ayer NO estaba?? :Pte prometo que se veía correctísimo, ahora lo pruebo de nuevo y me hace el cambio de tamaño antes de cambiar la imagen pero.... (no te lo pierdas) sólo me lo hace en la primera vuelta! A partir de la segunda funciona perfessto! que raro no?

Respecto al Nescafé: em... en la 6.2 funciona ok salvo que el citado efecto horroroso de redimensionado fuera de sitio lo hace al reves! primero carga la imagen al último tamaño y después la ajusta!

En fin... que lo del width y height en Nescafé que yo sepa no hay alternativa. Pero es que tiene que ir! Lo que sí he observado que no reconoce Netscape es el atributo height en las tablas. Se lo pasa por el forro de los. Pero en las imágenes que yo sepa de toda la vida lo ha reconocido (puedo estar tanto tiempo equivocada? que alguien me saque del error si así es ;) )

Bueno Caricatos, un saludorro!!
  #7 (permalink)  
Antiguo 25/07/2002, 11:57
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Re: Presentaciones

Hola otra vez:

Si tunait "horroroso"... es que las fotos eran de 1280 x 960, y 960 x 1280, y ya cargadas se deformaban, y luego aparecía otra foto que muchas veces estaba deformada.

Ten en cuenta que si las fotos entraban en pantalla no se deformaban, pero ninguna de las que usé entraba...

Lo único que he visto mal es la variable "activo" que no fue necesario usarla, ya que esa variable era la que al final se pasa como parámetro "estado", que hace que no se replique la rutina si se llama desde un sitio que no sea el ini(), por cierto, sabes si se puede modificar el "retardo" del setTimeout ya lanzado ¿?

La idea es que si se pincha en una imagen se llama a la función y la foto que debe aparecer por el setTimeout acelera mucho el retardo. (Es difícil de explicar, pero estoy seguro de que me entiendes).
Lo del width con el netscape 6.2 que yo uso no tira (tal vez mi versión esté fastidiada ¿?).

Saludetes

  #8 (permalink)  
Antiguo 27/07/2002, 02:14
Avatar de epa2  
Fecha de Ingreso: abril-2002
Ubicación: Málaga
Mensajes: 1.475
Antigüedad: 22 años, 8 meses
Puntos: 9
Re: Presentaciones

hola a los dos. perdonar mi intromisión pero me pareche un post muy interesante, je je.

Lo siguo con interés..

salu2
ByE
  #9 (permalink)  
Antiguo 27/07/2002, 12:14
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Re: Presentaciones

Hola otra vez:

Lo estoy haciendo funcionar en este enlace:
<a href='ir.asp?http://perso.wanadoo.es/sucaricatura/' target='_blank'>http://perso.wanadoo.es/sucaricatura/...</a>,
hay que pinchar sobre el título en la cabecera (Costa del Sol), está arreglado para que funcione en netscape, con unos array's con las dimensiones de las fotos.

Todavía funciona mal en opera...

Saludos
  #10 (permalink)  
Antiguo 28/07/2002, 06:45
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Re: Presentaciones

Hola a todos:

Ya solucioné el problema para opera, y me sirvió para simplificar el código html (ahora sólo uso el tag img (suprimiendo la tabla)

El secreto estaba en calcular la posición según el tamaño de la ventana y el tamaño de la imagen.

Ahora queda no tener que dar las dimensiones como parámetros. Voy a probar usando un tag invisible de imagen ¿?
Si a alguien se le ocurre otra cosa, que me lo diga...

Saludos
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 19:53.