PopUp de imagen variable ??

kermit · #1 (**permalink**) 11/05/2004, 18:47

Hola,

Quiero hacer que al pulsar una imagen pequeña, se abra una ventana con la imagen en grande.

No lo puedo hacer en ASP, ya que el alojamiento permite solo HTML. Así que hay que hacerlo pasando como parámetros en la URL los nombres de los archivos con las imagenes grandes.

Mi problema es, ¿como establezco una variable que contenga el nombre de archivo?

Me explico: en la etiqueta img, puedo poner una variable en el atributo src ?

Saludos

PatomaS · #2 (**permalink**) 12/05/2004, 02:51

Hola

Puedes crear todas la imágenes dentro de tu página de esta manera:

Utilizas este script en la cabecera de tu pággina:

Código:

<script type="text/javascript">
function abrir_ventana_imagen(indice) {
	var imagen = new Array(2); {
		imagen[0]= new Image (100,50);
		imagen[0].src="tu_imagen_1_g.gif";
		imagen[1]= new Image (100,50);
		imagen[1].src="tu_imagen_2_g.gif";
	}
	var ventana = window.open(imagen[indice].src, "pagina", "width = " + imagen[indice].width + ", height = " + imagen[indice].height + ", status = no, scrollbars = no, toolbars = no, menubar = yes");
}

y los vínculos serían de esta manera:

Código:

<a href="javascript:abrir_ventana_imagen(0)"><img src="tu_imagen_1_p.gif"></a>

Observa que las imágenes que aparecerían en el vínculo, son las pequeñas, lo ejemplifico añadiéndoles un "_p" y las del vínculo serían las grandes, lo cual lo simbolizao añadiéndoles un "_g".

De esta forma, puedes abrir todas las imágenes que quieras usando un vínculo sencillo en el que solo has de sustituir la imageneque corrsponde y en el array o matriz del script, sol ohas de añadir las imágenes correspondientes a esa página.

Espero haberme explicado

Suerte

Felicidad

kermit · #3 (**permalink**) 12/05/2004, 05:45

¡¡ Mejor no te podías haber explicado !!!!

Muchas gracias.

tunait · #4 (**permalink**) 12/05/2004, 12:20

Trasladado al foro de javascript desde html

kermit · #5 (**permalink**) 13/05/2004, 16:35

Una cosita más.

¿Cómo puedo hacer que la imagen salga con margen cero ?

Saludos,

caricatos · #6 (**permalink**) 13/05/2004, 16:52

Hola a todos:

Ya que te vale el ejemplo de PatomaS

, con su permiso voy a modificar el script para adaptarlo a tus necesidades

:

Código PHP:

  <script type="text/javascript">

function abrir_ventana_imagen(indice) {

    var imagen = new Array(2); {

        imagen[0]= new Image (100,50);

        imagen[0].src="tu_imagen_1_g.gif";

        imagen[1]= new Image (100,50);

        imagen[1].src="tu_imagen_2_g.gif";

    }

    var ventana = window.open("", "pagina", "width = " + imagen[indice].width + ", height = " + imagen[indice].height + ", status = no, scrollbars = no, toolbars = no, menubar = yes");

    ventana.document.open();

    ventana.document.write("<html><body style='background-image:url(" + imagen[indice].src + ")' ></body></html>");

    ventana.document.close()

 
}

Supongo que si no me equivocado en escribirlo, debería funcionar (yo uso algo parecido en mis páginas)

Saludos

kermit · #7 (**permalink**) 13/05/2004, 17:48

Perfecto !!!!!

Eso es exáctamente lo que andaba buscando !!!!

Miles de gracias, caricatos.

kermit · #8 (**permalink**) 13/05/2004, 18:10

Como te he dicho antes funciona, pero lo que observo es que tarda demasiado.

En concreto, mi conjunto de imágenes se trata de 14 imagenes de entre 70-80kb cada una. ¿Es que las carga todas en el array cada vez que se ejecuta la rutina???

Es que es la única explicación que le veo, ya que como digo, tarda en exceso para ser 70kb.

Saludos de nuevo.

KarlanKas · #9 (**permalink**) 14/05/2004, 04:32

