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

I am working on an image gallery for a client and have run across some trouble. I don't want the client to have to change code at all so what I'm trying to do is make it so they simply have to put whatever images they want into the folder and the code will automatically add everything to the gallery.

我正在为客户工作一个图像库,并遇到了一些麻烦。我不希望客户端根本不需要更改代码,因此我要做的就是使它们只需将所需的任何图像放入文件夹中,代码就会自动将所有内容添加到库中。

I have come up with a few solutions so far but am stuck with what to do next.

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

The gallery plugin I want to use is Magnific Popup located here: http://dimsemenov.com/plugins/magnific-popup/

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

The problem is that I need to pass every image url to the plugin but I can't hard code the image urls because I have no idea what they will be.

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

What I've tried so far is based off this guide to get the path for all of the image files using php: https://daveismyname.com/creating-an-image-gallery-from-a-folder-of-images-automatically-bp

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

The main issue is that I don't know how to pass a php array of urls to a js array.

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

This is my php code so far:

到目前为止这是我的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 is a js array that i defined previously:

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

 var images = [];

What can I do to pass my php array to js array? Or if this isn't the best method to do this, I would love to learn.

我该怎么做才能将我的php数组传递给js数组?或者,如果这不是最好的方法,我很乐意学习。

Edit: Here is my code so far since some were asking. As of now I'm just trying to get the images to load. I can add everything else I need and make it look pretty after I get this working.

编辑:这是我的代码,因为有些人问。截至目前,我只是试图让图像加载。我可以添加我需要的所有其他内容,并让它看起来很漂亮。

<!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>

2 个解决方案

#1

To pass an array from PHP to JavaScript you should convert it to JSON

要将数组从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>

#2

You have a number of choices. You should understand that you can put the PHP section in the middle of a script (Javascript) tag as shown below. In the script section in the header below, a new array is created, and then push statements are created for each element.

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

Please also note that the body has a PHP section that prints the list directly and a script tag that prints using the Javascript variable created in the header.

还请注意,正文有一个PHP部分,可直接打印列表,还有一个脚本标记,使用标题中创建的Javascript变量进行打印。

I used the list of files in the document root of the Apache server because that should work on all web sites. If you load the page on your test site, look at the source code that the browser receives. You don't put the PHP code (material between ) in its own file. The entire file below is sent to the PHP module because the file type is php. The PHP module then replaces the sections between with the material it generates and sends the modified page to your browser.

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

You can add JSON and AJAX, but I don't think that that is where your problem lies, and it isn't necessary. Try running this page on your server (I used the name array_demo.php for the file.) and see if you can understand it. It runs fine on my development server, so it should run correctly on yours.

您可以添加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>

#1