Click here to Skip to main content
15,942,710 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi everyone, I'm having a hard time making the full image display function when clicking on it. I want when I click on the image it will show full in the center of the screen. I tried a few ways but it didn't work. Hope someone can help, thanks a lot.



if(isset($_SESSION['id']) && isset($_SESSION['user_name'])){


<!DOCTYPE html>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src=""></script>
        <script src=""></script>  
        <link rel="stylesheet" href="">
        <link rel="stylesheet" type="text/css" href="css/index.css"> 
         <style type="text/css">
                color: White;
        <div class="container my-5">

                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="index.php">HANDOVER</a>
                    <li class="nav-item">
                        <a class="nav-link" href="luanphien/index.php">ALTERNATE</a>
                    <li class="nav-item">
                        <a class="nav-link" href="record/index3.php">RECORD</a>
                    <li class="nav-item">
                        <a class="nav-link" href="duty/index4.php">DUTY</a>

            <div class="alert alert-secondary" role="alert">
                <h1 class="text-center">Day shift and Night shift Handover</h1>

            <!--log out -->
            <div class="log" style="margin-left: 960px;">
                <h4>Hello, <?php echo $_SESSION['name']; ?></h4>
                <a href="logout.php">
                    <button class="btn6">Logout</button>

            <!--search -->
            <form action="" method="get">
                <div class="input-group" style="max-width: 380px; margin-left: 380px; ">               
                        <input type="text" name="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
                        <button type="submit" class="btn btn-primary">Search</button>
                        <input class="btn btn-info" type="button" value="Reset" onClick="window.location.href = 'index.php' ">              

            <form method="POST" action="excel.php">
                <a class="btn btn-primary" href="/note/create.php" role="button">New Note</a>
                <input href="/note/excel.php" type="submit" name="export" class="btn btn-success" value="Export" style="margin-left: 50px; margin-top: 0px; "/>
                <table class="table table-bordered border-dark">
                    <thead >
                        <tr style="background: #1E90FF">
                            <th>Due Date</th>
                            <th># <input type="checkbox" onClick="toggle(this)" /></th>
                        include ("includes/dbconnect.php");

                        if(isset($_GET["search"]) && !empty("search")){
                            $key = $_GET["search"];
                            $sql = "SELECT * FROM at_note WHERE station LIKE '%$key%' OR fail LIKE '%$key%' ORDER BY id DESC" ;
                            $sql = "SELECT * FROM at_note ORDER BY id DESC";
                        //read all data from database
                        $result = $connection->query($sql);

                            die("Invalid query: ".$connection->error);

                        //read data of each row
                        while($row = $result->fetch_assoc()){
                            echo "
                                <td><img src='images/$row[photo]' width='80' height='80'/></td>
                                    <a class='btn btn-primary btn-sm' href='edit.php?id=$row[id]'>Edit</a>
                                    <a  onClick=\"javascript: return confirm('Please confirm deletion');\" class='btn btn-danger btn-sm' href='delete.php?id=$row[id]'>Delete</a>
                                    <input type='checkbox' name='xport[]' value='{$row['id']}'>



    header("location: login.php");

<!--ALL checkbox -->
<script language="JavaScript">
    function toggle(source) {
    checkboxes = document.getElementsByName('xport[]');
    for(var i=0, n=checkboxes.length;i<n;i++) {
        checkboxes[i].checked = source.checked;

What I have tried:

I've tried following a few tutorials on the internet but none of them work.
Updated 7-Jan-23 22:12pm
Richard Deeming 5-Jan-23 10:45am    
What have you tried, and where are you stuck?

Perhaps you're looking for something like Bootstrap Lightbox[^]?

1 solution

Make a css class u like e.g =>
.enlargedImage {
transition: ;
transform: scale(2); /*2x , 3x anything u like*/

And add this class to that image


If u want the image to fit screen
Than use
There is an webapi
Named requestFullScreen

What u have to do is

If its not working then use prefixes like moz webkit o etc...
Like this

To exit fullscreen
Use this

Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900