画像をクリックしてクリックすると新しいウィンドウが開きます

Question

私は自分のデータベースから取得した画像を表示するためにこのコードを使用します。 $ pathには画像へのパスが含まれ、$ res_pathには同じ画像のより小さなバージョンへのパスが含まれます。私がしようとしているのは、ユーザが画像をクリックしたときに$ pathに存在する画像のみを含む新しいウィンドウ（新しいタブではない）が現れることです。その後、ユーザーがその新しいポップアップウィンドウに存在するイメージをクリックすると、そのウィンドウを閉じることができます。ヒントは参考になります。 コード：

<?php 
       //unset($_SESSION['search']); 
       if(isset($_SESSION['search'])) 
       { 
        //unset($_SESSION['search']); 
        $rows = $_SESSION['search_rows']; 
        $photoArray = $_SESSION['search']; 
       } 
       else 
       { 
        $rows = $_SESSION['rows']; 
        $photoArray = $_SESSION['array']; 
       } 
       //display all photos in database 
       //$rows = $_SESSION['rows']; 
       for ($x = 0; $x < $rows; $x++) { 
        $name = $photoArray[$x][1]; 
        $username = $photoArray[$x][8]; 
        $category = $photoArray[$x][9]; 
        $description = $photoArray[$x][2]; 
        $likes = $photoArray[$x][7]; 
        $path = $photoArray[$x][3]; 
        $res_path = $photoArray[$x][4]; 
      ?> 
      <center><table style="width:80%" height = "320" align="center"> 
       <tr> 
        <th rowspan="6" width="50%"><img onclick="myFunction('<?php echo $path ?>')" src="<?php echo $res_path ?>" alt=""></img></th> 
        <td>Name: <?php echo $name; ?></td> 
       </tr> 
       <tr><td>User: <?php echo $username; ?></td></tr> 
       <tr><td>Category: <?php echo $category; ?></td></tr> 
       <tr><td>Description: <?php echo $description; ?></td></tr> 
       <tr><td>path: <?php echo $path; ?></td></tr> 
       <tr><td>Likes: <?php echo $likes; ?></td></tr> 
      </table></center> 
      <?php 
      unset($_SESSION['search']); 
      unset($_SESSION['search_rows']); 
      } 
      ?> 

そして、これが新しいウィンドウを作成し、私のjavascriptのファイルです。私はwindow.write（）を使用することによって、クリック時に新しいウィンドウを閉じるjavascript関数を書くことができると思ったが、何か間違っている。 JS：

function myFunction(data) { 
    img = new Image(); 
    img.src = data; 
    window.open(data, '_blank', 'toolbar=0,location=0,menubar=0, width = '+ img.width +', height=' + img.height); 
    //window.write(<script type="text/javascript"> $(document).click(function(e) { if (e.button == 0) {window.close(); }}); </script>); 
} 

Answer 1

@Rikudou_Senninで述べたようにあなたは、あなたが探しているツールをあなたが探しているの経験を作成できるように、いくつかのJavascriptを使用することができますが、また、ライトボックスとして知られているモーダル（あります）、もしあなたがJavascriptに慣れているなら、私はMagnific Popupを使うことをお勧めします。 JavascriptやJQueryに慣れていない場合は、CSSアプローチ、チュートリアル、これを実現するためのいくつかの例があります（here）。私はコメントとして答えを残すのが大好きでしたが、私はまだその権利がありません。