Creating Dynamic Photo Gallery php using Mysql
is an easy task and you don’t need to put too much efforts to make it working. Recently in our previous article How to Create Dynamic Image Slider Using PHP and Bootstrap we have completed a tutorial in which we have used the Uploading of images and showing the slider over the page. Almost 80% working criteria will be same in this tutorial also.
Lets divide our Dynamic Image Gallery in PHP tutorial in 3 parts so it will be easy for you to understand.
1. This part we will see how we will use the uploaded images to our website page and show them using the Lightbox plugin for making it more beautiful. I will show you php code for gallery page.
2. We will create PHP based Gallery Album feature so that we will save an event in an Image Album and create another album for another event. Album will help our website to show the images in a perfect manner according to the event happened.
3. We will create a Jquery Drag and Drop uploader for uploading the images and save them to our database. We will just replace the simple uploader to the new one.
You will find video according to the article. you can download the code from the bottom of every article. At the end you will see that we have created php photo gallery with admin panel. So lets get started.
Create Admin Panel for Dynamic Gallery
This part will show you the different pages and the classes which we have used to create the admin panel and uploading the images to the server. We will only put the listing of uploaded images and uploading of images script. For all the pages please download the package from the bottom of the article.
Add Gallery Images
<?php
include_once './inc/header.php';
if(isset($_POST["submit"])){
$getImage= basename($_FILES["Image"]["name"]);
if($getImage==""){
echo "Please choose";
}
else
{
$target="../galleryImage/";
$ran=time();
$target=$target.$ran.$getImage;
$imageName=$ran.$getImage;
if($_FILES["Image"]["type"]=="image/jpg"||$_FILES["Image"]["type"]=="image/jpeg"){
move_uploaded_file($_FILES["Image"]["tmp_name"], $target);
if(move_uploaded_file){
include_once './gallery/galleryClass.php';
$galleryClass=new GalleryClass();
$galleryClass->uploadGallery($imageName,$_POST["Big"],$_POST["Small"]);
}
else
{
echo "File is not uploaded";
}
}
else
{
echo "Please choose Image";
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Justified Nav Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jhttp://getbootstrap.com/docs/4.0/examples/justified-nav/justified-nav.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="masthead">
<br/>
<h3 class="text-muted">Add Gallery</h3>
<br/>
<nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav text-md-center nav-justified w-100">
<li class="nav-item active">
<a class="nav-link" href="dashboard.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="addGallery.php">Add Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="listGallery.php">List Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.php">Logout</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Example row of columns -->
<div class="col-md-6">
<form method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>" enctype="multipart/form-data">
<div class="form-group">
<label>Choose Image</label>
<input type="file" name="Image" id="Image" value="" class="form-control">
</div>
<div class="form-group">
<label>Big Text</label>
<input type="text" name="Big" id="Big" value="" class="form-control">
</div>
<div class="form-group">
<label>Small Text</label>
<input type="text" name="Small" id="Small" value="" class="form-control">
</div>
<button id="submit" name="submit" type="Submit" class="btn btn-primary">Upload Image</button>
</form>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/assets/js/vendor/popper.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
Gallery Class
<?php
require_once ( dirname( __FILE__). '/../functions/connectionClass.php' );
class galleryClass extends connectionClass{
public function uploadGallery($image,$big,$small){
$insert="Insert into gallery (ImageName,BigText,SmallText) values ('$image','$big','$small')";
$result=$this->query($insert);
if($result){
echo "File is uploaded";
}
else
{
echo "File is not uploaded";
}
}
public function listGallery(){
$select="select * from gallery";
$result=$this->query($select);
$count=$result->num_rows;
if($count< 1){
}
else
{
while ($row = $result->fetch_array()) {
$rows[]=$row;
}
return $rows;
}
}
}
As you can see above that i have added the code for uploading the image to the server now its the time for showing the image over the website using lightbox. For lightbox we will use Bootstrap.
Index Page (Dynamic Photo Gallery PHP and Mysql)
<?php
include_once './manage/gallery/galleryClass.php';
$galleryClass=new galleryClass();
$galleryList=$galleryClass->listGallery();
?>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="//bootsnipp.com/dist/bootsnipp.min.css">
<style>
body {
padding: 30px 0px;
}
#lightbox .modal-content {
display: inline-block;
text-align: center;
}
#lightbox .close {
opacity: 1;
color: rgb(255, 255, 255);
background-color: rgb(25, 25, 25);
padding: 5px 8px;
border-radius: 30px;
border: 2px solid rgb(255, 255, 255);
position: absolute;
top: -15px;
right: -55px;
z-index:1032;
}
</style>
<div class="container">
<?php
if(count($galleryList)){
foreach ($galleryList as $value) {
echo '<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="galleryImage/'.$value["ImageName"].'" alt="...">
</a>
</div>';
}
}
?>
</div>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">X</button>
<div class="modal-content">
<div class="modal-body">
<img src="" alt="" />
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
var $lightbox = $('#lightbox');
$('[data-target="#lightbox"]').on('click', function(event) {
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({'width': $img.width()});
$lightbox.find('.close').removeClass('hidden');
});
});
</script>
So we have completed our Create Dynamic Photo Gallery PHP and Mysql for all the files you can download the zip file from below.
Sir, how can I assign a particular album to a particular user and restrict him viewing the other albums?