Creating dynamic Photo Gallery with jQuery, PHP & MySQL

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">   To bind fancyBox events on the image gallery, specify selector and call the fancybox() method:  $("").fancybox({ });  

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;
    $imageURL = 'images/'.$row;
  ?> <a href="<?php echo $imageURL; ?>" data-fancybox="group" data-caption="<?php echo $row; ?>" > <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 .