Cómo crear una galería de imágenes dinámica con jQuery, PHP y MySQL

Una galería de imágenes es una característica muy común en las aplicaciones web. Una galería de imágenes o una galería de fotos es un buen método a la hora de mostrar un conjunto de imágenes. Permite al usuario acceder a todas las imágenes de la web sin tener que recurrir a múltiples páginas. Si quieres implementar una galería de imágenes en tu sitio web, este código puede ayudarte a hacerlo de forma sencilla y en poco tiempo.

En este tutorial, te mostraremos cómo crear una galería de imágenes dinámica en PHP y MySQL. También integraremos un popup para las imágenes utilizando el plugin fancyBox de jQuery. Este plugin te ayuda a mostrar las imágenes en su tamaño original cuando el usuario haga clic en la imagen.

Antes de empezar, vamos a ver la estructura de ficheros y carpetas para crear una galería de imágenes dinámica.

fancybox
> jquery.fancybox.css
> jquery.fancybox.js
images
> thumb
dbConfig.php
index.php

Creando la tabla para la base de datos

Para almacenar la información de las imágenes, necesitamos crear una tabla en la base de datos. El siguiente SQL crea una tabla llamada images, con los campos que necesitamos:

CREATE TABLE `images` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `uploaded_on` datetime NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Creando el directorio donde almacenaremos las imágenes

Crea un directorio llamado images para almacenar las imágenes y un subdirectorio llamado thumb en donde almacenaremos las miniaturas.

images
> thumbs

Configuración de la base de datos (dbConfig.php)

El fichero dbConfig.php contiene el código PHP necesario para conectar y seleccionar la base de datos MySQL. Debes especificar las credenciales para conectar con la base de datos, como el hostname ($dbHost), el nombre de usuario ($dbUsername), la contraseña ($dbPassword) y el nombre de la base de datos ($dbName).

<?php
//DB details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'codexworld';

//Create connection and select DB
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Unable to connect database: " . $db->connect_error);
}

Galería de imágenes dinámica (index.php)

En el fichero index.php, extraeremos las imágenes de la base de datos y las mostraremos en la galería. También, implementaremos la función de popup de fancyBox para nuestra galería de imágenes dinámica.

Código Javascript

El plugin de jQuery fancyBox lo utilizaremos para agrandar la imagen que el usuario decida, cuando haga clic. Para ello necesitaremos incluir la librería JS y CSS del plugin:

<!-- fancybox CSS library -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<!-- JS library -->
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- fancybox JS library -->
<script src="fancybox/jquery.fancybox.js"></script>

Para gestionar los eventos de fancyBox en nuestra galería de imágenes, debemos especificar el selector y llamar al método fancybox():

<script type="text/javascript">
    $("[data-fancybox]").fancybox({ });
</script>

Código PHP y HTML

Mediante PHP, extraemos la información de las imágenes de la base de datos y mostramos las imágenes del directorio que hemos creado específicamente para ello. Para añadir fancybox a la galería de imágenes debes definir los siguientes parámetros en el anchor tag de las imágenes.

  • Definir la ruta de la imagen original en el atributo href
  • Añadir el atributo data-fancybox=”group”
  • Especificar la leyenda de la imagen en el atributo data-caption
<div class="container">
    <div class="gallery">
        <?php
        //Include database configuration file
        include('dbConfig.php');
        
        //get images from database
        $query = $db->query("SELECT * FROM images ORDER BY uploaded_on DESC");
        
        if($query->num_rows > 0){
            while($row = $query->fetch_assoc()){
                $imageThumbURL = 'images/thumb/'.$row["file_name"];
                $imageURL = 'images/'.$row["file_name"];
        ?>
            <a href="<?php echo $imageURL; ?>" data-fancybox="group" data-caption="<?php echo $row["title"]; ?>" >
                <img src="<?php echo $imageThumbURL; ?>" alt="" />
            </a>
        <?php }
        } ?>
    </div>
</div>

Código CSS

<style type="text/css">
.gallery img {
    width: 20%;
    height: auto;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
}
</style>

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP