Hacer una galería Nivo-Slider dinámica por PHP

Publicado en Tutoriales | Etiquetado , | por

Nivo-Slider es una una famosa librería desarrollada en JavaScript que permite crear una galería de imágenes muy útil para nuestros proyectos. Este tutorial explica cómo insertar dinámicamente las imágenes por PHP.

Para esto utilizaremos la técnica de obtener imágenes dinámicamente de una carpeta por PHP del tutorial pasado.

Pueden ver el ejemplo en vivo acá y descargar los archivos del tutorial acá.

  1. Descargamos los archivos del tutorial pasado, copiamos el archivo galeria.php y lo nombramos galeriaNivo.php.
    El archivo debe verse así:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Galeria Dinámica Nivo Slider Por PHP - Bakia</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>
  2. Descargamos los archivos .js y .css necesarios para que funcione la galería Nivo-Slider. Al finalizar la descarga, descomprimimos el .zip en la misma carpeta donde este el archivo galeriaNivo.php.
  3. Antes del cierre de la etiqueta </head> insertamos los .js y .css, necesarios para el funcionamiento de la galeria.
    1
    2
    3
    4
    5
    6
    7
    ...
        <title>Galeria Dinámica Nivo Slider Por PHP - Bakia</title>
        <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
        <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
    </head>
    ...
  4. Creamos un <div id="slider" class="nivoSlider> que contenga el código PHP, es decir donde estarán las imágenes de la galería. El atributo id="slider" será utilizado para inicializar por medio de JavaScript la galería.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div id="slider" class="nivoSlider">
        <?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();
        ?>
    </div>
  5. Inicializamos la galería por medio de JavaScript en la etiqueta <head>.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <title>Galeria Dinámica Nivo Slider Por PHP - Bakia</title>
        <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
        <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
                $(window).load(function() {
                        $('#slider').nivoSlider();
                });
        </script>
    </head>
  6. Por último inicializamos la galería por medio de JavaScript en la etiqueta <head>.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <title>Galeria Dinámica Nivo Slider Por PHP - Bakia</title>
        <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
        <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
                $(window).load(function() {
                        $('#slider').nivoSlider();
                });
        </script>
    </head>
  7. Creamos un <div id="galeria"> que contenga el <div id="slider" class="nivoSlider">.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div id="galeria">
        <div id="slider" class="nivoSlider">
        <?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();
        ?>
        </div>
    </div>
  8. Por último le ponemos el estilo al <div id="galeria">, donde el width y height de este div debe ser el tamaño de las imágenes de la galería (todas las imágenes deben ser del mismo tamaño).
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
    <style>
        #galeria {
            margin:0 auto 0 auto;
            width:550px;
            height:425px;
            /*Sombra*/
            -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
            -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
            box-shadow: 0px 1px 5px 0px #4a4a4a;
        }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
  9. El resultado final del archivo galeriaNivo.php debe ser así:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <!DOCTYPE>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Galeria Dinámica Nivo Slider Por PHP - Bakia</title>
            <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
            <style>
                #galeria {
                    margin:0 auto 0 auto;
                    width:550px;
                    height:425px;
                    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
                    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
                    box-shadow: 0px 1px 5px 0px #4a4a4a;
                }
       
            </style>
        <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
           
        </head>
        <body>
            <div id="galeria">
                <div id="slider" class="nivoSlider">
                    <?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();
                    ?>
                </div>
            </div>
        </body>
    </html>

    Probamos el archivo en nuestro servidor local y el resultado debe ser así:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <!DOCTYPE>
    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Galeria Dinámica Nivo Slider Por PHP - Bakia</title>
        <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
        <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
        <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
        </head>
        <body>
            <div id="slider" class="nivoSlider">
                <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">
            </div>
        </body>
    </html>
  10. El resultado final es el siguiente:

