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 .
<!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>
<?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;
}
}
?>
$(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 */
});
.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.