Creo que el script tiene un pequeño fallo ya que carga todas las fotos cada vez que se ejecuta el script. Cambialo poniendolo como te digo y dinos si mejora el rendimiento:

Código PHP:

  <script type="text/javascript">

var imagen = new Array(2); {

        imagen[0]= new Image (100,50);

        imagen[0].src="tu_imagen_1_g.gif";

        imagen[1]= new Image (100,50);

        imagen[1].src="tu_imagen_2_g.gif";

 
function abrir_ventana_imagen(indice) {

        

    var ventana = window.open("", "pagina", "width = " + imagen[indice].width + ", height = " + imagen[indice].height + ", status = no, scrollbars = no, toolbars = no, menubar = yes");

    ventana.document.open();

    ventana.document.write("<html><body style='background-image:url(" + imagen[indice].src + ")' ></body></html>");

    ventana.document.close()

 
}

kermit · #10 (**permalink**) 14/05/2004, 08:50

¿donde está el cambio?

Como corría prisa, he usado éste:

function openpopup(arg){
var popurl="popUP"+arg+".htm"
winpops=window.open(popurl,"","width=413,height=59 0,")
winpops=window.moveTo(15,15);
}

Es bastante simple y carga rapidísimo. Lo único es que he optado por la solución "poco elegante" de construir las 14 páginas popUP1.htm .. popUP14.htm

Es que no sabía como pasar como parámetro, el nombre de la imagen a cargar.

No me ha llevado nada de tiempo porque son prácticamente iguales. Sólo tuve que cambiar el número de la foto a cargar.

Saludos,

KarlanKas · #11 (**permalink**) 14/05/2004, 11:28

Pero... podías haberlo probado, hombre! De todas formas si no querías tanta complicación tenías un script en las FAQ's de Tunait que te venía como anillo al dedo.

Las prisas nunca son buenas consejeras!

PatomaS · #12 (**permalink**) 14/05/2004, 11:35

Hola

Bueno, no es un método poco elegante, es, en mi opinión muy adecuado, y entre otras cosas, si las imágenes tienen aglún valor por si mismas, permite que estén accesibles a través de los buscadores.

La función que te mandaba inicialmente era para abrir las imágenes directamente, pero con un pequeño cambio abre páginas .html.

Y habría dos maneras de aumentar un poco la velocidad de la carga de la spáginas y las imágenes.

Respecto a las imágenes, es que el array lo coloques en una función que se active al cargar la página inicial, es decir que lo actives mediante un onload. A mi este método no me agrada mucho pues obliga al usuario a cargar todas las imágenes anque luego no amplie ninguna.

La otra forma, es que utilices esta línea en la cabecera de la página:

<link rel="next" href="tu_pagina_01.htm" />

Esto hace una especie de precarga en segundo plano, es el método que utilizo en los sitios en los que tengo ampliaciones de imágenes. Aunque la pega de este método, es que no funciona en todos los navegadores, es decir, solo algunos hacen la precarga de la página, pero lo bueno, es que los que no hacen la precarga, no hacen nada, por loque es un código beneficioso o inocuo, pero nunca negativo.

Suerte

Felicidad

kermit · #13 (**permalink**) 14/05/2004, 12:23

Muchas gracias,

Desde luego que las prisas no son buenas, pero tampoco es productivo pararte mucho en cada detalle. Sinó, las cosas se eternizan.

Lo más fácil era cargar directamente las imágenes pero me quedaba un margen bastante feo.

Para cerrar el tema: ¿¿ se podía haber pasado el nombre de la imagen como parámetro:

..... popUP.htm?imagen1.jpg

Y así habría hecho una sola página ??

KarlanKas · #14 (**permalink**) 14/05/2004, 12:39

Pues sí. Tomando tu ruta:

<a href="popUp.html?imagen1.jpg">PINCHA </a>

Luego en popUp.html ponías:

<script>
ruta="imagenes/";

function carga(){
imagen=location.href.split("?")[1];
document.images[0].src=ruta+imagen;
}
</script>
</head>
<body onload=carga()>
<img src="nada.jpg">
...

Este script está pensado para páginas donde sólo haya una imagen en la pop up o la imagen sea sea la primera en aparecer.

Un saludo!