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
//DB details
$host = 'localhost';
$user = 'root';
$pass = '';
$database = 'gallery';


$mysqli = new mysqli($host, $user, $pass, $database);

if ($mysqli->connect_error) {
   echo $mysqli->connect_error;
}

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 .

Online Web Development Training,Video Tutorials