Ventana de acuerdo a los valores de la imagen

JuanKa · #1 (**permalink**) 21/12/2004, 03:18

Hola a todos

Estoy haciendo una galeria de imagen mediante tumbnails y esta alli esta todo bien, pero quiero que al presionar sobre la imagen pequeña , me permita mostrar esta misma imagen en su tamaño real(tal y conforme se grabo en la BD), asi mismo que NO tenga barra de direcciones,scrolers, menus,es decir, solo una ventana y la imagen.

Gracias

yesik · #2 (**permalink**) 21/12/2004, 03:22

En la página de tunait y en las faqs lo tienes,, yo lo he tomado "prestado"

function afoto(cual)
{
if(ventana){ventana.close()}
buscar(cual)
ventana=window. open('','ventana','resize=no,scrollbars=no,resizab le=no width=740,height=605')
ventana.document.write('<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" bgcolor="#D5D3F4"><img id="foto" alt="NAVE BALGON" src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)" >')
ventana.document.write('<div align="center"><a href="#" onClick="if(opener.cont==0){opener.cont=opener.afo tos.length-1}else{opener.cont--};document.getElementById(\'foto\').src =opener.afotos[opener.cont];return false"><img src="archivos/detras.png" border="0" onMouseover=\'src="archivos/detrassobre.png"\' onMouseout=\'src="archivos/detras.png"\'></a>')
ventana.document.write(' <a href="#" onClick="if(opener.cont==opener.afotos.length-1){opener.cont=0}else{opener.cont++};document.getE lementById(\'foto\').src =opener.afotos[opener.cont];return false"><img src="archivos/delante.png" border="0" name="delante" onMouseover=\'src="archivos/delantesobre.png"\' onMouseout=\'src="archivos/delante.png"\'></a>')
}

var cont

function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho,alto+70)
ventana.moveTo((screen.width - ancho)/2,(screen.height - (alto+78))/2)

}

//Solo tienes que llamar a afoto("foto")

KarlanKas · #3 (**permalink**) 21/12/2004, 04:35

Por favor, respetad los créditos. Yesik, no has puesto el script completo. Lo único que pide a cambio tunait (como otros muchos que se dedican a esto) de dejaros su script es que pongais los títulos de crédito en el mismo.

El script completo es:

Código HTML:

<script language="javascript">

//Ventana ajustada a foto por tunait

var ventana
//metemos en un array el listado de las imágenes que queramos utilizar en el orden que nos interese

afotos=new Array()
afotos[0]="tibidabo.jpg"
afotos[1]="gato.jpg"
afotos[2]="paloma.jpg"
afotos[3]="perico.jpg"

function afoto(cual)
{
if(ventana){ventana.close()}
buscar(cual)
ventana=window. open('','ventana','resize=yes,scrollbars=no,resiza  ble=yes')
ventana.document.write('<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"><img id="foto" alt="mi foto" src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">')
ventana.document.write('<br><div align="center"><a href="#" onClick="if(opener.cont==0){opener.cont=opener.afotos.length-1}else{opener.cont--};document.getElementById(\'foto\').src =opener.afotos[opener.cont];return false">anterior</a>')
ventana.document.write('  |  <a href="#" onClick="if(opener.cont==opener.afotos.length-1){opener.cont=0}else{opener.cont++};document.getElementById(\'foto\').src =opener.afotos[opener.cont];return false">siguiente</a>')
}

var cont
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho,alto+50)
}
function buscar(que)
{
for(c=0;c<afotos.length;c++)
{
   if(afotos[c]==que)
   {
   cont= c;
   return cont
   break
  }
}

}
</script>

Y lo podeis encontrar aquí.

JuanKa · #4 (**permalink**) 21/12/2004, 04:44

Amigo KarlanKas a ver si me das una manito. Gracias

Me explico un poco mejor
en este archivo
*********************
cdc_recull_fotografic.php
********************
Aca genero las imagenes pequeñas(Thumbnails) mediante estos tag

<?php
while ($fotos=mysql_fetch_array($consulta_fotos))
{
?>

<table width="620" border="0" cellpadding="3" cellspacing="2" bgcolor="#FFFFFF">
<tr bgcolor="#DFEFFF">
<th colspan="5" scope="col"><div align="center"></div>
<div align="center" class="Estilo5"><?php echo $fotos["titulo"];?></div></th>
</tr>
<tr>
<th scope="col"><?php echo "<a href=\"ver_foto.php?de=".$fotos['des1']."&codi=".$fotos['id']."\"; target='_blank'><img src=\"thumbnail.php?ruta=Archivos_Fotos/".$fotos['ima1']."\" border='0' alt='Ampliar Imatge'>"; ?></th>
<th scope="col"><?php echo "<a href=\"ver_foto.php?de=".$fotos['des2']."&codi=".$fotos['id']."\"; target='_blank'><img src=\"thumbnail.php?ruta=Archivos_Fotos/".$fotos['ima2']."\" border='0' alt='Ampliar Imatge'>"; ?></th>
</tr>
<tr class="Estilo2">
<th scope="col"><div align="center"><?php echo $fotos["des1"];?></div></th>
<th scope="col"><div align="center"><?php echo $fotos["des2"];?></div></th>
</tr>
</table>

y como pueden ver en rojo me llama al archivo VER_FOTO.PHP, esta es la ventana que quiero que salga al tamaño de la imagen y asi mismo que NO tenga barra de direcciones,scrolers, menus,es decir, solo una ventana y la imagen.

Como deberia llamar a la funcion que me acabas de dar.

Gracias

<?php } ?>

