Pasador de fotos

cmc · #1 (**permalink**) 20/12/2005, 16:42

Hola gente, la verdad es que no se mucho de java script asi que les pido que si pueden me den una mano
Tengo una carpeta con fotos, algo asi

58_1.jpg
58_2.jpg
58_6.jpg

como es algo dinamico las leeo con php, el tema es que no me doy la idea para poder colocar dos botones y que el usuario pueda ir pasandolas de a una.

Se entiende?, aclaro recurro a java script porque la idea es que no se refresque al pagina.

Gracais

monoswim · #2 (**permalink**) 21/12/2005, 05:32

Sería algo así...

<input type="button" onclick="document.getElementByID('imagen').src = '58_2.jpg'" value="Imagen2">

No lo probé y se me acaba de ocurrir, pero pienso que puede andar...

Saludos

Panino5001 · #3 (**permalink**) 21/12/2005, 06:41

Creo que esto puede servirte:

Código:

<?php 
extract($_GET);
mysql_connect("localhost","user","pass");
mysql_select_db("db");
$qry2=mysql_query("select * from fotovisor where identificador='".$identificador."' order by id asc");
while($row2=mysql_fetch_array($qry2)){
if($row2['foto']!=""){
$miarrayphp[]=$row2['foto'];}
}
$coma=0;
$canti=(count($miarrayphp))-1;
for($i=0;$i<count($miarrayphp);$i++){
$miarr.="'".$miarrayphp[$i]."'";
if($coma==$canti){$miarr.='';}else{$miarr.=",";}
$coma++;
}
?>
<html>
<head>
<title>Galer&iacute;a de Imagenes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilos.css" rel="stylesheet" type="text/css">
<script>
function precarga(){
var fotos=new Array(<?php echo $miarr; ?>);
for(i=0;i<fotos.length;i++){
var directorio="";
eval("imagen"+i+"=new Image();");
eval("imagen"+i+".src=" + "\"" +directorio+fotos[i]+"\";");
}
}
</script>
<script>
var indice=0;
function cambia(){
indice--;
var iden2;
if (document.layers) iden2 = eval("document.images['cama']");
if (document.all) iden2 = eval("document.images['cama']");
if (document.getElementById) iden2 = eval('document.getElementById("cama")');
var miarray=new Array(<?php echo $miarr; ?>);
if (indice < 0) indice = miarray.length - 1;
var directorio="";
iden2.src=directorio+miarray[indice];
document.pepe.leyenda.value = (indice+1) + " de " + miarray.length;
}
</script>
<script>
function cambia2(){
indice++;
var iden2;
if (document.layers) iden2 = eval("document.images['cama']");
if (document.all) iden2 = eval("document.images['cama']");
if (document.getElementById) iden2 = eval('document.getElementById("cama")');
var miarray=new Array(<?php echo $miarr; ?>);
if (indice > miarray.length-1) indice = 0;
var directorio="";
iden2.src=directorio+miarray[indice];
document.pepe.leyenda.value = (indice+1) + " de " + miarray.length;
}
</script>
</head>
<body bgcolor="#FF9900" leftmargin="0" topmargin="0" onLoad="precarga()">
<table border="0"  width="450" height="300"align="center" cellpadding="0" cellspacing="0" background="images/Popup.jpg">
  <tr> 
    <td align="left" valign="top"><img src="images/vacio.gif" width="30" height="60"></td>
    <td valign="top"><img src="images/vacio.gif" width="330" height="60"></td>
    <td align="right" valign="top"><img src="images/vacio.gif" width="20" height="60"></td>
    <td valign="top"><img src="images/vacio.gif" width="55" height="60"></td>
    <td align="right" valign="top"><img src="images/vacio.gif" width="10" height="60"></td>
  </tr>
  <tr> 
    <td align="left" valign="top"><img src="images/vacio.gif" width="30" height="210"></td>
    <td valign="middle" align="center"><img src='<?php $nn=mysql_query("select * from fotovisor where identificador='".$identificador."' order by id asc"); 
$imag=mysql_fetch_array($nn); echo $imag['foto']; ?>' id='cama' name='cama'></td>
    <td align="right" valign="top">&nbsp;</td>
    <td width="55" align="center" valign="top"><form name="pepe">
