Create Dynamic Image Fancybox Gallery with jQuery, PHP & MySQL

Create Dynamic Image Fancybox Gallery with jQuery, PHP & MySQL

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>

Also Read :  Vuejs json Custom Filter example

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 :  jQuery Get Dynamic Element Selector Finding ID

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.

Leave a Reply

Your email address will not be published. Required fields are marked *