从文件夹加载图像列表

I have a folder of images, from 10 to 200, a webpage, a jquery fade and a php script that read folder full of images

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

Is there any way to make the php script scan a folder, get a list of image (in an array ?) and pass it to jquery script ? (first question)

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

Now, i can make a xml file from the result php list of files found or make a html <li> from the list in the html. is there ANY other way to do that ? (question #2)

现在,我可以从找到的文件的结果php列表中创建一个xml文件,或者从html的列表中创建一个html

。有没有其他方法可以做到这一点? (问题2)

5 个解决方案

#1

To continue on from nickf's excellent answer, this is slightly more robust for images of different types.

从nickf的优秀答案继续,这对于不同类型的图像来说稍微强一些。

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

echo json_encode($images);

There are other ways of doing this, but this is the easiest. Note some file systems are case sensitive, so ensure the extension list is matching precisely what you're after.

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

#2

the glob function will scan a folder and return an array:

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

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

you can then pass it back to jQuery by using JSON:

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

echo json_encode($jpgs);

it'd then just be a case of looping through the result, generating the necessary HTML.

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

#3

To generate the list items you could use something like this (assuming images is the result of json_encode()):

要生成列表项,您可以使用类似的东西(假设图像是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>');
});

And make sure you have an unordered/ordered list in the HTML source:

并确保HTML源中有一个无序/有序列表:

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

#4

You can't just pass images as "data" into a JavaScript for display, at least not in a reasonable manner.

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

#5

I will give a try here with answer from many

我将在这里尝试一下许多人的回答

Alex and Nick :

亚历克斯和尼克:

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

and from mattoc (modify) to get used for the supersized

并从mattoc(修改)来使用超大型

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

and hope to get something like that at the end !

并希望最终得到类似的东西!

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

for the final piece of code, i will have to find a solution to send image to supersize plugin "one by one" with preloading without problem with bug list of images

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

Let supposed i get 150 images list... it will be a problem, so letting the plugin just know there is 2 images, preload the next and "ajax" change the next image

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

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

all this dynamicly until the end of the array !

这一切都是动态地直到阵列结束!

#1