<table align="center"><tr><td colspan='2' align="center">
<input name="leyenda" type="text" id="leyenda" style="border-with:thin;border-style:solid;border-color:#cccccc;background-color:#FFFFFF;text-align:center;font-size:10px;color:#333333;font-family:Arial, Helvetica, sans-serif;" value="1 de <?php echo $canti+1; ?>" size="9">
</td></tr
><tr>
            <td align="left"> <a href="javascript:cambia()"><img src="images/retroceder.gif" width="15" height="15" border="0"></a></td>
            <td align="right"><a href="javascript:cambia2()"><img src="images/avanzar.gif" width="15" height="15" border="0"></a></td>
</tr></table>
</form></td>
    <td align="right" valign="top">&nbsp;</td>
  </tr>
  <tr> 
    <td align="left" valign="top"><img src="images/vacio.gif" width="20" height="30"></td>
    <td valign="top">&nbsp;</td>
    <td align="right" valign="top">&nbsp;</td>
    <td valign="top">&nbsp;</td>
    <td align="right" valign="top">&nbsp;</td>
  </tr>
</table>
</body>
</html>

cmc · #4 (**permalink**) 21/12/2005, 09:06

Creo que lo que me paso panino5001 puede funcionar, pero lo tengo que modificar ya que las imagenes no las saco de una base sino de una carpeta.

Lo modifico y les cuento

Gracias

cmc · #5 (**permalink**) 22/12/2005, 07:28

La modificacion me trajo problemas jeje, en la linea roja que marque no se que colocar, les cuento a diferencia de la que me paso panino5001 yo tomo las imagenes desde una carpeta mediante un id que viene por GET hasta aca todo bien el tema que no se como cargar la imagen, evidentemente no se como llar a la imagen mediante javascript

Cualquier ayuda o sugerencia es bienvenida

Gracias

Código PHP:

  <?php  
///////////////////////////////////////////////////////////////////////// 
$miarr=""; 
$cantidad=""; 
if ($gestor = opendir('../fotos_grandes/')) { //abrir archivo 
    while ($archivo = readdir($gestor)) { //leer archivo 
        if ($archivo != "." && $archivo != "..") { //verificar que no es un directorio 
            $archivos[] = $archivo; //guardar en una array 
        }  
    }  
    closedir($gestor); //cerrar directorio 
}  
if($archivos!=""){ 
sort($archivos); //acomodar resultados 
} 
for ($i=0;$i<count($archivos);$i++){ //leer resultados 
$extension = explode('.',$archivos[$i]);//leer extencion 
$extt= ".{$extension[1]}"; 
if ($extt==".jpg"){//verificar que sean jpg 
//$numero=$_GET['id']; //aca va el id de la foto 
$numero=58;//esto es solo para probar 
$imagen=$archivos[$i]; 
$dato=explode("_",$imagen);//exploro el archivo 
$id_solo=$dato[0];//tomo el primer dato 
if($id_solo==$numero){ //comparo cuando son iguales 
$cantidad++; 
$miarr="'".$archivos[$i]."'"; 
$miarr.=''; 
} 
 
} 
} 
$miarr.=","; 
////////////////////////////////////////////////////////////////////////// 
?>

<html>
<head>
<title>Galería de Imagenes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="estilos.css" rel="stylesheet" type="text/css">
<script>
function precarga(){
var fotos=new Array(<?php echo $miarr; ?>);
for(i=0;i<fotos.length;i++){
var directorio="../fotos_grandes/";
eval("imagen"+i+"=new Image();");
eval("imagen"+i+".src=" + "\"" +directorio+fotos[i]+"\";");
}
}
</script>
<script>
var indice=0;
function cambia(){
indice--;
var iden2;
if (document.layers) iden2 = eval("document.images['cama']");
if (document.all) iden2 = eval("document.images['cama']");
if (document.getElementById) iden2 = eval('document.getElementById("cama")');
var miarray=new Array(<?php echo $miarr; ?>);
if (indice < 0) indice = miarray.length - 1;
var directorio="../fotos_grandes/";
iden2.src=directorio+miarray[indice];
document.pepe.leyenda.value = (indice+1) + " de " + miarray.length;
}
</script>
<script>
function cambia2(){
indice++;
var iden2;
if (document.layers) iden2 = eval("document.images['cama']");
if (document.all) iden2 = eval("document.images['cama']");
if (document.getElementById) iden2 = eval('document.getElementById("cama")');
var miarray=new Array(<?php echo $miarr; ?>);
if (indice > miarray.length-1) indice = 0;
var directorio="../fotos_grandes";
iden2.src=directorio+miarray[indice];
document.pepe.leyenda.value = (indice+1) + " de " + miarray.length;
}
</script>
</head>
<body bgcolor="#FF9900" leftmargin="0" topmargin="0" onLoad="precarga()">
<table border="0" width="450" height="300"align="center" cellpadding="0" cellspacing="0" background="images/Popup.jpg">
<tr>
<td align="left" valign="top"><img src="images/vacio.gif" width="30" height="60"></td>
<td valign="top"><img src="images/vacio.gif" width="330" height="60"></td>
<td align="right" valign="top"><img src="images/vacio.gif" width="20" height="60"></td>
<td valign="top"><img src="images/vacio.gif" width="55" height="60"></td>
<td align="right" valign="top"><img src="images/vacio.gif" width="10" height="60"></td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/vacio.gif" width="30" height="210"></td>
<td valign="middle" align="center"><img src="¿Que es lo que va aca?" id='cama' name='cama'></td>
<td align="right" valign="top"> </td>
<td width="55" align="center" valign="top"><form name="pepe">
<table align="center"><tr><td colspan='2' align="center">
<input name="leyenda" type="text" id="leyenda" style="border-with:thin;border-style:solid;border-color:#cccccc;background-color:#FFFFFF;text-align:center;font-size:10px;color:#333333;font-family:Arial, Helvetica, sans-serif;" value="1 de <?php echo $cantidad; ?>" size="9">
</td></tr
><tr>
<td align="left"> <a href="javascript:cambia()"><img src="images/retroceder.gif" width="15" height="15" border="0"></a></td>
<td align="right"><a href="javascript:cambia2()"><img src="images/avanzar.gif" width="15" height="15" border="0"></a></td>
</tr></table>
</form></td>
<td align="right" valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/vacio.gif" width="20" height="30"></td>
<td valign="top"> </td>
<td align="right" valign="top"> </td>
<td valign="top"> </td>
<td align="right" valign="top"> </td>
</tr>
</table>
</body>
</html>

Panino5001 · #6 (**permalink**) 22/12/2005, 11:47

Probá con: <?= $miarr[0] ?>

cmc · #7 (**permalink**) 22/12/2005, 13:55

Hola modifique el php

Código PHP:

  <?php  
///////////////////////////////////////////////////////////////////////// 
$miarr=""; 
$cantidad=""; 
if ($gestor = opendir('../fotos_grandes/')) { //abrir archivo 
    while ($archivo = readdir($gestor)) { //leer archivo 
        if ($archivo != "." && $archivo != "..") { //verificar que no es un directorio 
            $archivos[] = $archivo; //guardar en una array 
        }  
    }  
    closedir($gestor); //cerrar directorio 
}  
if($archivos!=""){ 
sort($archivos); //acomodar resultados 
} 
for ($i=0;$i<count($archivos);$i++){ //leer resultados 
$extension = explode('.',$archivos[$i]);//leer extencion 
$extt= ".{$extension[1]}"; 
if ($extt==".jpg"){//verificar que sean jpg 
//$numero=$_GET['id']; //aca va el id de la foto 
$numero=58;//esto es solo para probar 
$imagen=$archivos[$i]; 
$dato=explode("_",$imagen);//exploro el archivo 
$id_solo=$dato[0];//tomo el primer dato 
if($id_solo==$numero){ //comparo cuando son iguales 
$cantidad++; 
$miarr[]=$archivos[$i]; 
} 
} 
} 
////////////////////////////////////////////////////////////////////////// 
?>

Y despeus utilice lo que vos me dijiste, ahora me muestra la foto de entrada, lo que no me funciona son los botones de adelante y atras.
¿Tenes idea del porque debe ser?

Panino5001 · #8 (**permalink**) 22/12/2005, 14:55

