How to Create Multi Functional Image Gallery App in PHP MySQL

 

To develop a multi functional image gallery app in PHP and MySQL, the process involves integrating server-side scripting, database management, and client-side interactions. Begin by establishing a MySQL database to store image and folder data, defining appropriate tables and relationships.

Craft a responsive user interface using HTML, CSS, and Bootstrap for a visually appealing and accessible design. Implement navigation tabs for different image folders, enabling users to organize and categorize their images effectively. Utilize modals to enhance user interactions during tasks such as adding images and managing folders.

Integrate PHP scripts for creating, reading, updating, and deleting (CRUD) images and folders, ensuring data integrity and security. Dynamically generate HTML content based on information retrieved from the MySQL database, allowing seamless integration of server-side and client-side functionalities.

Incorporate JavaScript to enhance the user experience, providing features like image lightboxing and folder management through right-click events. Leverage existing libraries, such as BaguetteBox.js, to streamline the development of interactive image displays.

The application should support essential functionalities like image uploads, folder creation, renaming, and the ability to delete images or entire folders. Thoroughly test the application to identify and address any potential bugs, ensuring a robust and user-friendly multi-functional image gallery app.

Follow This Step to Create Multi Functional Image Gallery App

1- Creating Database

• Open PHPMyAdmin in your Browser
• Click on Database Tab Display on Topside
• Give the Database name “image-gallery”.
• After Creating Database Open it.
• Click on SQL Tab on Top area
• Copy the Below Source Code and paste it.
• Then Click on Go.

-- phpMyAdmin SQL Dump

-- version 5.2.1

-- https://www.phpmyadmin.net/

--

-- Host: 127.0.0.1

-- Generation Time: Feb 11, 2024 at 12:13 AM

-- Server version: 10.4.32-MariaDB

-- PHP Version: 8.2.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

START TRANSACTION;

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

--

-- Database: `image-gallery`

--

-- --------------------------------------------------------

--

-- Table structure for table `tbl_image`

--

