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.

index.php

<?php

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

?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Handover</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/index.css"> 
         <style type="text/css">
            .nav-link{
                color: White;
            }
         </style>
    </head>
    <body>
        <div class="container my-5">

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

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

            
            <!--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>
                </a>
            </div>

            <!--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' ">              
                </div>
            </form>

            <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; "/>
            
                <br/><br/>
                <table class="table table-bordered border-dark">
                    <thead >
                        <tr style="background: #1E90FF">
                            <th>No</th>
                            <th>Date</th>
                            <th>Type</th>   
                            <th>What</th>
                            <th>Where</th>
                            <th>Who</th>
                            <th>When</th>
                            <th>Due Date</th>
                            <th>Status</th>
                            <th>Others</th>
                            <th>Photo</th>
                            <th># <input type="checkbox" onClick="toggle(this)" /></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        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" ;
                        }else{
                            $sql = "SELECT * FROM at_note ORDER BY id DESC";
                        }
                        //read all data from database
                       
                        $result = $connection->query($sql);

                        if(!$result){
                            die("Invalid query: ".$connection->error);
                        }

                        //read data of each row
                        $no=1;
                        while($row = $result->fetch_assoc()){
                            echo "
                            <tr>
                                <td>$no</td>
                                <td>$row[station]</td>
                                <td>$row[fail]</td>
                                <td>$row[reason]</td>
                                <td>$row[fix]</td>
                                <td>$row[note]</td>
                                <td>$row[why]</td>
                                <td>$row[how]</td>
                                <td>$row[due_date]</td>
                                <td>$row[resul]</td>
                                <td><img src='images/$row[photo]' width='80' height='80'/></td>
                                <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']}'>
                                </td>
                            </tr>
                            ";
                            $no++;
                        }

                        ?>  

                    </tbody>
                </table>
            </form>
        </div>
        
    </body>
</html>

<?php
}else{
    header("location: login.php");
    exit();
}
?>

<!--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;
    }
    }
</script>


What I have tried:

I've tried following a few tutorials on the internet but none of them work.
Posted
Updated 7-Jan-23 22:12pm
Comments
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


But


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

What u have to do is
In JS
ImageElement.requestFullScreen()

If its not working then use prefixes like moz webkit o etc...
Like this
ImageElement.webkitRequestFullScreen()

To exit fullscreen
Use this

ImageElement.exitFullScreen()
 
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