Foros del Web » Programando para Internet » Javascript »

Pasador de fotos

 Estas en el tema de Pasador de fotos en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/12/2005, 16:42
cmc
 
Fecha de Ingreso: febrero-2003
Ubicación: Capital
Mensajes: 1.317
Antigüedad: 21 años, 10 meses
Puntos: 1
Pasador de fotos
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
__________________
Claudio Caldareri
diseñador Multimedial
www.disemedios.com.ar
  #2 (permalink)  
Antiguo 21/12/2005, 05:32
Avatar de monoswim
$moderador{'Esteban'}
  
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 22 años, 11 meses
Puntos: 90
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
__________________
Esteban Quintana
  #3 (permalink)  
Antiguo 21/12/2005, 06:41
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 7 meses
Puntos: 834
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>
  #4 (permalink)  
Antiguo 21/12/2005, 09:06
cmc
 
Fecha de Ingreso: febrero-2003
Ubicación: Capital
Mensajes: 1.317
Antigüedad: 21 años, 10 meses
Puntos: 1
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
__________________
Claudio Caldareri
diseñador Multimedial
www.disemedios.com.ar
  #5 (permalink)  
Antiguo 22/12/2005, 07:28
cmc
 
Fecha de Ingreso: febrero-2003
Ubicación: Capital
Mensajes: 1.317
Antigüedad: 21 años, 10 meses
Puntos: 1
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&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="../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">&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 $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">&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>
__________________
Claudio Caldareri
diseñador Multimedial
www.disemedios.com.ar
  #6 (permalink)  
Antiguo 22/12/2005, 11:47
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 7 meses
Puntos: 834
Probá con: <?= $miarr[0] ?>
  #7 (permalink)  
Antiguo 22/12/2005, 13:55
cmc
 
Fecha de Ingreso: febrero-2003
Ubicación: Capital
Mensajes: 1.317
Antigüedad: 21 años, 10 meses
Puntos: 1
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?
__________________
Claudio Caldareri
diseñador Multimedial
www.disemedios.com.ar
  #8 (permalink)  
Antiguo 22/12/2005, 14:55
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 7 meses
Puntos: 834
Fijate en el código fuente de la página qué aparece en el array de imágenes en la función cambia2()
  #9 (permalink)  
Antiguo 22/12/2005, 16:33
cmc
 
Fecha de Ingreso: febrero-2003
Ubicación: Capital
Mensajes: 1.317
Antigüedad: 21 años, 10 meses
Puntos: 1
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
__________________
Claudio Caldareri
diseñador Multimedial
www.disemedios.com.ar
  #10 (permalink)  
Antiguo 22/12/2005, 17:39
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 7 meses
Puntos: 834
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
?>
  #11 (permalink)  
Antiguo 23/12/2005, 06:33
cmc
 
Fecha de Ingreso: febrero-2003
Ubicación: Capital
Mensajes: 1.317
Antigüedad: 21 años, 10 meses
Puntos: 1
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
__________________
Claudio Caldareri
diseñador Multimedial
www.disemedios.com.ar
  #12 (permalink)  
Antiguo 23/12/2005, 06:43
cmc
 
Fecha de Ingreso: febrero-2003
Ubicación: Capital
Mensajes: 1.317
Antigüedad: 21 años, 10 meses
Puntos: 1
Funciono!!!!
Pero , de casualidad, sigo sin entender esas lineas asi que seran bien recibidas las explicaciones

Muchas gracias
__________________
Claudio Caldareri
diseñador Multimedial
www.disemedios.com.ar
  #13 (permalink)  
Antiguo 23/12/2005, 08:30
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 7 meses
Puntos: 834
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.
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 19:52.