CREATE TABLE `tbl_image` (

`tbl_image_id` int(11) NOT NULL,

`tbl_image_folder_id` int(11) NOT NULL,

`image_name` text NOT NULL,

`data_uploaded` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--

-- Dumping data for table `tbl_image`

--

INSERT INTO `tbl_image` (`tbl_image_id`, `tbl_image_folder_id`, `image_name`, `data_uploaded`) VALUES

(13, 6, '65c7eee14de55_img1.jpg', '2024-02-10 21:47:13'),

(16, 6, '65c7fe8660132_img5.jpg', '2024-02-10 22:53:58'),

(17, 6, '65c7fe8f8d8be_img4.jpg', '2024-02-10 22:54:07'),

(18, 7, '65c7ffa8457cf_anm1.jpg', '2024-02-10 22:58:48'),

(19, 7, '65c7ffb25ee6f_anm2.jpg', '2024-02-10 22:58:58'),

(20, 7, '65c7ffba3aa7e_anm3.jpg', '2024-02-10 22:59:06'),

(21, 7, '65c7ffca1f253_anm4.jpg', '2024-02-10 22:59:22');

-- --------------------------------------------------------

--

-- Table structure for table `tbl_image_folder`

--

CREATE TABLE `tbl_image_folder` (

`tbl_image_folder_id` int(11) NOT NULL,

`folder_name` text NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

--

-- Dumping data for table `tbl_image_folder`

--

INSERT INTO `tbl_image_folder` (`tbl_image_folder_id`, `folder_name`) VALUES

(6, 'Nature'),

(7, 'Animals');

--

-- Indexes for dumped tables

--

--

-- Indexes for table `tbl_image`

--

ALTER TABLE `tbl_image`

ADD PRIMARY KEY (`tbl_image_id`);

--

-- Indexes for table `tbl_image_folder`

--

ALTER TABLE `tbl_image_folder`

ADD PRIMARY KEY (`tbl_image_folder_id`);

--

-- AUTO_INCREMENT for dumped tables

--

--

-- AUTO_INCREMENT for table `tbl_image`

--

ALTER TABLE `tbl_image`

MODIFY `tbl_image_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;

--

-- AUTO_INCREMENT for table `tbl_image_folder`

--

ALTER TABLE `tbl_image_folder`

MODIFY `tbl_image_folder_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

OR Import DB File

After Downloading the source code extract it in your root folder.

• Open PHPMyAdmin in your Browser
• Click on Database Tab Display on Topside
• Give the Database name “image-gallery”.
• After Creating Database Open it.
• Click on Import Tab on Top area
• You can Find db  folder in the Downloaded source code where find image-gallery.sql file then Select it.
• Then Click on Go.

2- Creating Database Connection

After import Database File then next step is creating a database connection using php copy the below code and save it is as “conn.php” under conn folder.

<?php

$servername = "localhost";

$username = "root";

$password = "";

$dbname = "image-gallery";

try {

$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);

$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

echo "Aw gg". $e->getMessage() ."";

}

?>

3 – Creating Index Page

To create a multi-functional image gallery index page using HTML and CSS, start by designing a clean and responsive interface. Incorporate HTML for the structure and CSS for styling. Utilize navigation tabs to organize image folders, ensuring an intuitive user experience. Integrate modals for user interactions such as adding images and managing folders. Enhance visuals using Bootstrap for a polished appearance. Employ JavaScript for dynamic content generation, leveraging libraries like BaguetteBox.js for image displays. Implement PHP scripts to enable CRUD operations for images and folders, ensuring robust data management. Incorporate MySQL for database functionality, maintaining data integrity and security. Test the index page thoroughly to identify and address any potential bugs. Provide essential features like image uploads, folder creation, renaming, and deletion to ensure a user-friendly and versatile image gallery. create index page into your project folder then copy below code and paste into index page .

<?php include("./conn/conn.php"); ?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Image Gallery App</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.0/baguetteBox.min.css">

<!-- Style CSS -->

<link rel="stylesheet" href="./assets/style.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

</head>

<body>

<div class="main">

<div class="image-container">

<button type="button" class="btn btn-success float-right add-image" data-toggle="modal" data-target="#addImageModal">&#43; Add Image</button>

<button type="button" class="btn btn-secondary float-right cancel-delete" onclick="cancelDelete()" style="display: none;">Cancel</button>

<button type="button" class="btn btn-danger float-right delete-image mr-1" style="display: none;">Delete Image/s</button>

<!-- Add Image Modal -->

<div class="modal fade mt-5" id="addImageModal" tabindex="-1" aria-labelledby="addImage" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title">Add Image</h5>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="modal-body">

<form action="./includes/add-image.php" method="POST" enctype="multipart/form-data">

<div class="form-group">

<label for="folderName">Folder Name</label>

<select class="form-control" name="tbl_image_folder_id" id="imgFolderID">

<option value="0">All Image</option>

<?php

$stmt = $conn->prepare("SELECT * FROM tbl_image_folder");

$stmt->execute();

$folderResult = $stmt->fetchAll();

foreach ($folderResult as $row) {

$folderID = $row["tbl_image_folder_id"];

$folderName = $row["folder_name"];

?>

<option value="<?= $folderID ?>"><?= $folderName ?></option>

<?php

}

?>

</select>

</div>

<div class="form-group">

<label for="imageName">Image/s</label>

<input type="file" class="form-control-file" id="imageName" name="image_name">

</div>

<div class="modal-footer">

<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>

<button type="submit" class="btn btn-primary">Add</button>

</div>

</form>

</div>

</div>

</div>

</div>

<div class="row mt-5">

<div class="col-3">

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

<button class="nav-link active" id="v-pills-all-images-tab" data-toggle="pill" data-target="#v-pills-all-images" type="button" role="tab" aria-controls="v-pills-all-images" aria-selected="true">All Image</button>

<?php

$stmt = $conn->prepare("SELECT * FROM tbl_image_folder");

$stmt->execute();

$result = $stmt->fetchAll();

foreach ($result as $row) {

$folderID = $row["tbl_image_folder_id"];

$folderName = $row["folder_name"];

?>

<button class="nav-link" id="v-pills-<?= $folderID ?>-tab" data-toggle="pill" data-target="#v-pills-<?= $folderID ?>" type="button" role="tab" aria-controls="v-pills-<?= $folderID ?>" aria-selected="true" oncontextmenu="showModal(event, <?= $folderID ?>)"><?= $folderName ?> </button>

<!-- Right clicked Modal -->

<div class="modal fade mt-5" id="folderModal-<?= $folderID ?>" tabindex="-1" role="dialog" aria-hidden="true">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title">Manage Folder</h5>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="modal-body">

<form action="./includes/update-folder.php" method="POST">

<input type="text" class="form-control" name="tbl_image_folder_id" value="<?= $folderID ?>" hidden>

<div class="form-group">

<label>Folder Name</label>

<input type="text" class="form-control" name="folder_name" value="<?= $folderName ?>">

</div>

<div class="modal-footer">

<button type="submit" class="btn btn-dark">Update Folder</button>

<button type="button" class="btn btn-danger" onclick="deleteFolder(<?= $folderID ?>)">Delete Folder</button>

</div>

</form>

</div>

</div>

</div>

</div>

<?php

}

?>

</div>

<button id="addFolder" type="button" data-toggle="modal" data-target="#addFolderModal">&#43; Add Folder</button>

<!-- Add Folder Modal -->

<div class="modal fade mt-5" id="addFolderModal" tabindex="-1" aria-labelledby="addFolder" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title">Add Folder</h5>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="modal-body">

<form action="./includes/add-folder.php" method="POST">

<div class="form-group">

<label for="folderName">Folder Name</label>

<input type="text" class="form-control" id="folderName" name="folder_name">

</div>

<div class="modal-footer">

<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>

<button type="submit" class="btn btn-primary">Add</button>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

<div class="image-display col-9">

<div class="tab-content image-tab" id="v-pills-tabContent">

<div class="tab-pane fade show active images" id="v-pills-all-images" role="tabpanel" aria-labelledby="v-pills-all-images-tab">

<?php

$stmt = $conn->prepare("SELECT * FROM tbl_image");

$stmt->execute();

$result = $stmt->fetchAll();

foreach ($result as $row) {

$imageID = $row["tbl_image_id"];

$image = $row["image_name"];

?>

<div class="image-card">

<input class="delete-check-box" type="checkbox" id="checkbox-<?= $imageID ?>" style="display: none;">

<a href="./images/<?= $image ?>" data-lightbox="images-gallery" data-title="Image <?= $imageID ?>">

<img src="./images/<?= $image ?>" alt="">

</a>

</div>

<?php

}

?>

</div>

<?php

$stmt = $conn->prepare("SELECT * FROM tbl_image_folder");

$stmt->execute();

$result = $stmt->fetchAll();

foreach ($result as $row) {

$folderID = $row["tbl_image_folder_id"];

$folderName = $row["folder_name"];

?>

<div class="tab-pane fade show" id="v-pills-<?= $folderID ?>" role="tabpanel" aria-labelledby="v-pills-<?= $folderID ?>-tab">

<div class="images-gallery">

<?php

$stmtImages = $conn->prepare("SELECT * FROM tbl_image WHERE tbl_image_folder_id = :folderID");

$stmtImages->bindParam(':folderID', $folderID, PDO::PARAM_INT);

$stmtImages->execute();

$resultImages = $stmtImages->fetchAll();

foreach ($resultImages as $row) {

$imageID = $row["tbl_image_id"];

$image = $row["image_name"];

?>

<div class="image-card">

<input class="delete-check-box" type="checkbox" id="checkbox-<?= $imageID ?>" style="display: none;">

<a href="./images/<?= $image ?>" data-lightbox="images" data-title="Image <?= $imageID ?>">

<img src="./images/<?= $image ?>" alt="">

</a>

</div>

<?php

}

?>

</div>

</div>

<?php

}

?>

</div>

</div>

</div>

</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.0/baguetteBox.min.js"></script>

<script src="./assets/script.js"></script>

</body>

</html>

4 – Add Folder into Database using PHP

implement a add folder into database using php. Create an “includes” folder in the project, and then add an “add-folder.php” file. Copy and paste the provided code.

<?php

include("../conn/conn.php");

if ($_SERVER["REQUEST_METHOD"] == "POST") {

if (isset($_POST["folder_name"])) {

$folderName = $_POST["folder_name"];

try {

$stmt = $conn->prepare("INSERT INTO tbl_image_folder (folder_name) VALUES (:folder_name)");

$stmt->bindParam(":folder_name", $folderName);

$stmt->execute();

echo"

<script>

alert('Folder Added Successfully');

window.location.href = 'http://localhost/image-gallery-app/';

</script>

";

exit();

} catch (PDOException $e) {

echo "Error: ". $e->getMessage();

}

}

}

?>

5 – Add Image into Database using PHP

Add image functionality using PHP into database. under includes folder in the project add a “add-image.php” file. Copy and paste the provided code.

<?php

include("../conn/conn.php");

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

$folder_id = $_POST['tbl_image_folder_id'];

// Check if files were uploaded

if (isset($_FILES['image_name']['name'])) {

$image_name = $_FILES['image_name']['name'];

$image_tmp = $_FILES['image_name']['tmp_name'];

$image_size = $_FILES['image_name']['size'];

$image_type = $_FILES['image_name']['type'];

$target_directory = '../images/'; // Change this path as needed

$unique_filename = uniqid() . '_' . $image_name;

if (!is_dir($target_directory)) {

mkdir($target_directory, 0777, true);

}

if (move_uploaded_file($image_tmp, $target_directory . $unique_filename)) {

$stmt = $conn->prepare("INSERT INTO tbl_image (tbl_image_folder_id, image_name) VALUES (:folder_id, :unique_filename)");

$stmt->bindParam(':folder_id', $folder_id);

$stmt->bindParam(':unique_filename', $unique_filename);

$stmt->execute();

header('Location: http://localhost/image-gallery-app/');

} else {

echo "Error uploading the image.";

}

} else {

echo "Please select an image to upload.";

}

}

?>

6 – Delete Folder from Database using PHP

Delete folder functionality using PHP from database. under includes folder in the project add a “delete-folder.php” file. Copy and paste the provided code.

<?php

include ("../conn/conn.php");

if (isset($_GET['folder'])) {

$folderID = $_GET['folder'];

try {

$stmt = $conn->prepare("DELETE FROM tbl_image_folder WHERE tbl_image_folder_id = :folderID");

$stmt->bindParam(':folderID', $folderID, PDO::PARAM_INT);

$stmt->execute();

$stmtImages = $conn->prepare("DELETE FROM tbl_image WHERE tbl_image_folder_id = :folderID");

$stmtImages->bindParam(':folderID', $folderID, PDO::PARAM_INT);

$stmtImages->execute();

echo"

<script>

alert('Folder Deleted Successfully');

window.location.href = 'http://localhost/image-gallery-app/';

</script>

";

exit();

} catch (PDOException $e) {

echo "Error: " . $e->getMessage();

}

}

?>

7 – Delete Image from Database using PHP

Delete image functionality using PHP from database. under includes folder in the project add a “delete-image.php” file. Copy and paste the provided code.

<?php

include '../conn/conn.php';

if (isset($_GET['image'])) {

$imageIDs = filter_input(INPUT_GET, 'image', FILTER_SANITIZE_STRING);

$imageIDsArray = explode(',', $imageIDs);

try {

foreach ($imageIDsArray as $imageID) {

// Fetch the image name from the database

$stmt = $conn->prepare("SELECT image_name FROM tbl_image WHERE tbl_image_id = :imageID");

$stmt->bindParam(':imageID', $imageID, PDO::PARAM_INT);

$stmt->execute();

$result = $stmt->fetch(PDO::FETCH_ASSOC);

if ($result) {

$imageFileName = $result['image_name'];

$stmt = $conn->prepare("DELETE FROM tbl_image WHERE tbl_image_id = :imageID");

$stmt->bindParam(':imageID', $imageID, PDO::PARAM_INT);

$stmt->execute();

$imageFilePath = "../images/" . $imageFileName;

if (file_exists($imageFilePath)) {

unlink($imageFilePath);

}

}

}

echo "

<script>

alert('Image/s Deleted Successfully');

window.location.href = 'http://localhost/image-gallery-app/';

</script>

";

exit();

} catch (PDOException $e) {

echo "Error: " . $e->getMessage();

}

}

