How to Create Dynamic Image Gallery with jQuery, PHP & MySQL


An image gallery is a very common feature for the web application. Image gallery or photo gallery is an efficient way to showing the set of pictures. Image gallery allows the user to access all images from throughout website in one place. If you have a requirement to implement a photo gallery on the website, our source code will help you to do it easily within less time.

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 popup plugin helps to show the large size images from the gallery on a popup when the user clicks on the image.

Before you get started, take a look at the folders and files structure for creating a dynamic image gallery with PHP:

dynamic-image-gallery-jquery-php-mysql-files-structure-codexworld

Creating Database Table

To store image information a table need 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` enum('1','0') COLLATE utf8_unicode_ci NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Creating Directory to Store Images

Create a directory named images to store images and a subdirectory named thumb to store image thumbnails.

dynamic-photo-gallery-images-thumbnails-directory-codexworld

Database Configuration (dbConfig.php)

The dbConfig.php file contains some PHP code to connect and select the MySQL database. You need to specify your database credentials, like hostname ($dbHost), username ($dbUsername), password ($dbPassword), and database name ($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);
}

Dynamic Image Gallery (index.php)

In the index.php file, we’ll fetch the images from the database and display them in the gallery. Also, image gallery popup will be implemented with the dynamic photo gallery using fancyBox jQuery plugin.

JavaScript Code:
The jQuery fancyBox plugin is used for displaying image gallery on the popup, so, include the CSS and JS library of the fancyBox 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>

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

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

PHP & HTML Code:
Using PHP, the images information is fetched from the database and the files are showing from the images folder. To add fancyBox image gallery you need to specify the following attributes in anchor tag of the images.

  • Specify the large image file path in href attribute.
  • Add data-fancybox="group" attribute.
  • Specify image caption in data-caption attribute.
<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>

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

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

Now you’ll see a fully functional dynamic image gallery with the popup in the web page.

dynamic-image-gallery-fancybox-popup-codexworld

Recommended Tutorials For You

Leave a reply

CONNECT WITH CODEXWORLD