如何从图像幻灯片的文件夹中动态加载所有图像 - jquery答案

【问题标题】：How to dynamically load all of the image from a folder for an image slideshow - jquery如何从图像幻灯片的文件夹中动态加载所有图像 - jquery
【发布时间】：2012-05-01 16:57:02
【问题描述】：

基本上我所追求的是一种将文件夹（保存在服务器上）中的所有图像动态加载到我的 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 用于使网页变得疯狂）以使滑块出现。

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

【问题讨论】：

你有实现这个概念的关键吗？如果有办法告诉我们..！

标签： jquery load directory slideshow nivo-slider

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的回答！我认为在对我的问题进行一些研究后，它必须与您所说的类似。我需要为调用编写什么类型的代码？谢谢！
选择你喜欢的幻灯片式 jquery 插件，但它应该有一个回调函数（大多数插件都有）。如果发生任何事件（即一旦加载图像或到达幻灯片中的最后一个图像等），回调函数是您采取行动所必需的。在您的回调函数中，您应该为要添加的新图像添加一些代码 - 使用 AJAX 动态获取。

【解决方案3】：

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

你需要：

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

我认为当前版本的 nivo 不允许在滑块中添加新图像，因此您需要

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

【讨论】：

【解决方案4】：

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

请查看此操作方法链接http://www.startutorial.com/articles/view/dropzonejs-php-how-to-display-existing-files-on-server

【讨论】：

【解决方案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()，它返回目录中所有项目的数组。

【讨论】：