?>

8 – Update folder into Database using PHP

update folder name functionality using PHP into database. under includes folder in the project add a “update-folder.php” file. Copy and paste the provided code.

<?php

include("../conn/conn.php");

if ($_SERVER["REQUEST_METHOD"] == "POST") {

if (isset($_POST["folder_name"])) {

$folderID = $_POST['tbl_image_folder_id'];

$folderName = $_POST["folder_name"];

try {

$stmt = $conn->prepare("UPDATE tbl_image_folder SET folder_name = :folder_name WHERE tbl_image_folder_id = :tbl_image_folder_id");

$stmt->bindParam(":tbl_image_folder_id", $folderID);

$stmt->bindParam(":folder_name", $folderName);

$stmt->execute();

echo"

<script>

alert('Folder Updated Successfully');

window.location.href = 'http://localhost/image-gallery-app/';

</script>

";

exit();

} catch (PDOException $e) {

echo "Error: ". $e->getMessage();

}

}

}

?>

9 – Styling All Elements Using CSS

Apply CSS styles consistently across all pages to create a visually appealing and user-friendly interface. Use responsive design principles to ensure a good user experience on various devices.  you can create a asstes folder under project then create s style.css after that copy paste the below code.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

* {

margin: 0;

padding: 0;

font-family: 'Poppins', sans-serif;

}

body {

background-color: rgb(223, 223, 223) !important;

}

.main {

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

}

.image-container {

margin-top: 50px;

border-radius: 10px;

background-color: rgb(255, 255, 255);

width: 1000px;

height: 700px;

padding: 20px 40px 20px 20px;

box-shadow: rgb(50 50 50 / 24%) 0px 0px 10px 2px;

}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {

color: rgb(240, 240, 240);

background-color: rgb(77, 77, 77) !important;

}

