Ventana ajustada a una foto

#1 (**permalink**) 01/08/2008, 16:15

HOLA, COMO PUEDO REALIZAR UNA VENTANA AJUSTADA A UNA FOTO? PERO SI BIEN EN ESTE FORO HAY UN SCRIPT EN JAVASCRIPT PERO TARDA MUCHO EN CARGAR LA FOTO Y ACHICARSE LA VENTANA AL TAMAÑO DE LA FOTO.... HAY ALGUNA MANERA QUE SEA MAS VELOZ, O CON OTRO LENGUAJE? O EN JAVA VARIANDOLE LOS PARAMETROS???
ESTE ES EL CODIGO QUE CONSEGUI AKI:
<html>
<head>
<script type="text/javascript">
var _img_grande;

function mostrar() {
var ops = "top=" + ((screen.height - _img_grande.height) / 2);
ops += ",left=" + ((screen.width - _img_grande.width) / 2);
ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
var ventana = window.open("", "", ops);
ventana.document.write(contenido);
ventana.document.close();
}

function cargando() {
if (_img_grande.complete) mostrar();
else setTimeout("cargando()", 100);
}

function abrir(imagen) {
_img_grande = new Image();
_img_grande.src = imagen;
cargando();
}
</script>
</head>
<body>
<img src="http://www.pepemolina.com/imagenes/fotos/mini/Diapositiva82.jpg" onclick="abrir('http://www.pepemolina.com//imagenes/fotos/maxi/Diapositiva82.jpg')"/>
</body>
</html>
Saludos

caricatos · #2 (**permalink**) 01/08/2008, 19:44

Hola:

Casualmente es un código que yo mismo puse en algún mensaje... y la verdad la velocidad siempre dependerá de la velocidad de la red, de la conexión y del peso de la imagen... y con ese código no se redimensiona... en las FAQs hay otros códigos para lo mismo, pero como no pongas los datos a mano siempre te va a pasar lo mismo.

Saludos

buzu · #3 (**permalink**) 02/08/2008, 17:16

Primero: NO uses puras mayúsculas, dificulta la legibilidad.
Segundo: Este es un foro, no un móvil. Lo digo por aquello de aki, la palabra correcta es aquí.
Tercero: Eso no es Java, es Javascript que no es lo mismo.

Para resolver el problema puedes obtener las medidas de la imagen con php antes de lanzar la función y pasar las medidas como parámetros a la función de modo que te abra la ventana con esas medidas.

Saludos.

#4 (**permalink**) 02/08/2008, 18:58

aqui vi por algun lado este codigo tambien que pondre a continacion.... pero el tema es que cuando hago click con el mouse me pasa de una foto a otra,perfecto, si hay 5 fotos,pasan las 5 pero... al llegar a la quinta foto se acaban las fotos y sde queda todo en la nada y no se como podria quedar el codigo para que sepa y diga... cuando termina la quinta foto,por ejemplo, pasar de nuevo a la primera.... o en su defecto ir a ota web....gracias.
el codigo:
<script language="javascript">
var clickCount = 0;

var ZoomImages = new Array();
ZoomImages[0] = 'header1.jpg';
ZoomImages[1] = 'header2.jpg';
ZoomImages[2] = 'header3.jpg';
ZoomImages[3] = 'grenda.jpg';

function zoomIn(){

var imagen = findDOM('imagenZoom');
clickCount += 1;

imagen.src = ZoomImages[clickCount];

}

function findDOM(objectId) {
if (document.getElementById) {
return (document.getElementById(objectId));
}
if (document.all) {
return (document.all[objectId]);
}
}
</script>

<a href="#" onClick="zoomIn();"><img name="imagenZoom" src="header1.jpg"></a>

#5 (**permalink**) 02/08/2008, 19:10

hola , perdona es que soy nuevo en el foro, dime algo si puedes ayudarme, estoy haciendo una web y la imagen ajustada...... tarda en ajustarse a la imagen digamos..... en el codigo como hago lo que tu dices en php, me lo podrias agregar , lo inserto en el mismo codigo? este es el codigo: ( GRACIAS)

<script language="javascript">
var clickCount = 0;

var ZoomImages = new Array();
ZoomImages[0] = 'header1.jpg';
ZoomImages[1] = 'header2.jpg';
ZoomImages[2] = 'header3.jpg';
ZoomImages[3] = 'grenda.jpg';

function zoomIn(){

var imagen = findDOM('imagenZoom');
clickCount += 1;

imagen.src = ZoomImages[clickCount];

}

function findDOM(objectId) {
if (document.getElementById) {
return (document.getElementById(objectId));
}
if (document.all) {
return (document.all[objectId]);
}
}
</script>

<a href="#" onClick="zoomIn();"><img name="imagenZoom" src="header1.jpg"></a>

#6 (**permalink**) 02/08/2008, 20:14

perdon de nuevo yo por aki, este codigo me parece impecable,lo unico que es que no me cierran las ventanas que se van abriendo! o sea pincho sobre una foto y me la abre, pincho sobre la siguiente y tambien,pero estas mini ventanitas me quedan abiertas todas, me gustaria que se vayan cerrando a medida que abro la siguiente foto, porfavor alguien que me lo pueda resolver....este es el codigo que funciona perfecto, lo vi en este foro y le modifique un link que tenia por imagenes en el servidor....gracias

<html>
<head>
<script type="text/javascript">
var _img_grande;

function mostrar() {
var ops = "top=" + ((screen.height - _img_grande.height) / 2);
ops += ",left=" + ((screen.width - _img_grande.width) / 2);
ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
var ventana = window.open("", "", ops);
ventana.document.write(contenido);
ventana.document.close();
}

function cargando() {
if (_img_grande.complete) mostrar();
else setTimeout("cargando()", 100);
}

function abrir(imagen) {
_img_grande = new Image();
_img_grande.src = imagen;
cargando();

}

</script>
</head>
<body>
<img src="header11.jpg" onclick="abrir('header1.jpg')"/>
<img src="header22.jpg" onclick="abrir('header2.jpg')"/>
<img src="header33.jpg" onclick="abrir('header3.jpg')"/>
<img src="grenda11.jpg" onclick="abrir('grenda.jpg')"/>
</body>
</html>

caricatos · #7 (**permalink**) 03/08/2008, 00:49

Hola:

Procura no abrir nuevos temas con asuntos que están siendo tratados, ni hacer las preguntas en varios temas a la vez.

Ayer te respondí en otro tema que cerré porque era vuejo, y hoy te he cerrado uno duplicado.

Debes poner como segundo parámetro de la instrucción window.open() una palabra distinta de "_blank" y de la cadana vacía:

Código:

var ventana = window.open("", "popup", ops);

Saludos

#8 (**permalink**) 03/08/2008, 10:59

ya estoy mareado caricatos,perdoname y gracias por decirme como usar el foro de mejor manera, puse como 2 o 3 codigos aki y la verdad estoy mareado yo mismo,jeje, porfavor este renglon de codigo que me has enviado en cual de los codigos va? en el ultimo, en que parte, porque la palabra blank no la veo, gracias.si me puedes reemplazar el codigo por el correcto con la modificacion me daria cuenta bien, gracias.

#9 (**permalink**) 03/08/2008, 11:18

ya cambie el renglon y em anda bien, a las mila maravillas,solo hay un problemita, que pincho una foto y me la abre, la 2º foto, cuando pincho en la "web" principal para escogerla.... me cambia la foto pero me la deja escondida o sea por debajo de la ventana principal se ve la ventana chiquita, bueno habra que modificar un parametro mas..... porfavor solo es eso y no molesto mas. gracias caricatos, sineramente eres un maestro de estas cosas!

#10 (**permalink**) 03/08/2008, 11:27

me olvidaba porque recien vi un error tambien mas... cuando tengo fotos de distinto tamaño es probable que si abro la mas grande primero y luego las que les siguen que son mas chicas , en las que son mas chicas ,(teniendo en cuenta que abri la mas grande primero) las que son mas chicas ,al verlas , se duplica la foto, o sea se ve mas de una vez? porque sera? hya forma de corregirlo o hay que poner las fotos todas delmismo tamaño? es que tengo que hacer un trabajo y esoty medio desesperado con este tema de las ventanas, gracias caricatos de todsas formas.me falta eso y la pregunta de la ventana anterior, para que quede arriba digamos, ontop. se usa algo asi?
ventana=window.open('','ventana','resizable=yes,sc rollbars=no')

buzu · #11 (**permalink**) 03/08/2008, 12:03

??? me perdi.... Decide que codigo es el que vas a usar para poder ayudarte...

#12 (**permalink**) 03/08/2008, 12:37

es este : le hice la modificacion que me dijo caricatos.... , lo que sucede es lo que escribi en mis 2 mensajes anteriores todavia, queda abajo la ventanita chica al pinchar sobre la 2º foto y asi sucesivamente. y el otro error es que la foto grenda que es mas grande , al pincharla es mas grande de tamaño y al pinchar la segunda foto me la duplica en el recuadro o sea se mantiene el tamaño mas grande del primer recuadro (primera ventana que se ha abierto mas grande) y nesecitoria que se ajuste a la foto. digamos que 1. que se ajuste a la foto y si la 1º que se pincha es distinta o de otro tamaño que la 2º que se ve no se duplique o cuadriplique, y 2º si que las bentanas luego de la 1º ftoo que se ve en las mini ventanitas como se deseen llamar , las 2 3 4 foto pj que no me queden atras de la ventana principal sino que nesecito que me queden arriba que sea visible para el que navega, gracias.
http://paraisomodels.com/index14.html
<html>
<head>
<script type="text/javascript">
var _img_grande;

function mostrar() {
var ops = "top=" + ((screen.height - _img_grande.height) / 2);
ops += ",left=" + ((screen.width - _img_grande.width) / 2);
ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
var ventana = window.open("", "popup", ops);
ventana.document.write(contenido);
ventana.document.close();
}

function cargando() {
if (_img_grande.complete) mostrar();
else setTimeout("cargando()", 100);
}

function abrir(imagen) {
_img_grande = new Image();
_img_grande.src = imagen;
cargando();

}

</script>
</head>
<body>
<img src="header11.jpg" onClick="abrir('header1.jpg')"/>
<img src="header22.jpg" onClick="abrir('header2.jpg')"/>
<img src="header33.jpg" onClick="abrir('header3.jpg')"/>
<img src="grenda11.jpg" onClick="abrir('grenda.jpg')"/>
</body>
</html>

#13 (**permalink**) 06/08/2008, 12:41

alguien me puede ayudar segun lo que he escrito antes? gracias

#14 (**permalink**) 06/08/2008, 12:45

perdon de nuevo yo por aki, este codigo me parece impecable,lo unico que es que no me cierran las ventanas que se van abriendo! o sea pincho sobre una foto y me la abre, pincho sobre la siguiente y tambien,pero estas mini ventanitas me quedan abiertas todas, me gustaria que se vayan cerrando a medida que abro la siguiente foto, porfavor alguien que me lo pueda resolver....este es el codigo que funciona perfecto, lo vi en este foro y le modifique un link que tenia por imagenes en el servidor....gracias

<html>
<head>
<script type="text/javascript">
var _img_grande;

function mostrar() {
var ops = "top=" + ((screen.height - _img_grande.height) / 2);
ops += ",left=" + ((screen.width - _img_grande.width) / 2);
ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
var ventana = window.open("", "", ops);
ventana.document.write(contenido);
ventana.document.close();
}

function cargando() {
if (_img_grande.complete) mostrar();
else setTimeout("cargando()", 100);
}

function abrir(imagen) {
_img_grande = new Image();
_img_grande.src = imagen;
cargando();

}

</script>
</head>
<body>
<img src="header11.jpg" onclick="abrir('header1.jpg')"/>
<img src="header22.jpg" onclick="abrir('header2.jpg')"/>
<img src="header33.jpg" onclick="abrir('header3.jpg')"/>
<img src="grenda11.jpg" onclick="abrir('grenda.jpg')"/>
</body>
</html>

caricatos · #15 (**permalink**) 06/08/2008, 20:14

Hola:

Llegaste a probar lo que puse algunos mensajes más arriba...

Cita:

Iniciado por caricatos

Hola:

Procura no abrir nuevos temas con asuntos que están siendo tratados, ni hacer las preguntas en varios temas a la vez.

Ayer te respondí en otro tema que cerré porque era vuejo, y hoy te he cerrado uno duplicado.

Debes poner como segundo parámetro de la instrucción window.open() una palabra distinta de "_blank" y de la cadana vacía:

Código:

var ventana = window.open("", "popup", ops);

Saludos

Tal vez parezca que no funciona porque no se recupera el foco, pero también se puede forzar:
ventana.focus();

Saludos

#16 (**permalink**) 06/08/2008, 21:00

en que secotr lo coloco a ese renglon :ventana.focus();
gracias caricatos.

Osorio06 · #17 (**permalink**) 06/08/2008, 21:28

Para cerrar las ventanas yo haría lo siguiente:
- antes de las funciones:

Código:

var ventana;

- antes de "window.open":

Cita:

try{ventana.close()}catch(e){}

Saludos.

#18 (**permalink**) 07/08/2008, 17:14

hola modifique el window.open por try{ventana.close()}catch(e){} y me da error....
yo solo nesecito del codigo anterior que se abra la foto, desde la 1 hasta la 4º todas, en la misma ventanita pero que me quede arriba la ventanita,porque cuando hago click en la 2º foto , me la pone abajo de todas las ventanitas,gracias
caricatos, aver si me das una manita tamiben,porque ese codigo que me pusiste antes no se como insertarlo, ya probe! gracias a caricatos y a a osorio06

#19 (**permalink**) 07/08/2008, 17:19

caricatos, ya forze la ventana con ventana.focus(); y me anda perfecto ya el codigo,me queda arriba las fotos,una a una.
hay solo un temita que es: si yo no tengo todas las fotos del mismo tamaño, de 4 fotos, tengo 3 iguales y una mas grande de tamaño en dimensiones .... lo que sucede si pincho 1º la mas grande y me la abre , la 2º foto en adelante abre bien pero se ve como duplicada , es como que la ventanita primera que se abre y se pincha ,digamos que sirve de modelo para las siguientes ventanas y asi el contenido de las suiguientes ventanas con lasfotos se ve duplicado o cuadruplicado, se puede arreglar eso? gracias.

caricatos · #20 (**permalink**) 08/08/2008, 04:11

Hola:

Para usar entonces la misma ventana, debes cerrarla antes con el código que te puso Osorio06...

Código:

<script type="text/javascript">
var _img_grande;
var ventana;
function mostrar() {
var ops = "top=" + ((screen.height - _img_grande.height) / 2);
ops += ",left=" + ((screen.width - _img_grande.width) / 2);
ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
try{ventana.close()}catch(e){}
ventana = window.open("", "", ops);
ventana.document.write(contenido);
ventana.document.close();
ventana.focus();
}

function cargando() {
if (_img_grande.complete) mostrar();
else setTimeout("cargando()", 100);
}

function abrir(imagen) {
_img_grande = new Image();
_img_grande.src = imagen;
cargando();
}
</script>

Fíjate que la variable ventana se crea global (fuera de la función que la usa), y dentro de esa función se quita el "var" para que se use la variable global...

Supongo que con este par de retoques estará todo resuelto.

Saludos

#21 (**permalink**) 09/08/2008, 13:49

perfecto caricatos, perfecto osorio06, gracias a ambos.muchas gracias.

#22 (**permalink**) 01/09/2008, 15:57

nesecito hacer una pegunta , cuando tengo el codigo javascript para ajustar una ventana a una foto, en vez de pinchar sobre una fotitio mas pequeña,quiero que sea con un numero, que diga, 1 2 3 4 5 por ejemplo, como seria el codigo?

<body bgcolor="#FFFFFF" text="#000000">
<div align="center"><a href="#" onclick="afoto('header1.jpg')"><img src="header11.jpg"></b>
</body>
este es para cuando hay que pinchar sobre una foto. cual seria si se pincha sbobre una letra ,palabra o numero? gracias.

David · #23 (**permalink**) 02/09/2008, 06:56

Pues es la misma cosa, lo único que vas a cambiar es que en vez del <img> vas a poner texto, en este caso un número, y enlazarlo a la imagen con la ruta correcta.

#24 (**permalink**) 03/09/2008, 07:41

hola perdon que vuelva a molestar : yo tengo este script y en vez de hacer click sobre una imagen ,quiero hacer click sobre un numero o texto,pero tengo el siguiente codigo y tengo lo que llama a la foto, lo pongo a continuacion.davidelgrande me lo explico pero es para otra forma de llamar a las fotos. para este caso como seria?
lo que va entre el body: <img src="header11.jpg" onClick="abrir('header1.jpg')"/>
como seria para llamar desde una letra o texto o numero? , aca va el script....

<script type="text/javascript">
var _img_grande;
var ventana;
function mostrar() {
var ops = "top=" + ((screen.height - _img_grande.height) / 2);
ops += ",left=" + ((screen.width - _img_grande.width) / 2);
ops += ",width=" + _img_grande.width + ",height=" + _img_grande.height;
var contenido = "<html><body style='background-image: url(" + _img_grande.src + ")'></body></html>";
try{ventana.close()}catch(e){}
ventana = window.open("", "", ops);
ventana.document.write(contenido);
ventana.document.close();
ventana.focus();
}

function cargando() {
if (_img_grande.complete) mostrar();
else setTimeout("cargando()", 100);
}

function abrir(imagen) {
_img_grande = new Image();
_img_grande.src = imagen;
cargando();
}
</script>
gracias

David · #25 (**permalink**) 03/09/2008, 09:21

Pues como ya te había dicho, solo cambia el tag <img> por texto:

Código PHP:

  <a href="javascript:afoto('header1.jpg')">Texto</a>

#26 (**permalink**) 03/09/2008, 14:43

o sea <img src="header11.jpg" onClick="abrir('header1.jpg')"/> es parte del codigo que yo tengo....... se pone entre el body ....... tu dices que qudaria asi? porque no es similar el ultimo codigo para llamar la foto que me has puesto ... funciona asi?

David · #27 (**permalink**) 03/09/2008, 14:44

Pero ahí estás usando una imagen, ¿no dijiste que querías que fuera texto?. Pues el ejemplo que te puse era con texto

.

#28 (**permalink**) 03/09/2008, 14:52

perdon una cosa mas, en caso de dejar el mismo codigo tal cual lo puse yo, hay alguna posibilidad que en la ventana nueva que se abre en algun lado de la foto, abajo, al costado o donde sea halla un boton que diga siguiente y atras; y tambien la variante que diga cerrar ventana.Gracias

David · #29 (**permalink**) 03/09/2008, 14:56

Sí, es posible, una forma sería tener en un array la lista de imágenes y con los botones siguiente y anterior recorrer ese array, solo cambiando el src de la imagen.