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
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
Step 5: Write Image Upload Script
File Name – photo-upload-script.php
$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
';
}
}
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 . "
" . $db->error;
}
}
}
?>
Write Image Gallery Script
File Name – photo-portfolio-script.php
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
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.
