Posted inphp / JavaScript / jQuery

How to Create dynamic Responsive Image/photo gallery in php?

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype