Drop Down con Imagenes

DruX · #1 (**permalink**) 27/05/2009, 21:02

hola tengo un rpoblemilla, tengo dos script uno con php y otro con javascript

lo que quiero:

un Drop Down que automaticamente identifique las carpetas de un directorio y las liste, ademas quiero que bajo esta salga automaticamente una imagen, del mismo nombre de la carpeta que cambie mientras se cambia de opcion, si no me explico, lo que quiero es hacer esto:

Código:

<select name="archivos">
<?php
    //abro un directorio
    $mydir=opendir("ruta/dir");
    if(isset($mydir))
    {
        //lo recorro
        while($archivo=readdir($mydir))
        {
            //si es un archivo voy agregandolo al select (drop down segun vb)
            if(!is_dir($archivo))
            {
?>
<option><?php echo $archivo;?></option>
<?php
            }
        }
    }
?>
</select>

y mezclarlo con esto:

Código:

<HEAD><SCRIPT>
// preload images
var img1 = new Image().src = "../images/jht.gif"
var img2 = new Image().src = "../images/jsht.gif"
var img3 = new Image().src = "../images/pht.gif"

function setImage(imageSelect) {
 theImageIndex = imageSelect.options[imageSelect.selectedIndex].value;
 if (document.images)
     document.images[0].src = eval("img" + theImageIndex);
  }
</SCRIPT></HEAD><BODY>
<FORM NAME="theForm" METHOD="POST">
<TABLE><TR><TD>Images: <TD>
<SELECT NAME="items" onChange="setImage(this)">
   <OPTION VALUE="1">Java How-to
   <OPTION VALUE="2">Javascript How-to
   <OPTION VALUE="3">Powerbuilder How-to
 </SELECT>
 <TD><IMG SRC = "../images/jht.gif" HEIGHT=100 WIDTH=200>
 </TABLE></FORM></BODY>

A ver si alguien se las ingenia,

saludos!!!! y gracias!!!

abimaelrc · #2 (**permalink**) 27/05/2009, 21:06

Segun php.net el primer while esta incorrecto

Código PHP:

  <?php 
// Note que !== no existía hasta 4.0.0-RC2 
 
if ($gestor = opendir('/ruta/a/archivos')) { 
    echo "Gestor de directorio: $gestor\n"; 
    echo "Archivos:\n"; 
 
    /* Esta es la forma correcto de iterar sobre el directorio. */ 
    while (false !== ($archivo = readdir($gestor))) { 
        echo "$archivo\n"; 
    } 
 
    /* Esta es la forma EQUIVOCADA de iterar sobre el directorio. */ 
    while ($archivo = readdir($gestor)) { 
        echo "$archivo\n"; 
    } 
 
    closedir($gestor); 
} 
?>

DruX · #3 (**permalink**) 27/05/2009, 21:10

según mi servidor funciona

de hecho me funcionan los dos por separado, te pego textual lo que esta ahora en mi servidor funcionando:

Código:

  <select name="template">
<?php

    $mydir=opendir("templates");
    if(isset($mydir))
    {

        while($archivo=readdir($mydir))
        {

            if(!is_dir($archivo))
            {
?>
<option><?php echo $archivo;?></option>
<?php
            }
        }
    }
?>




        </select>

pateketrueke · #4 (**permalink**) 27/05/2009, 21:13

NOTA que lo que devuelve readdir() no es la ruta completa del archivo!!

para que is_file() funcione, debes concatenar la ruta...

Código PHP:

 
<select><?php 
$path = 'la/ruta'; 
$tmp = opendir($path); 
while ($old = readdir($tmp)) 
{ 
  $file = $path . '/' . $old; 
  if (is_file($file)) 
  { 
    // ... 
  } 
} 
closedir($tmp); 
?></select>

por cierto... ¿¿esperas a que ingeniemos que???

DruX · #5 (**permalink**) 27/05/2009, 21:24

no hay problemas con los codigos xD. estos funcionan de lo mejor, (talvés tengan errores, que la verdad me dan igual porque me funcionan como quiero )

quiero mezclarlos

de esta forma (que esta mal):

Código PHP:

 
<HTML><HEAD><SCRIPT> 
// preload images 
var img1 = new Image().src = "../images/jht.gif" 
var img2 = new Image().src = "../images/jsht.gif" 
var img3 = new Image().src = "../images/pht.gif" 
 
