【解決方法】画像を境界線内に表示し、境界線の外側をクリックして画像を閉じる方法


亡くなった友人からこのスクリプトをもらいました

画像を日時順に並べて表示します。 親指をクリックすると正常に機能しますが、画像を境界線内に表示し、境界線の外側をクリックして画像を閉じたいと考えています。

私が試したこと:

CSS
.column {
  float: left;
  padding: 3px;
}
.row {
  display: flex;
}
/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

PHP
echo '';
echo '';
echo '';
echo '';
echo '<title>Last received images from the Me';
echo '';
echo '';
echo '';
echo '';
echo '<p align="center"><font size="6"> Received images from the Meteor m-2      ';
echo ' </font></p>';
echo '<p align="center"><font size="6"> This week      ';
echo ' </font></p>';

echo '<p align="center"><font size="2">(click on a image to view in real size)</font></p>';

echo '';

echo '';
echo '';
echo '';
echo '';
echo '';
?>

 $file, "large_name" => $large_filename,"realdate_created" => $realdate
                                    , "weekday_number" => $weekday_number, "weekday" => $weekday 
                                    , "file_date" => $filedate, "realdate_created" => $realdate, "realdate_unix" => $realdate_unix);
                
                $counter++;
            }
        }
    }
    closedir($handle);
    
    $columns = array_column($fileNames, 'realdate_unix');
    array_multisort($columns, SORT_DESC, $fileNames);

    $loop_counter = 0;
    $weekday_number_loop = 99;

    foreach ($fileNames as &$value) {
        if($fileNames[$loop_counter]['weekday_number'] <> $weekday_number_loop){
            $weekday_number_loop = $fileNames[$loop_counter]['weekday_number'];
            echo "<div class="row">";
            echo "<div class="column">";
            echo $fileNames[$loop_counter]['weekday']." ".$fileNames[$loop_counter]['file_date'];
            echo "</div>";            
        
        
        }

        echo "<div class="column">";
        echo "<a href="".$large_image_dir.$fileNames[$loop_counter][" target="_blank">";
        echo "";
        echo "</a>";
        echo "</div>";          
        
        $loop_counter++;   

        if(count($fileNames)-1 >= $loop_counter){
            if($fileNames[$loop_counter]['weekday_number'] <> $weekday_number_loop){
                echo "</div>";
            }
        }
    }
    echo "";
 
}else {
    echo "<p>There is an directory read issue , no received images yet </p>";
}
?>

解決策 1

PHP は、ユーザーが望むものとは何の関係もありません。サーバー側ツールとして画像を取得し、ページに投稿するだけです。 サムネイルを表示し、ユーザーがサムネイルをクリックして大きな画像を開き、表示されたら閉じるボタンまたは大きな画像の外側の境界線をクリックすると、画像 div が閉じる CSS 解決策を探しています。

コードペンホーム
CSS クリックするとライトボックス内の画像が拡大されます
[^]

コメント

タイトルとURLをコピーしました