自动显示图像文件夹中的图像库

Question

我正在为客户制作图片库，遇到了一些麻烦。 我根本不希望客户端更改代码，因此我要尝试做的就是使它变得简单，因此他们只需要将所需的图像放入文件夹中，代码就会自动将所有内容添加到图库中。

到目前为止，我已经提出了一些解决方案，但是接下来该做什么。

我要使用的图库插件是位于此处的Magnific Popup： http ： //dimsemenov.com/plugins/magnific-popup/

问题是我需要将每个图像URL传递给插件，但是我无法对图像URL进行硬编码，因为我不知道它们将是什么。

到目前为止，我已经尝试过根据本指南使用php获取所有图像文件的路径： https : //daveismyname.com/creating-an-image-gallery-from-a-folder-of-images -自动-BP

主要问题是我不知道如何将url的php数组传递给js数组。

到目前为止，这是我的php代码：

<?php
        $dirname = "images/gallery/";
        $images = scandir($dirname);
        shuffle($images);
        $ignore = Array(".", "..");
        foreach($images as $curimg){
            if(!in_array($curimg, $ignore)) {
                images.push({src: ".$dirname.$curimg"});
            }
        }
    ?>

images是我之前定义的js数组：

 var images = [];

我该怎么做才能将我的php数组传递给js数组？ 或者，如果这不是执行此操作的最佳方法，那么我想学习。

编辑：到目前为止，这是我的代码，因为有人问过。 到目前为止，我只是试图加载图像。 我可以添加我需要的所有其他内容，并在完成此工作后使其看起来很漂亮。

<!DOCTYPE html>
<html>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css">
<head>

    <title></title>
</head>
<body>



    <ul>
        <?php
            $dirname = "images/gallery/";
            $images = scandir($dirname);
            echo json_encode($images);
            /**shuffle($images);
            $ignore = Array(".", "..");
            foreach($images as $curimg){
                if(!in_array($curimg, $ignore)) {
                    images.push({src: ".$dirname.$curimg"});

                }
            }
            */
        ?>


    </ul>

    <script type="text/javascript">
    var imgs = eval('<?php echo json_encode($images) ?>');
    for(var i = 0; i < imgs.length; i++) {

        document.write("<img src=imgs[i]>");
        document.write("imgs[i]");
        console.log(imgs[i]);
    }
    </script>



    <footer>
        <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

        <!-- Magnific Popup core JS file -->
        <script src="magnific-popup.js"></script>
    </footer>

</body>
</html>

Answer 1

要将数组从PHP传递到JavaScript，应将其转换为JSON

PHP

<?php
    $dirname = "images/gallery/";
    $images = scandir($dirname);
    shuffle($images);
    $ignore = Array(".", "..");
    $array = array();
    foreach($images as $curimg){
        if(!in_array($curimg, $ignore)) {
            $array[] = $dirname.$curimg;
        }
    }
?>

JavaScript的

   <script>    
    var array = <?php echo json_encode($aray) ?>;
    </script>

Answer 2

您有很多选择。 您应该了解可以将PHP部分放在脚本（Javascript）标记的中间，如下所示。 在下面标题的脚本部分中，创建一个新的数组，然后为每个元素创建push语句。

还请注意，主体具有一个PHP部分，该部分直接打印列表，而script标签使用在标头中创建的Javascript变量打印。

我使用了Apache服务器文档根目录中的文件列表，因为该列表适用于所有网站。 如果您在测试站点上加载页面，请查看浏览器收到的源代码。 您无需将PHP代码（介于之间的材料）放在其自己的文件中。 下面的整个文件被发送到PHP模块，因为文件类型是php。 然后，PHP模块将其之间的部分替换为其生成的材料，并将修改后的页面发送到您的浏览器。

您可以添加JSON和AJAX，但我认为那不是您的问题所在，因此没有必要。 尝试在您的服务器上运行此页面（我使用了文件名array_demo.php。），看能否理解。 它可以在我的开发服务器上正常运行，因此应该可以在您的服务器上正确运行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP demo with arrays</title>
<?php
$root = $_SERVER["DOCUMENT_ROOT"];
$list = scandir($root);
?>
<script>
<?php 
$number = count( $list);
print ("var jlist = new Array();");
foreach ($list as $item) {
if ($item == ".") { continue; }
if ($item == "..") { continue; }
print("jlist.push(\"$item\");");
}
?>
</script>
</head>
<body>
<h1>PHP demo with arrays</h1>
<p>In this example, PHP lists the contents
   of the files contained in the PHP variable $list</p>
<ul>
<?php
foreach($list as $item) {
if ($item == ".") { continue; }
if ($item == "..") { continue; }
print("<li> $item </li>");
}
?>
</ul>
<p>Printing the list via Javascript element created
   in script in header</p>
<ul>
<script>
for (var i = 0; i < jlist.length; i++) {
document.writeln("<li>" + jlist[i] + "</li>");
}
</script>
</ul>
</body>
</html>