Question

我正在为客户创建一个图片库，并遇到了一些麻烦。我根本不希望客户端必须更改代码，因此我尝试做的就是让它们只需将所需的任何图像放入文件夹中，代码就会自动添加所有内容。画廊。

到目前为止，我已经提出了一些解决方案，但我仍然坚持下一步该做什么。

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

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

到目前为止我所尝试的是基于本指南，使用php获取所有图像文件的路径： https://daveismyname.com/creating-an-image-gallery-from-a-folder-of-images-automatically-bp

主要问题是我不知道如何将php数组的url传递给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部分，可以直接打印列表，还有一个脚本标记，可以使用标题中创建的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>

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

2 个答案: