Agrandar imagen

Colombo1 · #1 (**permalink**) 27/06/2004, 07:18

Hola Foro.

Estoy intentando poner en mi web imagenes pequeñas para poder agrandarlas en ventanas aparte cuando se pinche sobre ellas.
Me recomendaron que me leyera los FAQ's de esta sección, y después de toda la mañana leyendo he encontrado dos post de Tunait que habla sobre ello, pero no consigo hacerlo ya que no se donde insertar mis imágenes.
Pudiera ser el problema que yo estoy haciendo una página .html y el lenguaje del post es en php???
La verdad es que no se mucho sobre esto, el post seguro que está muy bien explicado, pero el nivel es quizás un poco alto para mi.
Gracias.

Carlitos · #2 (**permalink**) 27/06/2004, 09:18

Hola.

El código no es php, es javascript. Lo que pasa es que la antigua versión del foro sólo daba formato a código php.

Visita la página de Tunait. Allí lo tienes mejor explicado. Y si sigues con dudas, vuelve a preguntar.

http://javascript.tunait.com/javascr...p?s=popupfotos

Un saludo.

Colombo1 · #3 (**permalink**) 27/06/2004, 09:44

Muchas gracias Carlitos, la verdad es que ahora si que está mejor explicado.
Ya me salen las imágenes, pero no el pop up con la imagen en grande.
En código copiado de Tunai
<div align="center"><a href="#" onClick="afoto('fotos/tibidabo.jpg','Catedral del Tibidabo');return false"><img src="fotos/tibidabop.jpg" width="95" height="72" border="0"></a></div>
</td>
he sustituido donde pone fotos/tibidabo (en ambos sitios) por el nombre de mi imagen, pero lo que se me abre en mi página nuevamente, no el imagen que pincho.
Encontrais donde está el fallo??

Carlitos · #4 (**permalink**) 27/06/2004, 10:34

Puedes copiar aquí todo el código? Así le podemos echar un vistazo.

Colombo1 · #5 (**permalink**) 27/06/2004, 10:39

Claro, lo he sacado de la página de la página de Tunait, de donde tú me has dicho antes, como te he comentado, lo único que he hecho ha sido sustituir las imágenes de tunait por las mias.

<html>
<head>
<title>Pop up para fotos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
/************************************************** ***************************
Pop-up ajustada a foto. Script creado por Tunait!
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a publicar y ofrecer el código en sitios de script sin previa autorización
Si quieres publicarlo, por favor, contacta conmigo.
http://javascript.tunait.com/
[email protected]
************************************************** ****************************/

var titulopordefecto = "Perico de los palotes"; //Si no se especifica un título al llamar a la función colocará el que se especifique aquí
var ventana;
var cont=0;

function afoto(cual,titulo)
{
if(cont==1){ventana.close();ventana=null}
if(titulo==null){titulo=titulopordefecto}
ventana=window.open('','ventana','resizable=yes,sc rollbars=no')
ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">');
ventana.document.close();
cont++;
}
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho+12,alto+28);
ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2); //centra la ventana. Eliminar si no se quiere centrar el popup
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table border="0" align="center" width="42%" bgcolor="#000000" height="106">
<tr>
<td width="30%">
<div align="center"><a href="#" onClick="afoto('fotos/tibidabo.jpg','Catedral del Tibidabo');return false"><img src="fotos/tibidabop.jpg" width="95" height="72" border="0"></a></div>
</td>
<td width="32%">
<div align="center"><a href="#" onClick="afoto('fotos/gato.jpg');return false"><img src="fotos/gatop.jpg" width="100" height="73" border="0"></a></div>
</td>
<td width="20%">
<div align="center"><a href="#" onClick="afoto('fotos/paloma.jpg');return false"><img src="fotos/palomap.jpg" width="62" height="72" border="0"></a></div>
</td>
<td width="18%">
<div align="center"><a href="#" onClick="afoto('fotos/alenanene.jpg');return false"><img src="fotos/alenanenep.jpg" width="54" height="84" border="0"></a></div>
</td>
</tr>
</table>
</body>
</html>

Carlitos · #6 (**permalink**) 27/06/2004, 10:55

Bueno, pero este código funciona. El error lo debes tener tú en el tuyo. Yo te decía que copiases el tuyo a ver. Y una cosa más.

Cita:

...pero lo que se me abre en mi página nuevamente, no el imagen que pincho.

Qué quieres decir con esto. Explícamelo mejor.

Colombo1 · #7 (**permalink**) 27/06/2004, 12:46

Perdón, no te había entendido, abajo te pongo el código que yo he cambiado. Te comento que me salen las 4 imáges, pero cuando pincho sobre cualquiera de ellas, me vuelve a salir nuevamente la misma página, no el pop up con la imagen en grande.

<html>
<head>
<title>Pop up para fotos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
/************************************************** ***************************
Pop-up ajustada a foto. Script creado por Tunait!
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a publicar y ofrecer el código en sitios de script sin previa autorización
Si quieres publicarlo, por favor, contacta conmigo.
http://javascript.tunait.com/
[email protected]
************************************************** ****************************/

var titulopordefecto = "Perico de los palotes"; //Si no se especifica un título al llamar a la función colocará el que se especifique aquí
var ventana;
var cont=0;

function afoto(cual,titulo)
{
if(cont==1){ventana.close();ventana=null}
if(titulo==null){titulo=titulopordefecto}
ventana=window.open('','ventana','resizable=yes,sc rollbars=no')
ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">');
ventana.document.close();
cont++;
}
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho+12,alto+28);
ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2); //centra la ventana. Eliminar si no se quiere centrar el popup
}
</script>
</font>
<table border="0" align="center" width="42%" bgcolor="#000000" height="106">
<tr>
<td width="30%"> <div align="center"><a href="#" onClick="afoto('fotos/tibidabo.jpg','Catedral del Tibidabo');return false"><img src="images/wlodlog1.gif" width="95" height="72" border="0"></a></div></td>
<td width="32%"> <div align="center"><a href="#" onClick="afoto('fotos/gato.jpg');return false"><img src="images/wlodlog2.gif" width="100" height="73" border="0"></a></div></td>
<td width="20%"> <div align="center"><a href="#" onClick="afoto('fotos/paloma.jpg');return false"><img src="images/dirlog1.bmp" width="62" height="72" border="0"></a></div></td>
<td width="18%"> <div align="center"><a href="#" onClick="afoto('fotos/alenanene.jpg');return false"><img src="images/dirlog2.bmp" width="54" height="84" border="0"></a></div></td>
</tr>
</table>

Carlitos · #8 (**permalink**) 28/06/2004, 08:11

Qué raro. Porque ese código funciona bien. Lo tienes en algún servidor, así me pasas la dirección y lo miro.

De todas formas, has cambiado también el contenido en donde pone afoto?
Es decir.

Código:

<td width="32%">
  <div align="center">
   <a href="#" onClick="afoto('images/wlodlog2.gif');return false">
    <img src="images/wlodlog2.gif" width="100" height="73" border="0">
   </a>
  </div>
</td>
<td width="20%">
  <div align="center">
   <a href="#" onClick="afoto('images/dirlog1.bmp');return false">
    <img src="images/dirlog1.bmp" width="62" height="72" border="0">
   </a>
  </div>
</td>
<td width="18%">
  <div align="center">
   <a href="#" onClick="afoto('images/dirlog2.bmp');return false">
    <img src="images/dirlog2.bmp" width="54" height="84" border="0">
   </a>
  </div>
</td>