Create Dynamic Image Gallery with Database using jQuery, PHP & MySQL

An image gallery is a very common feature for the web application. The image gallery or photo gallery is an efficient way to show the set of pictures on the web page. Image Gallery allows the user to access all images from throughout the website in one place. If you want to add a photo gallery on the website, our example script will help you to do it easily within less time.

Generally, in the web application, the images are uploaded through the site’s backend and the thumbnails of the images are displayed in the image gallery. The lightbox functionality is very useful to make the dynamic image gallery more attractive and user-friendly. The lightbox plugin opens the image in large size on a popup when the user clicks on the thumbnail image. The fancyBox is a lightweight JavaScript plugin that helps to add lightbox functionality to the image gallery.

With PHP you can easily upload file to server and display images from the database in the gallery. In this tutorial, we’ll show how you can create a dynamic image gallery in PHP with MySQL database. Also, we’ll integrate image gallery popup using jQuery fancyBox plugin in this photo gallery. The fancyBox lightbox popup plugin displays the large size images from the gallery on a popup when the user clicks on the image.

Before getting started to create a dynamic image gallery with PHP, take a look at the file structure.

dynamic_image_gallery_with_php/
├── dbConfig.php
├── index.php
├── fancybox/
│   ├── jquery.fancybox.js
│   └── jquery.fancybox.css
├── images/
│   └── thumb/
├── js/
│   └── jquery.min.js
└── css/
    └── style.css

Create Database Table

To store image file information a table needs to be created in the database. The following SQL creates an images table with some basic fields in the MySQL database.

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` tinyint(1) NOT NULL DEFAULT 1 COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Create Directory to Store Images

You need to create a directory on the server where the image files will be stored.

• Create a directory named images to store image files.
• Create a subdirectory named thumb to store image thumbnails on the server.

Database Configuration (dbConfig.php)

The dbConfig.php file is used to connect and select the database. Specify the database host ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your MySQL database credentials.

<?php 
// Database configuration 
$dbHost     = "localhost"; 
$dbUsername = "root"; 
$dbPassword = "root"; 
$dbName     = "codexworld"; 
 
// Create database connection 
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 
 
// Check connection 
if ($db->connect_error) { 
    die("Connection failed: " . $db->connect_error); 
}

Dynamic Image Gallery (index.php)

In this file, all the images are fetched from the database and listed in a gallery view. Also, the image gallery popup is implemented in the dynamic photo gallery using the fancyBox jQuery lightbox plugin.

fancyBox Plugin:
The jQuery fancyBox plugin is used for displaying the image gallery on the popup, so, include the CSS and JS library of the fancyBox plugin.

<!-- Fancybox CSS library -->
<link rel="stylesheet" href="fancybox/jquery.fancybox.css">

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

<!-- Fancybox JS library -->
<script src="fancybox/jquery.fancybox.js"></script>

To bind fancyBox events on the image gallery, specify a selector and call the fancybox() method.

<script>
$("[data-fancybox]").fancybox();
</script>

PHP & HTML Code:
The image’s data is fetched from the MySQL database and the files are retrieved from the server (images/ directory) using PHP. To add the fancyBox image gallery you need to specify the following attributes in the anchor tag of the images.

• Specify the large image file path in the href attribute.
• Add data-fancybox="gallery" attribute.
• Specify the image caption in data-caption attribute.

<div class="gallery">
    <?php
    // Include database configuration file
    require 'dbConfig.php';
    
    // Retrieve images from the database
    $query = $db->query("SELECT * FROM images WHERE status = 1 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="gallery" data-caption="<?php echo $row["title"]; ?>" >
            <img src="<?php echo $imageThumbURL; ?>" alt="" />
        </a>
    <?php }
    } ?>
</div>

CSS Code:
The following CSS is used to define a basic design of the image gallery.

.gallery img {
    width: 20%;
    height: auto;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
}

Testing

Now, if you open the index.php file on the browser, you’ll see a fully functional dynamic image gallery with fancyBox popup in the web page.

Image Gallery CRUD with PHP and MySQL

Conclusion

Here we have shown how to create a dynamic image gallery using PHP with lightbox plugin within less time. Use the example code snippet to create a dynamic image gallery in PHP with the database. You can easily modify the example script to extend the image gallery functionality as per your needs.