如何动态加载文件夹中的所有图像以进行图像幻灯片放映 - jquery

Question

基本上我所追求的是一种动态加载文件夹（保存在服务器上）的所有图像到我的nivo滑块的方法。目前，nivo滑块中的脚本要求我单独引用每张照片。例如：

<div class="slider-wrapper theme-default">
        <div class="ribbon"></div>
        <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" alt="" />
            <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
            <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
            <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
        </div>

（上面的代码是从html文件中提取出来的）。

由于新手用户将维护该网站，因此每次他们添加或删除目录中的照片时，他们都无法进入并手动更改代码。

此时我不介意在页面加载时是否加载了全部或部分照片。

我在找到有关如何解决此问题的任何信息时遇到了一些麻烦。一直是我能找到的最近的来源（How to load images dynamically (or lazily) when users scrolls them into view）。

虽然说实话，我对jquery（以及一般的编程）很陌生，并且正在努力解决一些基础问题。因此，在为我回答问题时，请采取假人的方法。

目前我有图像文件夹（存储所有图像），jscript文件和存储在服务器上的css文件。然后我将html添加到webpart（因为sharepoint用于疯狂网页）以使滑块出现。

代码可以在客户端完成，还是需要在服务器端和客户端完成？

Answer 1

浏览器等客户端无法知道服务器上目录中的所有文件。除非启用目录列表，在大多数情况下这被视为安全问题，否则我会建议..

1. 检查here如何为tomcat启用目录列表。如果您确实启用了此功能，请使用ajax调用点击目录路径，搜索响应中的所有超链接，过滤那些扩展名为jpg的链接并将链接传递给插件。
2. 更好的是，在服务器端编写服务以动态获取此特定目录中的文件列表（使用正确的身份验证，但仍然是一个问题），点击服务获取文件列表并将其传递给插件。

Answer 2

我建议使用ajax调用将所有图像路径加载到javascript数组中（这需要服务器端编程，图像文件夹必须在服务器上）。然后你可以谷歌任何幻灯片jquery插件来创建一个很棒的幻灯片。

Answer 3

我做了同样的事情，并对nivo滑块进行了一些更改，使其工作。

你需要：

• 编写一些服务器端代码以从服务器文件夹中检索所有图像。只是路径，所以你可以将它添加到图像dom对象
• 写一些javascript ajax代码来调用服务器端代码，然后解析响应并创建图像对象然后添加到dom

我不认为nivo的当前版本允许在需要时添加滑块添加新图像

• 更新nivo代码以允许添加新图像

Answer 4

可以使用php和dropzone.js从目录服务器检索图像

请检查这个如何链接http://www.startutorial.com/articles/view/dropzonejs-php-how-to-display-existing-files-on-server

Answer 5

这会将图像名称放在Javascript数组中：

$dir = 'images/c-data/' . $result; //set the working directory
$pics = scandir($dir);
unset($pics[0], $pics[1]); //first and second ellement are the "."".." , get rid of them
$string = '<script type ="text/javascript">var images_' . $result . ' =[ ';
foreach ($pics as $key => $item) {
    $string .= '"' . $item . '",';
}
echo substr($string, 0, -1) . "];</script>";

这将在它们循环时回显它们：

$path = 'images/c-data/';
$results = scandir($path);
$dirArray = array();
unset($results[0], $results[1]); //first and second ellement are the "."".." , get rid of them
foreach ($results as $result) {
    echo 'Image' . $result . ', ';
}

在这两种情况下，我们都使用php scandir()，它返回目录中所有项目的数组。