Foros del Web » Programando para Internet » Javascript »

Ventana de acuerdo a los valores de la imagen

 Estas en el tema de Ventana de acuerdo a los valores de la imagen en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/12/2004, 03:18
Avatar de JuanKa  
Fecha de Ingreso: septiembre-2004
Mensajes: 468
Antigüedad: 19 años, 7 meses
Puntos: 1
Ventana de acuerdo a los valores de la imagen
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
  #2 (permalink)  
Antiguo 21/12/2004, 03:22
Avatar de yesik  
Fecha de Ingreso: octubre-2004
Ubicación: Orense
Mensajes: 292
Antigüedad: 19 años, 6 meses
Puntos: 1
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")
__________________
Inmuebles de Galicia:: www.inmueblevirtual.net
Compartir piso Galicia:: www.inmueblevirtual.net/foro
  #3 (permalink)  
Antiguo 21/12/2004, 04:35
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
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í.
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
Última edición por KarlanKas; 21/12/2004 a las 04:41
  #4 (permalink)  
Antiguo 21/12/2004, 04:44
Avatar de JuanKa  
Fecha de Ingreso: septiembre-2004
Mensajes: 468
Antigüedad: 19 años, 7 meses
Puntos: 1
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
  #5 (permalink)  
Antiguo 21/12/2004, 04:47
Avatar de JuanKa  
Fecha de Ingreso: septiembre-2004
Mensajes: 468
Antigüedad: 19 años, 7 meses
Puntos: 1
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
  #6 (permalink)  
Antiguo 21/12/2004, 05:39
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
¿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...

__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #7 (permalink)  
Antiguo 21/12/2004, 10:09
Avatar de JuanKa  
Fecha de Ingreso: septiembre-2004
Mensajes: 468
Antigüedad: 19 años, 7 meses
Puntos: 1
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
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:35.