Como hacer una galeria de fotos en dreamweaver

Como hacer una galeria de fotos en dreamweaver

Publicado en Tutoriales | Etiquetado PHP | julio 24, 2011 por Mauricio González Salcedo

Este tutorial explica cómo obtener dinámicamente imágenes de una carpeta por PHP. Una ventaja de usar está técnica es que con solo cambiar las imágenes de la carpeta por ftp, se actualiza automáticamente nuestra galería de imágenes. Sólo toma 11 lineas de código PHP para obtener una cantidad ilimitada de imágenes. Pueden ver el ejemplo en vivo acá y descargar los archivos del tutorial acá.

  1. Poner todas las imágenes en una carpeta, en este caso las pondremos en la carpeta img.
  2. Creamos un archivo .php en blanco llamado galeria.php, y lo guardamos en el mismo directorio de la carpeta img.

    1
    2
    3
    4
    5
    6
    7
    8
    9

    <!DOCTYPE>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Imágenes dinámicas de una carpeta en php</title>
    </head>
    <body>
    </body>
    </html>

  3. Dentro de la etiqueta body insertamos el código php.

    1
    2
    3
    4
    5

    <body>
    <?php
    ?>
    </body>

  4. Definimos una variable con la dirección de la carpeta de imágenes.

    1
    2
    3

    <?php
        $directory="img";
    ?>

  5. Definimos una variable $dirint y la igualamos a la función dir() de PHP, la cual leerá la carpeta de imágenes y nos retornará un Array de la clase Directory de PHP.

    1
    2
    3
    4

    <?php
        $directory="img";
        $dirint = dir($directory);
    ?>

  6. Creamos un ciclo while que procese el Array $dirint, la variable $archivo tendrá la información de cada archivo de la carpeta. Después imprimimos en el html cada variable, por el método echo para comprobar que la lectura es correcta, al final cerramos el directorio $dirint->close().

    1
    2
    3
    4
    5
    6
    7
    8
    9

    <?php
        $directory="img";
        $dirint = dir($directory);
        while (($archivo = $dirint->read()) !== false)
        {
            echo $archivo;
        }
        $dirint->close();
    ?>

    El resultado del ejemplo sería algo similar a:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    <body>
    .
    ..
    imagenes (01).jpg
    imagenes (02).jpg
    imagenes (03).jpg
    imagenes (04).jpg
    imagenes (05).jpg
    imagenes (06).jpg
    imagenes (07).jpg
    imagenes (08).jpg
    imagenes (09).jpg
    imagenes (10).jpg
    imagenes (11).jpg
    imagenes (12).jpg
    imagenes (13).jpg
    imagenes (14).jpg
    </body>

  7. Creamos un condicional if para que solo sean procesados los archivos png, gif y jpg. Imprimimos también la variable $directory para obtener la url completa de cada imagen.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    <?php
        $directory="img";
        $dirint = dir($directory);
        while (($archivo = $dirint->read()) !== false)
        {
            if (eregi("gif", $archivo) || eregi("jpg", $archivo) || eregi("png", $archivo)){
                echo $directory."/".$archivo;
            }
        }
        $dirint->close();
    ?>

    El resultado del ejemplo sería algo similar a:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    <body>
    img/imagenes (01).jpg
    img/imagenes (02).jpg
    img/imagenes (03).jpg
    img/imagenes (04).jpg
    img/imagenes (05).jpg
    img/imagenes (06).jpg
    img/imagenes (07).jpg
    img/imagenes (08).jpg
    img/imagenes (09).jpg
    img/imagenes (10).jpg
    img/imagenes (11).jpg
    img/imagenes (12).jpg
    img/imagenes (13).jpg
    img/imagenes (14).jpg
    </body>

  8. Por último imprimimos las imágenes en el formato html.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    <?php
        $directory="img";
        $dirint = dir($directory);
        while (($archivo = $dirint->read()) !== false)
        {
            if (eregi("gif", $archivo) || eregi("jpg", $archivo) || eregi("png", $archivo)){
                echo '<img src="'.$directory."/".$archivo.'">'."\n";
            }
        }
        $dirint->close();
    ?>

    El resultado del ejemplo sería algo similar a:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    <body>
    <img src="img/imagenes (01).jpg">
    <img src="img/imagenes (02).jpg">
    <img src="img/imagenes (03).jpg">
    <img src="img/imagenes (04).jpg">
    <img src="img/imagenes (05).jpg">
    <img src="img/imagenes (06).jpg">
    <img src="img/imagenes (07).jpg">
    <img src="img/imagenes (08).jpg">
    <img src="img/imagenes (09).jpg">
    <img src="img/imagenes (10).jpg">
    <img src="img/imagenes (11).jpg">
    <img src="img/imagenes (12).jpg">
    <img src="img/imagenes (13).jpg">
    <img src="img/imagenes (14).jpg">
    </body>

  9. El resultado final del archivo galeria.php debe ser:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    <!DOCTYPE>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Imágenes dinámicas de una carpeta en php</title>
    </head>
    <body>
    <?php
        $directory="img";
        $dirint = dir($directory);
        while (($archivo = $dirint->read()) !== false)
        {
            if (eregi("gif", $archivo) || eregi("jpg", $archivo) || eregi("png", $archivo)){
                echo '<img src="'.$directory."/".$archivo.'">'."\n";
            }
        }
        $dirint->close();
    ?>
    </body>
    </html>

Hemos utilizado está técnica en distintos de los portales web que hemos desarrollado.
Un ejemplo con la galería nivo slider lo pueden ver acá, y con la galería shadowbox lo pueden ver acá.

Navegador de artículos

← Anterior Siguiente →
Como hacer una galeria de fotos en dreamweaver 32
WOWS lider : Rotador de Im genes jQuery Galer a
Como hacer una galeria de fotos en dreamweaver 11
Videotutoriales y Cursos Gratuitos de inform tica Online
Como hacer una galeria de fotos en dreamweaver 5
C mo agregar m s avatares para Cuentas de Usuario
Como hacer una galeria de fotos en dreamweaver 30
Como quitar o remover programas de Abrir con. en
Como hacer una galeria de fotos en dreamweaver 50
Trucos y consejos por Ana Mesas - Adobe
Como hacer una galeria de fotos en dreamweaver 32
Visualizador de Fotos como Predeterminado en
Como hacer una galeria de fotos en dreamweaver 82
Como hacer una galeria de fotos en dreamweaver 53
Como hacer una galeria de fotos en dreamweaver 18
Como hacer una galeria de fotos en dreamweaver 57
Como hacer una galeria de fotos en dreamweaver 1
Como hacer una galeria de fotos en dreamweaver 100
Como hacer una galeria de fotos en dreamweaver 30
Como hacer una galeria de fotos en dreamweaver 63
Como hacer una galeria de fotos en dreamweaver 85
Como hacer una galeria de fotos en dreamweaver 24