Galeria de imagenes en php

23 enero, 2008 por Mr. FotoPex Dejar una respuesta »

 

 

Vamos a ver un ejemplo de como mostrar las imágenes de un directorio.

Como siempre algo sencillo para que entiendas el concepto.

Primero el código html, la etiqueta <head> con la codificación que utilizaremos y el titulo de la página.

Texto Plano
HTML:
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4. <title>Galeria de fotos</title>

Dentro de la misma etiqueta vamos a meter el formato que utilizaremos para la página y las etiquetas <div>

Texto Plano
CSS:
  1. <style type="text/css">
  2. <!--
  3. .DivImagenes {
  4.     float: left;
  5.     display: inline;
  6.     margin: 2px;
  7. }
  8. body,td,th {
  9.     font-family: Verdana, Arial, Helvetica, sans-serif;
  10.     font-size: 11px;
  11.     color: #333333;
  12. }
  13.  
  14. #img {
  15.     height: 130px;
  16.     width: 110px;
  17.     background-color: #FFFFFF;
  18.     border-top-width: 1px;
  19.     border-right-width: 2px;
  20.     border-bottom-width: 2px;
  21.     border-left-width: 1px;
  22.     border-top-style: solid;
  23.     border-right-style: solid;
  24.     border-bottom-style: solid;
  25.     border-left-style: solid;
  26.     border-top-color: #CCCCCC;
  27.     border-right-color: #999999;
  28.     border-bottom-color: #999999;
  29.     border-left-color: #CCCCCC;
  30. }
  31. body {
  32.     margin-left: 0px;
  33.     margin-top: 0px;
  34.     margin-right: 0px;
  35.     margin-bottom: 0px;
  36. }
  37. -->
  38. </style>

Cerramos la etiqueta <head> y abrimos la etiqueta <body>

Texto Plano
HTML:
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Ahora si el código php

Texto Plano
PHP:
  1. <?php
  2.  
  3. /*
  4.     Encuentra m&aacute;s ejemplos en
  5.     http://www.empresario.com.mx
  6. */ 
  7.  
  8. //dividimos la direccion del servidor
  9. $URL=explode('/', $_SERVER['PHP_SELF']);
  10.  
  11. //obtenemos y eliminamos el &uacute;ltimo elemento de la matriz (index.php)
  12. array_pop($URL);
  13.  
  14. //obtenemos y eliminamos el elemento del comienzo de la matriz
  16.  
  17. //unimos la direccion url mediante una cadena
  18. $mainURL="http://".$_SERVER['HTTP_HOST']."/".implode($URL, '/').'/';
  19. echo '<div style="width:170px;">'; // abrimos una etiqueta div
  20. if ($principal = opendir(".")) {
  21.     while($dir=readdir($principal)){
  22.         if(is_dir($dir) && $dir!="." && $dir!=".."){
  23.             //mostramos el nombre del directorio
  24.             echo '<a href="'.$mainURL.'?dir='.rawurlencode($dir).'">'.$dir.'</a> | ';
  25.         }
  26.     }
  27. }
  28. echo '</div>'; //cerramos la etiqueta div
  29.  
  30.  
  31. if($_GET['dir']){
  32.  
  33.     $titulo=$_GET['dir'];
  34.     $imagini.= "<h2 align='center'>{$_GET['dir']}</h2>";
  35.    
  36.    
  37.     //Directorio donde se encuentra index.php reemplazamos las \ por /
  38.     // y mostramos el contenido del directorio seleccionado
  39.     $DirImg=str_replace('\\', '/', getcwd()).'/'.$_GET['dir'].'/';
  40.     if(file_exists($DirImg)){
  41.         if ($directorio  = opendir($DirImg)) {
  42.         echo '<div style="width:610px;">';
  43.         echo '<h1>'.$titulo.'</h1><br />';
  44.             while($archivo=readdir($directorio )){       
  45.                 if(preg_match("/.jpg/i",$archivo) ){   
  46.                     echo '<table class="DivImagenes"><tr>
  47.                             <td  valign="bottom" id="img">
  48.                             <a href="'.$_GET['dir'].'/'.$archivo.'" target="_blank"><br /><img src="'.$_GET['dir'].'/'.$archivo.'" width="100">
  49.                             '.rawurldecode($archivo).'</a><br />
  50.                             <a href="http://www.fotos.fotopex.com">M&aacute;s Fotos</a>
  51.                            
  52.                             </td>
  53.                             </tr></table>';
  54.                 }
  55.             }
  56.         echo '</div>';
  57.         }
  58.     }else{
  59.         $imagini.='<h1>Opps</h1>';
  60.     }
  61. }
  62. ?>
  63. </body>
  64. </html>

floppy.jpg
Clic para descargar el archivo

Publicado enphp

Puede seguir cualquier respuesta a esta entrada a través de la RSS 2.0 Feed. Puede dejar una respuesta , o trackback de su propio sitio.

Publicidad

Deja un comentario