我正在为客户制作图片库，遇到了一些麻烦。 我根本不希望客户必须更改代码，所以我想做的就是做到这一点，这样他们只需将他们想要的任何图像放入文件夹中，代码就会自动将所有内容添加到图库中。
到目前为止，我已经提出了一些解决方案，但对下一步该怎么做感到困惑。
我想使用的图库插件是位于此处的 Magnific Popup: http://dimsemenov.com/plugins/magnific-popup/
问题是我需要将每个图像 url 传递给插件，但我不能对图像 url 进行硬编码，因为我不知道它们是什么。
到目前为止，我所尝试的是基于本指南使用 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>
最佳答案
要将数组从 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>
关于javascript - 自动显示图像文件夹中的图像库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37847255/