.nav-pills .nav-link {

border: 1px solid rgb(200, 200, 200) !important;

border-radius: none !important;

color: rgb(90, 90, 90);

margin-top: 5px;

}

#addFolder {

border: none;

background-color: transparent;

color: rgb(70, 70, 70);

text-align: center;

margin: 10px;

width: 200px;

}

.add-image {

margin-right: -15px;

}

.image-display {

border: 1px solid rgb(200, 200, 200);

border-radius: 10px;

min-height: 600px;

}

.tab-content>.active {

display: flex !important;

flex-wrap: wrap;

overflow-y: auto;

}

.image-card {

flex: 0 0 auto;

width: 153px;

height: 190px;

overflow: hidden;

margin: 10px;

}

.image-card img {

width: 100%;

height: 100%;

border-radius: 8px;

}

.image-card {

position: relative;

display: inline-block;

}

.delete-check-box {

position: absolute;

top: 0;

right: 0;

margin: 5px;

}

10 – Validate All FUnctions Using JavaScript

The JavaScript functionality in the provided code enhances the user interface and manages various aspects of the image gallery application. The code relies on Bootstrap and BaguetteBox.js for styling and image display. Key features include dynamic modal creation for adding images and managing folders. The “Add Image” button triggers a modal allowing users to choose a folder and upload images. Each folder in the navigation panel can be right-clicked to reveal a modal for managing the folder, enabling users to update or delete it.

Moreover, the code includes a checkbox mechanism for selecting images to delete. Buttons for canceling the delete operation and actually deleting the selected images are dynamically displayed based on user actions. This feature improves user interaction and provides a seamless way to manage and organize images.

The JavaScript code efficiently leverages Bootstrap’s components, jQuery for DOM manipulation, and BaguetteBox.js for a responsive lightbox display. This results in a visually appealing and functional image gallery with a user-friendly interface. under aseets folder in the project and add a “script.js” file. Copy and paste the provided code.

// Function to initialize BaguetteBox for a specific set of images

function initBaguetteBox() {

baguetteBox.run('.images-gallery', {

animation: 'fadeIn'

});

}

// Initialize BaguetteBox on page load

initBaguetteBox();

$(".delete-image").on("click", function () {

if (confirm("Do you want to delete all checked images?")) {

var checkedImageIDs = [];

$(".delete-check-box:checked").each(function () {

var imageID = $(this).attr("id").replace("checkbox-", "");

checkedImageIDs.push(imageID);

});

$(".delete-check-box").prop("checked", false);

window.location = "./includes/delete-image.php?image=" + checkedImageIDs;

}

});

$(document).on("contextmenu", ".image-card", function (event) {

event.preventDefault();

// Show all checkboxes

$(".delete-check-box").show();

$(".add-image").hide();

$(".delete-image").show();

$(".cancel-delete").show();

});

// Update BaguetteBox when a new folder is selected

$('#v-pills-tab a').on('click', function (e) {

e.preventDefault();

$(this).tab('show');

initBaguetteBox();

});

function showModal(event, id) {

event.preventDefault();

if (event.which === 3) { // Check if it's a right-click event

// Show the modal

$('#folderModal-' + id).modal('show');

}

}

function deleteFolder(id) {

if (confirm("Do you want to delete this folder the images will be deleted also?")) {

window.location = "./includes/delete-folder.php?folder=" + id;

}

}

$(document).ready(function() {

$(".delete-image").on("click", function () {

if (confirm("Do you want to delete all checked images?")) {

var checkedImageIDs = [];

$(".delete-check-box:checked").each(function () {

var imageID = $(this).attr("id").replace("checkbox-", "");

checkedImageIDs.push(imageID);

});

$(".delete-check-box").prop("checked", false);

window.location = "./includes/delete-image.php?image=" + checkedImageIDs;

}

});

$(document).on("dblclick", ".image-card", function() {

// Show all checkboxes

$(".delete-check-box").show();

$(".add-image").hide();

$(".delete-image").show();

$(".cancel-delete").show();

});

});

function cancelDelete() {

$(".delete-check-box").hide();

$(".add-image").show();

$(".delete-image").hide();

$(".cancel-delete").hide();

}

Now Run your project on browser . if any problem with this Download the Complete source code in zip Formate by clicking the below button Download Source Code otherwise you can send Comment.

Download Source Code

conclusion

In conclusion, the multi-functional image gallery application seamlessly blends PHP, MySQL, HTML, CSS, and JavaScript to create a robust and user-friendly platform. The application’s modular design allows users to add folders, upload images, and manage content effortlessly. The dynamic interface, powered by Bootstrap and BaguetteBox.js, enhances the overall user experience.