How to create a dynamic image gallery using php , ajax , pdo mysql


hello friends , In this tutorials we will know that how to create a  dynamic  image gallery using php , ajax ,  pdo mysql , bootstrap fancy box . Image gallery is common feature in every web application , business website . So  in this tutorials we learn how to create a dynamic image gallery . 

First create a project file index.php just like shown below . then connect database . 

index.php

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Live Deno | jswebsolutions | how to make a image gallery using php with ajax , bootstrap fancybaox  </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link href="jquery.fancybox.min.css" type="text/css" rel="stylesheet" />
  <link rel="icon" type="image/png" href="../favicon_icon.png" >
</head>
<body>
<div class="container" style="margin-top:20px;">
  <div class="row">
   <form id="gallery_upload"> 
   <div class="row"  style="margin-top:50px;">
    <div class="col-md-8 col-sm-12 col-lg-8 padding_div">
      <input type="file" name="image" id="image" class="form-control" />
      <div style="margin-top:20px;">
       <span id="upload_response"></span>  
      </div>
	</div>
    <div class="col-md-4 col-sm-12 col-lg-4 padding_div">
      <button type="submit" name="submit" id="submit_button" class="btn btn-success">  <i class="glyphicon glyphicon-upload"></i> Upload</button>
      <button type="reset" name="reset" id="reset_button" class="btn btn-danger">  <i class="glyphicon glyphicon-refresh"></i> Cancel</button>
      	</div>
   </div>
  </form>
  </div>
  <hr />  
  <div class="row">
    <div id="delete_response"></div>
  </div>
  <div class="row" style="margin-top:20px; margin-bottom:100px;" id="load_image_response"></div>       
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
<script src="custom.js"></script> 
</body>
</html>

     
    
Create a action.php file where we define all function like image upload , load dynamic image php script . 
 

action.php

<?php
 include "classes/classCrud.php";
 $obj = new Class_crud;
 $extArr = array("png" , "jpg" , "jpeg" , "PNG" , "JPEG" , "JPG");


if(isset($_GET['action'])){
 $con = "id != ''";	
 $image_gallery = $obj->get_data("gallery" ,$con, "*");
 if($image_gallery != FALSE){
    foreach($image_gallery as $imageArr){
		  ?>
		 <div class="col-md-4 col-sm-12 col-lg-4 padding_div">
		  <div class="box hovereffect">
			 <a data-fancybox="gallery" href="<?php echo $imageArr['image_path']; ?>" data-caption="">
			   <img src="<?php echo $imageArr['image_path']; ?>" class="imgdp img-responsive img-thumbnail" >
             </a>
             <div class="overlay">
                <a class="info remove_image" data-imageid="<?php if(!empty($imageArr['id'])) echo $imageArr['id']; ?>" href="#">Remove</a>
            </div>
		  </div>
		</div>
		 <?php
	 }
   }
 }	  

	  

if(!empty($_FILES['image']['name'])){
   $file = $_FILES['image']['name'];
   $ext = end(explode('.', $file));
   if(in_array($ext , $extArr)){
      $final_file = md5(time()).".".$ext;
      $file_loc = $_FILES['image']['tmp_name'];
      $file_size = $_FILES['image']['size'];
      $folder = 'upload/';
      if(!is_dir($folder)){ mkdir($folder, 0755, true); }
           move_uploaded_file($file_loc , $folder.$final_file);
           $path = "http://localhost/jsdemo/image_gallery/upload/".$folder.$final_file;
           $dataArr = array("image_name"=>$final_file , "image_path"=>$path);
           $result = $obj->insert("gallery" , $dataArr);
       if($result != FALSE){
           echo '<div class="notice notice-success">
                    <strong> Success </strong> Image Upload successful  .
                 </div>';exit;
         }
       else{
         echo '<div class="notice notice-danger">
                    <strong> Wrong </strong> Record Delete successful .
                 </div>';exit;
         }	
     }
    else{
      echo '<div class="notice notice-danger">
            <strong> Wrong </strong> Only jpeg , png , jpg format  image support .
         </div>';exit; 
    }	 
}
?>
     
    
Create a js file custom.js . in this file we define all ajax code .
 

custom.js

$(document).ready(function(e) {
  gallery_load(); 
  /*Load Image Gallery Script Start*/
   function gallery_load(){
      $.ajax({
	  url: "formSubmit.php",
      type: "GET",        
      data:{action:"get_gallery"},
      success: function(data){
	    $("#load_image_response").html(data);
	   }	
     });
   }
  /*End*/
  
  /*Image Remove Script Start*/
  $(document).on('click','.remove_image',function(){
    var remove_id = $(this).data('imageid');
	if(remove_id != ""){
	    $.ajax({
            url: "remove_gallery.php",
            type: "GET",        
            data:{remove_image:"remove_image" , remove_id:remove_id},
            success: function(data){
              gallery_load();
               $("#delete_response").html(data);
             }	
        }); 
	  }
  });  
  /*End*/
  
  /*Image upload script start*/
  $(document).on('submit','#gallery_upload',function(e){
     $('#upload_response').html("");
	 $('#submit_button').html('<i style="color:#FFF;" class="fa fa-circle-o-notch fa-spin"></i> please wait...').attr('disabled',true); 
	 e.preventDefault();
      $.ajax({
          url: "formSubmit.php",
          type: "POST",        
          data: new FormData(this),
          contentType: false,
          cache: false,
          processData:false,  
          success: function(data){
           gallery_load();
           $("#reset_button").click();
           $('#submit_button').html(' <i class="glyphicon glyphicon-upload"></i> Upload').attr('disabled',false);	 
           $('#upload_response').html(data);
         }	
     });
  });
  /* End */	
});
     
    
Create a css file site.css 
 

site.css

.padding_div{ padding:10px;}
.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  background-color: rgba(0,0,0,0.5);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect a.info {
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin: 50px 0 0;
  padding: 7px 14px;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-transform: translatey(0);
  -webkit-transform: translatey(0);
  transform: translatey(0);
}

.hovereffect:hover a.info {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

 

 

Note :  All about project details brief in this section . otherwise If you encounter any problems in this tutorial, you can download this code and do it.