Esto me sale perfecto

Pero donde

JuanKa · #5 (**permalink**) 21/12/2004, 04:47

me Faltaba el codigo del VER_FOTO.php

<?php
include ('Php/Fotografias/config_fotografias.php');
//recojo las variables
$var_des=$_GET["de"];
$var_cod=$_GET["codi"];
//echo $var_des."<br>"; echo $var_cod."<br>"."<br>"."<br>";
$consulta=mysql_query("SELECT * FROM imagenes WHERE id=$var_cod",$conectar);
$var_d1=mysql_result($consulta,0,"des1");
$var_d2=mysql_result($consulta,0,"des2");

if ($var_d1 == $_GET["de"])
{ $con=mysql_query("SELECT * FROM imagenes WHERE des1='$var_d1' ",$conectar);
$var_tit=mysql_result($con,0,"titulo");
$var_ima=mysql_result($con,0,"ima1");
}

if ($var_d2 == $_GET["de"])
{ $con=mysql_query("SELECT * FROM imagenes WHERE des2='$var_d2' ",$conectar);
$var_tit=mysql_result($con,0,"titulo");
$var_ima=mysql_result($con,0,"ima2");
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="template.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<body>
<table width="600" border="0" align="center" cellpadding="5" cellspacing="3">
<tr>
<th scope="col">
<table width="580" border="0" cellpadding="5" cellspacing="2" class="Middle">
<tr>
<th scope="col"><span class="Estilo1"><?php echo $var_tit;?></span></th>
</tr>
</table></th>
</tr>
<tr>
<td align="center" valign="middle"><div align="center">
<table width="210" height="210" border="1" cellpadding="5" cellspacing="2" bgcolor="#FFFFFF">
<tr>
<th scope="col"><?php echo "<img src=\"Archivos_Fotos/".$var_ima."\">"; ?></th>
</tr>
</table>
</div>
<div align="center"> </div></td>
</tr>
</table>
</body>
</html>
<?php
mysql_close($conectar);
?>

Gracias

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

¿Tiene siempre la imagen el mismo tamaño?

Si es así puedes hacer:

<a onclick="imatge=window.open(this.href,'imatge','width=210,height=210')" href=\"ver_foto.php?de=".$fotos['des2']."&codi=".$fotos['id']."\"; target='imatge'>

Así te evitas el tener que meter el código de tunait. Si quieres meter el código de tunait, sólo tienes que poner:

<a onclick="afoto('<?echo $imatge;?>" href="#"; target='imatge'>

Eso sí, tendrías que poner en la variable $imatge la ruta a la imagen grande.

No sé si me he explicado...

JuanKa · #7 (**permalink**) 21/12/2004, 10:09

las imagenes pequeñas las genero con este archivo
thumbnail.php cuyo contenido es el sgte.

<?php
$arc=$_GET['ruta'];
$image = imagecreatefromjpeg($arc);
$img_w = imagesx($image);
$img_h = imagesy($image);

$new_img_w = 120;
$new_img_h = 100;

$new_img_source = imagecreatetruecolor($new_img_w,$new_img_h);
imagecopyresized($new_img_source, $image, 0, 0, 0, 0, $new_img_w, $new_img_h,$img_w, $img_h);
header("Content-type: image/jpeg");
imagejpeg($new_img_source);
?>

si te das cuenta el tamaño de la imagen pequeña lo hago forzando el tamaño en este caso 120x100.

Ahora el tamaño de las imagenes que entro son diferentes, es decir la imagen 1 puede tener como tamaño 420x360px; la imagen 2: 320x300px, etc, es
pero cuando muestro TODAS LAS IMAGENES PEQUEÑAS HAGO QUE SEAN DE TAMAÑO 120X100 Y LUEGO CUANDO LE DE CLICK YA ME VAYA A OTRA WEB CUYO TAMAÑO DE ESTE SEA EL TAMAÑO DE LA IMAGEN ES DECIR DE 420X360 o 320X300 RESPECTIVAMENTE.

Ojala me hayas entendido