Today, We want to share with you php image gallery.In this post we will show you image gallery crud with php and mysql, hear for php photo gallery with admin panel we will give you demo and example for implement.In this post, we will learn about how to fetch images from database in php with php imagegallery an example.
PHP Image Gallery – Create Photo Gallery With Database
PHP Media Gallery is an open-source, free PHP script to upload and display photographs. Simple Photo Gallery is developed using PHP, CSS, Bootstrap, and JavaScript. Also php image galery Delete Images (php images gallery) — Delete image files from the server (PHP) and delete records from a MySQL database.
Step 1: folder structure
myproject |__assets/ | |__portfolio-script.js | |__style.css |__uploads/ |__database.php |__photo-portfolio-script.php |__photo-upload-form.php |__photo-upload-script.php |__show-photo-portfolio.php
Step 2: Create MySQL Database And Table
Table Name – portfolio
CREATE TABLE `portfolio` ( `id` int(10) UNSIGNED PRIMARY KEY NOT NULL AUTO_INCREMENT, `photo_name` varchar(255) DEFAULT NULL, ) ENGINE=InnoD
Step 3: Connect PHP To MYSQL Database
File Name – database.php
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$databasename = "pakainfoweb";
// Create connection
$conn = new mysqli($hostname, $username, $password,$databasename);
// Check connection
if ($conn->connect_error) {
die("Unable to Connect database: " . $conn->connect_error);
}
?>
step 4: Create Image Upload Form (php image gallary)
File Name – photo-upload-form.php
<?php
include('photo-upload-script.php');
?>
<!DOCTYPE html>
<html>
<body>
<form method="post" enctype="multipart/form-data">
<input type="file" name="photo_portfolio[]" multiple>
<input type="submit" value="Upload Now" name="submit">
</form>
</body>
</html>
Step 5: Write Image Upload Script
File Name – photo-upload-script.php
<?php
require_once('database.php');
$db=$conn; // Enter your Connection variable;
$photo_tbl='portfolio'; // Enter your table Name;
// upload photo on submit
if(isset($_POST['submit'])){
echo upload_photo($photo_tbl);
}
function upload_photo($photo_tbl){
$uploadTo = "uploads/";
$allowedImageType = array('jpg','png','jpeg','gif');
$photoName = array_filter($_FILES['photo_portfolio']['name']);
$photoTempName=$_FILES["photo_portfolio"]["tmp_name"];
$photo_tbl= trim($photo_tbl);
if(empty($photoName)){
$error="Please Select Images..";
return $error;
}else if(empty($photo_tbl)){
$error="You must declare table name";
return $error;
}else{
$error=$savedImageBasename='';
foreach($photoName as $index=>$file){
$photoBasename = basename($photoName[$index]);
$photoPath = $uploadTo.$photoBasename;
$photoType = pathinfo($photoPath, PATHINFO_EXTENSION);
if(in_array($photoType, $allowedImageType)){
// Upload photo to server
if(move_uploaded_file($photoTempName[$index],$photoPath)){
// Store photo into database table
$savedImageBasename .= "('".$photoBasename."'),";
}else{
$error = 'File Not uploaded ! try again';
}
}else{
$error .= $_FILES['file_name']['name'][$index].' - file extensions not allowed<br> ';
}
}
save_photo($savedImageBasename, $photo_tbl);
}
return $error;
}
// File upload configuration
function save_photo($savedImageBasename, $photo_tbl){
global $db;
if(!empty($savedImageBasename))
{
$value = trim($savedImageBasename, ',');
$saveImage="INSERT INTO ".$photo_tbl." (photo_name) VALUES".$value;
$exec= $db->query($saveImage);
if($exec){
echo "Images are uploaded successfully";
}else{
echo "Error: " . $saveImage . "<br>" . $db->error;
}
}
}
?>
Write Image Gallery Script
File Name – photo-portfolio-script.php
<?php
require_once('database.php');
$db=$conn; // Enter your Connection variable;
$photo_tbl='portfolio'; // Enter your table Name;
$fetchImage= fetch_photo($photo_tbl);
// fetching padination data
function fetch_photo($photo_tbl){
global $db;
$photo_tbl= trim($photo_tbl);
if(!empty($photo_tbl)){
$query = "SELECT * FROM ".$photo_tbl." ORDER BY id DESC";
$result = $db->query($query);
if ($result->num_rows > 0) {
$row= $result->fetch_all(MYSQLI_ASSOC);
return $row;
}else{
echo "No Image is stored in the database";
}
}else{
echo "you must declare table name to fetch Image";
}
}
?>
Show Image Gallery
File Name – show-photo-portfolio.php
<?php
require('photo-portfolio-script.php');
?>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/style.css">
<body>
<!--======photo portfolio ========-->
<br>
<div class="row">
<?php
if(!empty($fetchImage))
{
$sn=1;
foreach ($fetchImage as $img) {
?>
<div class="column">
<img src="uploads/
<?php
echo $img['photo_name'];
?>
" style="width:100%" onclick="openModal(); currentSlide(
<?php
echo $sn;
?>
)" class="hover-shadow cursor">
</div>
<?php
$sn++;}
}else{
echo "No Image is saved in database";
}
?>
</div>
<!--======photo portfolio ========-->
<div id="portfolioModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<!--======photo portfolio modal========-->
<div class="modal-content">
<?php
if(!empty($fetchImage))
{
$sn=1;
foreach ($fetchImage as $img) {
?>
<div class="portfolioSlides">
<div class="numbertext"> / 4</div>
<img src="uploads/
<?php
echo $img['photo_name'];
?>
" style="width:100%">
</div>
<?php
$sn++;}
}else{
echo "No Image is saved in database";
}
?>
<!--======photo portfolio model========-->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
</div>
</div>
<script type="text/javascript" src="assets/portfolio-script.js"></script>
</body>
</html>
3. Design Image Gallery Using CSS
File Name – style.css
body {
box-sizing: border-box;
margin:0px;
padding: 0px;
overflow-x: hidden;
}
.row > .column {
margin: .5%;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 24%;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #363333ab;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.portfolioSlides {
display: none;
}
.cursor {
cursor: pointer;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
background: #00000066;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.numbertext {
color: #171717;
font-size: 20px;
padding: 8px 12px;
position: absolute;
top: 0;
font-weight: bold;
}
.column img{
max-height: 160px;
height: 160px;
object-fit: contain;
padding: 5px;
border: 1px solid #d9d9d9;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
Create Image Gallery Model Using Javascript
File Name – portfolio-script.js
function openModal() {
document.getElementById("portfolioModal").style.display = "block";
}
function closeModal() {
document.getElementById("portfolioModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("portfolioSlides");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
I hope you get an idea about php bootstrap photo gallery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.