Question

平我有这个代码，从文件夹中取出图片并在页面上显示它们。但是当我点击图像时，它将在同一页面上打开。所以我必须单击一页... 但我希望当我点击n图像时，图像会弹出一个弹出窗口，我可以点击那里＆＃34;返回或下一个＆＃34;看到其他图像。我必须在代码中改变什么？

非常感谢

<div id="galima">
  <?php
    $folder_path = 'gallery/images_nature/'; //image's folder path
     $num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);
     $folder = opendir($folder_path);

        if($num_files > 0)
           {
            while(false !== ($file = readdir($folder))) 
                 {
                   $file_path = $folder_path.$file;
                   $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
        if($extension =='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') 
           {
      ?>
       <a href="<?php echo $file_path; ?>"><img src="<?php echo $file_path; ?>" height="250"></a>

 <?php
      }
    }
 }
  else
    {
       echo "the folder was empty !";
    }
   closedir($folder);
 ?>

Answer 1

您需要的是Lightbox，但是这里我给出一个在js中创建新窗口的简单示例。可能会让您更好地理解在代码中实现它。

将此代码复制到任何html文件中并查看输出。我不知道为什么我不能将其添加到代码段-_-

中

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <a href="">
            <img src="http://images5.fanpop.com/image/photos/31300000/beautiful-heart-pic-beautiful-pictures-31395948-333-500.jpg" width="50" height="50" alt="Click to enlarge"
            onclick="enlarge(this)" />
        </a>
        <a href="">
            <img src="https://s-media-cache-ak0.pinimg.com/736x/0e/38/60/0e38604bb8c49acf8eb409dc5f9caa15.jpg" width="50" height="50" alt="Click to enlarge" onclick="enlarge(this)" />
        </a>


    <script type="text/javascript">
        var windowFeatures = "'menubar=no,status=no,scrollbars=no,toolbar=no,resizable=no,width=500,height=350,left=400,top=100'";

        function enlarge(x)  {
            window.open(
                x.src,
                'largeimage',
                windowFeatures
                );
        }
    </script>
    </body>


</html>

Answer 2

您可以使用目标_blank在新页面中打开图像，如下所示

<a href="<?php echo $file_path; ?>" target="_blank">...</a>

用弹出窗口显示图像

2 个答案: