Create Dynamic Image Fancybox Gallery with jQuery, PHP & MySQL

Contents

In this Post We Will Explain About is Create Dynamic Image Fancybox Gallery with jQuery, PHP & MySQL With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Responsive Photo Gallery with jQuery Example

In this post we will show you Best way to implement Creating dynamic Photo Gallery with jQuery, PHP & MySQL, hear for How to Create Dynamic Image Gallery with jQuery, PHP & MySQL with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Creating simple Database

CREATE TABLE `Gallery_photo` (
  `liveImgId` INT(11) NOT NULL AUTO_INCREMENT,
  `information` text NOT NULL,
  `img_location` VARCHAR(150) NOT NULL,
PRIMARY KEY(`liveImgId`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Include External Libs

<link rel="stylesheet" href="css/bootstrap.min.css" rel="nofollow">
<script src="jquery/3.1.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="fancybox/jquery.fancybox.js"></script>

index.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jquery PHP Gallery using Fancybox Example</title>
	<script type="text/javascript">
	    $("[data-fancybox]").fancybox({ });
	</script>
</head>
<body>
	<div class="container">
		<h1 class="page-header text-center">Fancybox - Fancy jQuery lightbox alternative</h1>
		<h2>
			Photo List
			<a href="#liveaddImg" data-toggle="modal" class="pull-right btn btn-success"><span class="live24u glyphicon glyphicon-plus"></span> Photo</a>
		</h2>
		<?php
			session_start();
 
			if(isset($_SESSION['success'])){
				?>
				<div class="alert alert-success text-center">
					<?php echo $_SESSION['success']; ?>
				</div>
				<?php
 
				unset($_SESSION['success']);
			}
 
			if(isset($_SESSION['galleryError'])){
				?>
				<div class="alert alert-danger text-center">
					<?php echo $_SESSION['galleryError']; ?>
				</div>
				<?php
 
				unset($_SESSION['galleryError']);
			}
		?>
		<table class="table">
			<thead>
				<th>Information</th>
				<th>Gallery Location</th>
				<th>Gallery</th>
			</thead>
			<tbody>
				<?php
					$db_con = new mysqli("localhost", "username", "password", "gallery");
 
					if ($db_con->connect_error) {
					    die("Connection failed: " . $db_con->connect_error);
					}
 
					$sql="select * from Gallery_photo";
					$query=$db_con->query($sql);
					while($datarow=$query->fetch_array()){
						?>
						<tr>
							<td><?php echo $datarow['information']; ?></td>
							<td><?php echo $datarow['img_location']; ?></td>
							<td><a href="<?php echo $datarow['img_location']; ?>" data-fancybox="group" data-caption="<?php echo $datarow["information"]; ?>"><img src="<?php echo $datarow['img_location']; ?>" height="30px" width="30px"></a></td>
						</tr>
						<?php
					}
				?>
			</tbody>
		</table>
	</div>
 
	<!--create / Add Photo -->
	<div class="modal fade" id="liveaddImg" tabindex="-1" role="dialog" aria-labelledby="live_createModel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="live modal-title text-center" id="live_createModel">Add New Photo</h4>
				</div>
				<div class="live modal-body">
					<div class="live24u container-fluid">
					<form method="POST" action="do_upload.php" enctype="multipart/form-data">
				    	<div class="form-group">
							<div class="row">
					    		<div class="col-xl-2" style="margin-top:8px;">
					    			<label>Description:</label>
					    		</div>
					    		<div class="col-xl-10">
					    			<input type="text" class="form-control" name="information" required>
					    		</div>
					    	</div>
				    	</div>
				    	<div class="live form-group">
				    		<div class="row">
					    		<div class="col-xl-2" >
					    			<label>Gallery Photo:</label>
					    		</div>
					    		<div class="col-xl-10">
					    			<input type="file" name="image">
					    		</div>
					    	</div>
				    	</div>
				    </div>
				</div>
				<div class="live modal-footer">
					<button type="button" class="live24u btn btn-default" data-dismiss="modal"><span class="live glyphicon glyphicon-remove"></span> Cancel</button>
					<button type="submit" class="btn btn-success"><span class="live24u glyphicon glyphicon-floppy-disk"></span> Save</button>
					</form>
				</div>
			</div>
		</div>
	</div>
 
</body>
</html>

do_upload.php

<?php
	session_start();
 
	$db_con = new mysqli("localhost", "username", "yourpassword", "gallery");
	if ($db_con->connect_error) {
	    die("Connection failed: " . $db_con->connect_error);
	}
 
	$information=$_POST['information'];
 
	$getDataInfo = PATHINFO($_FILES["image"]["name"]);
	if (empty($_FILES["image"]["name"])){
		$_SESSION['galleryError']="Upload Failed. Sorry File empty!";
		header('img_location:index.php');
	}
	else{
		if ($getDataInfo['extension'] == "jpg" OR $getDataInfo['extension'] == "jpeg" OR $getDataInfo['extension'] == "png") {
			$newdataFile = $getDataInfo['filename'] . "_" . time() . "." . $getDataInfo['extension'];
			move_uploaded_file($_FILES["image"]["tmp_name"], "upload/" . $newdataFile);
			$img_location = "upload/" . $newdataFile;
 
			$sql="insert into Gallery_photo (information, img_location) values ('$information', '$img_location')";
			$query=$db_con->query($sql);
 
			if($query){
				$_SESSION['success']="Gallery Photo uploaded Successfully Good Lick!";
			}
			else{
				$_SESSION['galleryError']="Something went wrong. Please check to Can't upload Photo!";
			}
 
			header('img_location:index.php');
 
		}
		else{
			$_SESSION['galleryError']="Upload Failed. Sorry Please check upload any format JPG or PNG Gallery_photo only!";
			header('img_location:index.php');
		}
	}
 
?>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read This 👉 How to Retrieve Domain Name from URL in PHP?

Example

I hope you have Got What is Fancybox – Fancy jQuery lightbox alternative And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.

Create Dynamic Image Fancybox Gallery with jQuery, PHP & MySQL

Creating simple Database

Include External Libs

index.php

do_upload.php

Related posts: