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

Question

基本上我想要的是一种将文件夹(保存在服务器上)中的所有图像动态加载到我的 nivo slider 中的方法。目前，nivo slider 中的脚本要求我单独引用每张照片。例如:

<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 添加到 Web 部件(因为共享点用于修改网页)以使 slider 出现。

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

Answer 1

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

1. 检查here例如，如何为 tomcat 启用目录列表。如果您启用此功能，请使用 ajax 调用访问目录路径，搜索响应中的所有超链接，过滤扩展名中包含 jpg 的超链接，并将链接传递给插件。

2. 更好的是，在服务器端编写一个服务来动态获取此特定目录中的文件列表(使用正确的身份验证，但这仍然是一个问题)，点击该服务来获取文件列表并传递它们到插件。