【解決方法】画像クリックで拡大します

[ad_1]

皆様こんにちは、クリック時のフル画像表示機能を作るのに苦労しております。画像をクリックすると、画面の中央に完全に表示されます。いくつかの方法を試しましたが、うまくいきませんでした。誰かが助けてくれることを願っています、どうもありがとう。

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>

私が試したこと：

インターネットでいくつかのチュートリアルに従ってみましたが、どれも機能しません。

解決策 1

css クラスを u のように作成します。例 =>
.拡大画像 {
遷移： ;
変換: スケール (2); /*2x , 3x あなたの好きなもの*/
}

そして、このクラスをその画像に追加します

だが

画像を画面に合わせたい場合
使うより
この
ウェブアピがある
名前付き requestFullScreen

あなたがしなければならないことは
JSで
ImageElement.requestFullScreen()

機能しない場合は、moz webkit o などのプレフィックスを使用してください…
このような
ImageElement.webkitRequestFullScreen()

フルスクリーンを終了するには
これを使って

ImageElement.exitFullScreen()

[ad_2]