55 comentarios en “Hacer una galería Nivo-Slider dinámica por PHP”

  1. Hola! Necesito ayuda!!!

    Tengo un Administrador Web en el cual estoy añadiendo unas categorías y unas guías. La página utiliza html, php y mysql. En el sistema puedo guardar por ej: CATEGORÍAS –> Título, Descripción y una imagen la cual se guarda una miniatura en una carpeta llamada thumbs en img.

    Mi pregunta es como puedo mostrar esas imágenes??? Tengo un buscador y busca por titulo por ej pero las imágenes no se como mostrarlas porque se guardan en “alias” en la BD, por ej: casa-1, la la carpeta thumbs esa imagen se guarda como 1.jpg

    Porfisss HELP ME!!!

    Gracias! Mi correo es: sandra.mr84@hotmail.com

    Responder ↓

  3. solo cambien esto:
    if (eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“png”, $archivo)){
    por esto:
    if (preg_match(“/gif/”, $archivo) || preg_match(“/jpg/”, $archivo) || preg_match(“/png/”, $archivo)){

    Responder ↓

  4. Gracias por la ayuda del slider, me facilito mucho.
    Quisiera saber como las adapto las imagenes al contenedor, ya he modificado el css y js y no encuentro la solucion.
    Seria de gran ayuda con ese aporte.
    De antemano gracias.

    Responder ↓

  5. buenas excelente aporte muchas gracias a funcionado perfecto, disculpen una pregunta … si quiero ponerle un link a cada una de las imagenes como podria hacer?

    Responder ↓

  7. Hola,
    ya se que hace mucho tiempo de esto pero lo acabo de ver y me gustaria saber si puedo adaptarlo a telefonos… simplemente que las fotos las muestre en %.
    con esto creo que tendre sufuciente…
    y tambien preguntar si tiene algun limite de fotos.
    gracias

    Responder ↓

  11. me sale este error :

    ( ! ) Warning: dir(img,img) [function.dir]: El sistema no puede encontrar el archivo especificado. (code: 2) in C:\wamp\www\ComprasPHP\Presentacion\GaleriaNivo.php on line 48
    Call Stack
    # Time Memory Function Location
    1 0.0023 373528 {main}( ) ..\GaleriaNivo.php:0
    2 0.0023 373664 dir ( ) ..\GaleriaNivo.php:48

    ( ! ) Warning: dir(img) [function.dir]: failed to open dir: No such file or directory in C:\wamp\www\ComprasPHP\Presentacion\GaleriaNivo.php on line 48
    Call Stack
    # Time Memory Function Location
    1 0.0023 373528 {main}( ) ..\GaleriaNivo.php:0
    2 0.0023 373664 dir ( ) ..\GaleriaNivo.php:48

    ( ! ) Fatal error: Call to a member function read() on a non-object in C:\wamp\www\ComprasPHP\Presentacion\GaleriaNivo.php on line 49
    Call Stack
    # Time Memory Function Location
    1 0.0023 373528 {main}( ) ..\GaleriaNivo.php:0

    Responder ↓

  13. Muy bueno Amigo, lo felicito por el tutorial me ayudó mucho a resolver algunos problemas que tenia con este tema, no se si me podría orientar para mostrar un texto o mensaje sobre cada imagen que se muestra en el slider.

    Responder ↓

  14. Hola Mauricio, se que ya ha pasado un tiempo desde que publicaste este post pero fijate que estoy subiendo este ejemplo de SLIDER a un sitio pero me marca el siguiente error: “Fatal error: Call to a member function read() on a non-object in…” y anexo me gustaria saber como puedo colocarle LINKS a las imagenes o donde hay que hacerlo, te agradecere mucho tu apoyo, saludos y muchas gracias!!!

    Responder ↓

    • Hola dargonswin, a mi támbien me decía lo mismo la solución es :

      línea actual del código: if (eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“png”, $archivo)){
      Sustituirla por: if (preg_match(‘/’.”gif”.’/i’, $archivo) || preg_match(‘/’.”jpg”.’/i’, $archivo) || preg_match(‘/’.”png”.’/i’, $archivo)){

      Con esto te muestra sin problemas la galería.

      Un saludo y espero que te sirva.

      Responder ↓

      • Hola Charliman 70, Utilicé tu código para corregir el problema del eregi, sin embargo no está funcionando, me saca esto como mil veces: Warning: Division by zero in /Applications/XAMPP/xamppfiles/htdocs/Eukaria/detalles.php on line 106

        Warning: preg_match() []: Unknown modifier ‘?’ in /Applications/XAMPP/xamppfiles/htdocs/Eukaria/detalles.php on line 106

        Me gustaría saber que está pasando porque la verdad no entiendo :S

        Responder ↓

    • Hola buenos dias, tengo un problema, resulta q el code corre bien cuando lo pruebo en una pagina sola, es decir carga pa pagina solo con el codigo de las imagenes haciendo la consulta a la bd, pero cuando lo llamo de la pagina principal por medio de ajax, pues aparece solo el marco pero ninguna foto, hice el debug y alli amarece la ruta de las imagenes pero no muestra nada…

      Gracias por su ayuda

      Responder ↓

  18. Hola amigos, tengo un grave problema. Tengo un desarrollo (casi que a punto de terminar) que incluye Nivoslider para elegir un artículo. Me explico: todas mis imágenes están linkeadas y así cuando veas desde el articulo 1 hasta el n, solo le das clic sobre la imagen y vas a otra pantalla. Hasta aquí, todo bien. Mientras lo desarrollaba lo probé en Firefox y safari sin problemas pero ahora que estoy por culminar lo probé en ie 9 y los link no funcionan, es decir NO reconoce que hay un enlace al pasar el mouse sobre las imágenes… Alguien tiene alguna sugerencia?????? Gracias!

    Responder ↓

    • disculpa me gustaría saber como es que pudiste meter enlaces a la pagina. lo he intentando y yo trabajo con chrome pero no me funciona de hecho me ha costado hacer que se le ponga el cursor cuando pasas sobre la img con el mouse hover() u img:hover{}
      me ayudaría mucho gracias.

      Responder ↓

  19. Hola lo estoy probando y va muy bien, solo tengo un problema, no va en el orden que esteraba.

    Todas las imagenes se llaman 1.jpg, 2.jpg,,,,,,,10.jpg pero el orden es aleatorio.
    He incluido:

    $(window).load(function() {
    $(‘#slider’).nivoSlider({
    effect: ‘fade’, // Specify sets like: ‘fold,fade,sliceDown’
    slices: 15, // For slice animations
    boxCols: 8, // For box animations
    boxRows: 4, // For box animations
    animSpeed: 500, // Slide transition speed
    pauseTime: 3000, // How long each slide will show
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true, // Next & Prev navigation
    directionNavHide: true, // Only show on hover
    controlNav: false, // 1,2,3… navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav__ false
    controlNavThumbsFromRel: false, // Use image rel for thumbs
    controlNavThumbsSearch: ‘.jpg’, // Replace this with…
    controlNavThumbsReplace: ‘_thumb.jpg’, // …this in thumb Image src
    keyboardNav: true, // Use left & right arrows
    pauseOnHover: true, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    captionOpacity: 0.8, // Universal caption opacity
    prevText: ‘Prev’, // Prev directionNav text
    nextText: ‘Next’, // Next directionNav text
    randomStart: false, // Start on a random slide
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
    });
    });

    Para ver si es que estaba en modo random, pero no.

    Que se debe hacer para ver la secuencia en orden?

    Muchas gracias!!!!

    Responder ↓

      • La solucion es un apaño, ya que a mi gustaria que el codigo no necesite ser editado cada vez que se ingrese una nueva imagen, lo que hice fue quitar del ejemplo:

        read()) !== false)
        {
        if (eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“png”, $archivo)){
        echo ”.”\n”;
        }
        }
        $dirint->close();
        ?>

        y agregar las imagenes a mano:

        De esta manera funciona perfectamente la secuencia, se puede editar el punto de inicio desde:
        startSlide: 0, // Set starting Slide (0 index)

        Responder ↓

      • La solucion es un apaño, ya que a mi gustaria que el codigo no necesite ser editado cada vez que se ingrese una nueva imagen, lo que hice fue quitar del ejemplo:

        read()) !== false)
        {
        if (eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“png”, $archivo)){
        echo ”.”\n”;
        }
        }
        $dirint->close();
        ?>

        y agregar las imagenes a mano:

        De esta manera funciona perfectamente la secuencia, se puede editar el punto de inicio desde:
        startSlide: 0, // Set starting Slide (0 index)

        y va todo muy bien, solo que si agregas imagenes al directorio, si o si para que se vean hay que agregarlas en el php.
        Lo propuesto en el ejemplo:
        read()) !== false)
        {
        if (eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“png”, $archivo)){
        echo ”.”\n”;
        }
        }
        $dirint->close();
        ?>
        va muy bien, hace lo que espero, pero no sigue la secuencia, si alguien puede dar un ayuda seria muy bueno!!!

        Gracias.

        Responder ↓

    • claro mira cambias la funcion

      1
      2
      3
      4
      5
      <script type="text/javascript">
              $(window).load(function() {
                  $('#slider').nivoSlider();
              });
              </script>

      por

      1
      2
      3
      4
      5
      6
      7
      8
      <script type="text/javascript">
              $(window).load(function() {
                  $('#slider').nivoSlider({
                      pauseTime: 10000, // How long each slide will show

                  });
              });
              </script>

      para una mayor referencia de las opciones de este plugin puedes visitar
      http://nivo.dev7studios.com/support/jquery-plugin-usage/
      dale un like, +1 o tweet al tutorial!!!!
      Un saludo!

      Responder ↓

  21. Hola Mauricio, excelente post. No domino mucho el tema pero he conseguido que me salga como lo tienes en el ejemplo. Me gustaría cambiar el tamaño de las imágenes, lo que ocurre es que el cuadro no se adapta y no encuentro en el css las imágenes, supongo que hay que tocar los .js si no me equivoco. ¿Sabes como hacerlo? Mil gracias, saludos.

    Responder ↓

    • Vale, debe ser que llevo todo el día leyendo código…como no darme cuenta de que estaba en el mismo galeriaNivo.php jajajaja. Vaya tela. Pues nada solucionado. Excelentísimo post, va a favoritos. Un placer leer tus aportes.
      Saludos

      Responder ↓

  22. Lo primero buen tutorial, felicidades.

    Tengo una incidencia como la de juan, me sucede tanto con vuestras imagenes como con cualquier otra, actualmente si le aplico la hoja de estilos “default.css”, las imágenes no se muestran, en cambio si la “omito en el código” si que me aparecen cargadas pero no con el formato de la galería que es lo “bonito”. Esto me sucede tanto con safari, como firefox, chrome o ie, curiosamente el enlace de pruebas que puso juan si que me funciona sin problemas, asi que descarto un fallo de mis navegadores.
    He corregido el eregi por preg_match.
    A juan le hablais del archivo js.js pero no se si es un archivo especifico de su web que influye en la galeria o si es parte del tutorial.

    Responder ↓

  25. Hola Mauricio, sabes estoy probando la galeria y de inicio me funciona ok, pero cuando le doy click para llamar otra vez la misma página simplemente la galeria no carga y tengo que ponerle f5 para que cargue otra vez la galería. Ayúdame

    Responder ↓

  27. sabes que no me muestra las img y me dice que hay un error en esta linea if (eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“png”, $archivo)){
    Gracias, saludo.

    Responder ↓

  28. olas como saludos a todos que vean este espectacular tutorialss
    de verdad que esta padrisimooo.
    si tendria q puntearr le doy el maximo..
    weno espero ver mas tutoriales asii de este tipoo…saludoss bye…!!

    Responder ↓

  30. lo ejecuto en el navegador y me muestra los siguiente

    read()) !== false) { if (eregi(“gif”, $archivo) || eregi(“jpg”, $archivo) || eregi(“png”, $archivo)){ echo ”.”\n”; } } $dirint->close(); ?>

    que puede estar mal, al probarlo con phpdesign2008 funciona

    Responder ↓

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

* *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>