function setImage(imageSelect) { 
 theImageIndex = imageSelect.options[imageSelect.selectedIndex].value; 
 if (document.images) 
     document.images[0].src = eval("img" + theImageIndex); 
  } 
</SCRIPT></HEAD><BODY> 
<FORM NAME="theForm" METHOD="POST"> 
<TABLE><TR><TD>Images: <TD> 
<SELECT NAME="items" onChange="setImage(this)"> 
 
 
<?php 
    //abro un directorio 
    $mydir=opendir("ruta/dir"); 
    if(isset($mydir)) 
    { 
        //lo recorro 
        while($archivo=readdir($mydir)) 
        { 
            //si es un archivo voy agregandolo al select (drop down segun vb) 
            if(!is_dir($archivo)) 
            { 
?> 
<option><?php echo $archivo;?></option> 
<?php 
            } 
        } 
    } 
?> 
 
 
 
 
 </SELECT> 
 <TD><IMG SRC = "../images/jht.gif" HEIGHT=100 WIDTH=200> 
 </TABLE></FORM></BODY></HTML>

Asi funciona pero yo tengo que definir las imagenes en una carpeta desde antes, la idea es que solito encuentre las imagenes en una carpeta

Gracias!!

DruX · #6 (**permalink**) 28/05/2009, 18:46

nadie sabe como?

abimaelrc · #7 (**permalink**) 28/05/2009, 19:07

verifica si scandir() te funciona luego buscas como si fuera un array

$dir = scandir();

foreach($dir as $k => $v){
echo $v."<br />";
}

DruX · #8 (**permalink**) 29/05/2009, 16:56

vale gracias, si eso funciona y no hay problema con eso,

el codigo me lista las carpetas que hay en un directorio por medio de opcions, eso todo bien, pero yo ademas quiero que cuando se cambie de opcion automaticamente me cambie una imagen de abajo con js
el codigo de js q puse es para eso, pero yo debo definir las imagenes antes y he ahi el problema

gracias!!

abimaelrc · #9 (**permalink**) 29/05/2009, 19:10

Bueno si todo te funciona y lo unico que quieres es que con js te cambie las imagenes mezcla entonces php con javascript me refiero a esto

Código PHP:

 
<script language="javascript">
<?php
$dir = "images";
$openDir = opendir($dir);
while($row = scandir($openDir)){
  echo "var  = new Image().src = '../'.$dir.'/'.$row";
}
?>
function setImage(imageSelect) { 
 theImageIndex = imageSelect.options[imageSelect.selectedIndex].value; 
 if (document.images) 
     document.images[0].src = eval("img" + theImageIndex); 
  } 
</script>

Me dejas saber.

DruX · #10 (**permalink**) 29/05/2009, 22:04

eso es lo que ando buscando, muchas gracias!!!

creo que solo faltaria agregarle el nombre de la variable :

cambiar esto

Código PHP:

    echo "var  = new Image().src = '../'.$dir.'/'.$row";

por esto:

Código PHP:

  echo "var img'.$numero.'  = new Image().src = '../'.$dir.'/'.$row";

donde $numero seria la posicion correlativa de la imagen, podria ser asi (se me ocurre):

Código PHP:

 
<script language="javascript">
<?php
$dir = "images";
$openDir = opendir($dir);
$numero=1
while($row = scandir($openDir)){
  echo "var img'.$numero.' = new Image().src = '../'.$dir.'/'.$row";
  $numero = $numero + 1
}
?>
function setImage(imageSelect) { 
 theImageIndex = imageSelect.options[imageSelect.selectedIndex].value; 
 if (document.images) 
     document.images[0].src = eval("img" + theImageIndex); 
  } 
</script>

no se si funcione, mañana lo probare y te aviso,

desde ya muchisimas gracias :DDD

no saber js me complica la vida jajajaj

abimaelrc · #11 (**permalink**) 29/05/2009, 22:13

ups, se me olvido escribir el nombre de las variables pero tu tienes la idea. Me dejas saber como te fue

abimaelrc · #12 (**permalink**) 29/05/2009, 22:13

Y cuando puedas, cuando ya tengas el codigo funcionando corrige los pequeños errores que por el momento te funciona pero no sabes lo que posiblemente te pase en el futuro. Solo te lo indico como sugerencia.