Fijate en el código fuente de la página qué aparece en el array de imágenes en la función cambia2()

cmc · #9 (**permalink**) 22/12/2005, 16:33

si si estoy en eso pero todavia no logre que me carge la imagen, osea logro que en la caja de texto me diga en que posicion estoy
1 de 8
4 de 8
etc
pero no me carga la imagen de la carpeta, no logro asignarle el array que traigo de php al javascript

Voy a seguir intentando

Panino5001 · #10 (**permalink**) 22/12/2005, 17:39

Me parece que no estás colocando las comillas. Probá con esta modificación:

Código PHP:

  <?php   
/////////////////////////////////////////////////////////////////////////  
$miarr="";  
$cantidad="";  
if ($gestor = opendir('../fotos_grandes/')) { //abrir archivo  
    while ($archivo = readdir($gestor)) { //leer archivo  
        if ($archivo != "." && $archivo != "..") { //verificar que no es un directorio  
            $archivos[] = $archivo; //guardar en una array  
        }   
    }   
    closedir($gestor); //cerrar directorio  
}   
if($archivos!=""){  
sort($archivos); //acomodar resultados  
}  
for ($i=0;$i<count($archivos);$i++){ //leer resultados  
$extension = explode('.',$archivos[$i]);//leer extencion  
$extt= ".{$extension[1]}";  
if ($extt==".jpg"){//verificar que sean jpg  
//$numero=$_GET['id']; //aca va el id de la foto  
$numero=58;//esto es solo para probar  
$imagen=$archivos[$i];  
$dato=explode("_",$imagen);//exploro el archivo  
$id_solo=$dato[0];//tomo el primer dato  
if($id_solo==$numero){ //comparo cuando son iguales  
$cantidad++;  
$miarr[]=$archivos[$i];  
}  
}  
}  
//////////////////////////////////////////////////////////////////////////  
$minuevoarray=implode('","',$miarr); 
$minuevoarray='"'.$minuevoarray.'"'; 
//y en el javascript colocá la cadena resultante en lugar de $miarr 
?>

cmc · #11 (**permalink**) 23/12/2005, 06:33

Me sigue sin funcionar!!
Te propongo algo para no hacerte perder tiempo, se que mi problema esta en la funcion cambia2 de javascript pero la verdad tiene lineas que no entiendo, asi que te digo cuales son y si podes darme una mano asi quizas ea mejor

<script>
//declaro la funcion
function cambia2(){
indice++;//contador
var iden2;//declaro la variable pero no se para que la uso
if (document.layers) iden2 = eval("document.images['cama']");//no enteindo que es layers
if (document.all) iden2 = eval("document.images['cama']");//no entiendo que es all
if (document.getElementById) iden2 = eval('document.getElementById("cama")');//no enteindo que es getElementById
var miarray=new Array(<?php echo $miarr; ?>);//declaro unarray y le asigno el que saco de php
if (indice > miarray.length-1) indice = 0;//controlo la cantidad de imagenes que voy a mostrar
var directorio="";//defino el directorio
iden2.src=directorio+miarray[indice];// supongo que armo la ruta a la foto y la asigno a la etiqueta de imagen
document.pepe.leyenda.value = (indice+1) + " de " + miarray.length;//concateno lo que voy a mostrar ern la caja de texto
}
</script>

Gracias

cmc · #12 (**permalink**) 23/12/2005, 06:43

Pero , de casualidad, sigo sin entender esas lineas asi que seran bien recibidas las explicaciones

Muchas gracias

Panino5001 · #13 (**permalink**) 23/12/2005, 08:30

document.getElementById es una manera de referenciar elementos que tienen un id definido. Funciona en navegadores 5.0 en adelante. Para navegadores más viejos, si uno quería referenciar elementos tenía que hacer distintas cosas si se trataba de explorer o netscape (ie funcionaba con document.all y netscape con document.layers), pero en este caso no eran necesarias las líneas que contienen document.all ni document.layers y particularmente yo ya sólo uso getElementById.
Lo que hace el script básicamente es indicar un nuevo src a la imagen cuyo id es cama, tomando ese src del array, según un índice que es una variable que a cada click en los botones va creciendo o decreciendo.
Me alegra que te haya funcionado.