Question

我有一个图像文件夹，从10到200，一个网页，一个jquery淡入淡出和一个读取满是图像的文件夹的PHP脚本

有没有办法让php脚本扫描文件夹，获取图像列表（在数组中？）并将其传递给jquery脚本？（第一个问题）

现在，我可以从找到的文件的结果php列表中创建一个xml文件，或者从html的列表中创建一个html <li>。有没有其他方法可以做到这一点？（问题＃2）

Answer 1

要从nickf's excellent answer继续，对于不同类型的图像，这会更加强大。

$imagesDir = 'path/to/your/images/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

echo json_encode($images);

还有其他方法可以做到这一点，但这是最简单的方法。请注意，某些文件系统区分大小写，因此请确保扩展列表与您所追求的完全匹配。

Answer 2

glob函数将扫描文件夹并返回一个数组：

$jpgs = glob("*.jpg");

然后您可以使用JSON将其传递回jQuery：

echo json_encode($jpgs);

然后只是循环结果，生成必要的HTML。

Answer 3

要生成列表项，您可以使用类似的东西（假设图像是json_encode（）的结果）：

var images = {'image1':'images/image1.jpg','image2':'images/image2.jpg'}

jQuery('#imagelist').empty();
jQuery.each(images, function() {
  jQuery('#imagelist').append('<li>'+this+'</li>');
});

并确保HTML源代码中包含无序/有序列表：

<ul id="imagelist">
  <li>No images found</li>
</ul>

Answer 4

您不能将图像作为“数据”传递到JavaScript中进行显示，至少不能以合理的方式进行显示。

Answer 5

我将在这里尝试一下

的回答亚历克斯和尼克：

<?php
  $imagesDir = 'path/to/your/images/';
  $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
  echo json_encode($images);
?>

和来自mattoc（修改）以用于supersized

jQuery('#imagelist').empty();
jQuery.each(images, function() {
  jQuery('#imagelist').append('<img src="'+this+'"/>');
});

并希望最终得到这样的东西！

<div id="supersize">
    <img  src="images/001.jpg"/>
    <img  src="images/002.jpg"/>
    <img  src="images/003.jpg"/>
</div>

对于最后一段代码，我将不得不找到一个解决方案来发送图像以“逐个”超大插件，预加载没有问题的图像错误列表

假设我得到150个图像列表......这将是一个问题，所以让插件只知道有2个图像，预加载下一个和“ajax”更改下一个图像

image001.jpg is display
... preload image002.jpg
display image002.jpg
... preload image003.jpg
on and on and on....

这一切都是动态的，直到数组结束！

从文件夹加载图像列表

5 个答案: