Creating dynamic Photo Gallery with jQuery, PHP & MySQL

photo-gallery in php mysql jquery
Photo Galley is a most used section in any website . We can use photo gallery to display portfolio images , event’s photos, client’s logo etc .
Today we will creating a dynamic photo gallery using Jquery in PHP, Mysql.

We also integrate fancybox image pop up for displaying larger image when user clicks on thumb image .

Creating Database Table

First of all we need a Database table for string images ,Below sql will create a table ‘images’

CREATE TABLE `images` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `image` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `created_at` 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

Now we have to create folder to store uploaded images .We will create folder ‘uploads’ and ‘thumb’ inside this folder. It looks like

uploads/thumb

Database Configuration (config.php)

We need a database config file for Server authentication and database select . Mention below your host name (usually localhost)database name , username ,password



php mysql video tutorial in Hindi language by UnitedWebSoft

Dynamic Image Gallery (index.php)

In this file ,we will fetch images fro database table and show here . We also implement fancybox jquery plugin for image popup .
Below js files to load in head section of index.php

<!-- 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 in index.php

Here images are being fetched from database table and showing to file. Images path are calling from the folder ‘uploads’ .

Specify the large image file path in href attribute.
Add data-fancybox=”group” attribute.
Specify image caption in data-caption attribute.as shown below


<div class="container">
    <div class="gallery">
        <?php
        //Include database configuration file
        include('config.php');
        
        //get images from database
        $r= $mysqli->query("SELECT * FROM images ORDER BY uploaded_on DESC");
        $count=$r->num_rows;
		
        if($count > 0){
            while($row = $r->fetch_assoc()){
                $thumb = '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 $thumb; ?>" alt="" />
            </a>
        <?php }
        } ?>
    </div>
</div>

CSS Code:

Below css used for layout define of our dynamic image gallery

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

Finally , you will see dynamic image gallery with pop up option (also called lightbox) .
Hope this tutorial help someone who looking to create PHP,Mysql, Jquery Dynamic Image/Photo gallery .
If you have any query, write it on below comment form .I will try my best to reply soon .

  • Abhisek Mahat

    These instructions that you are posting are insufficient , I suggest you to add all necessary files and guidance to help the users. Additionally adding a demo for the tutorial would be much appreciated. Besides what would it be of use if the targeted audience cannot get enough information from it considering most of the beginner level audiences are navigated here for support.