3

基本上我所追求的是一种将文件夹（保存在服务器上）中的所有图像动态加载到我的 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文件中提取出来的）。

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

在这一点上，我不介意页面加载时是否加载了所有或部分照片。

我在查找有关如何解决此问题的任何信息时遇到了一些麻烦。我能找到的最接近的来源之一是在这个网站上（当用户将图像滚动到视图中时如何动态（或延迟）加载图像）。

虽然老实说，我对 jquery（和一般编程）很陌生，并且正在努力学习一些基础知识。因此，在为我回答问题时，请采取假人的方法。

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

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

4

5 回答 5

0

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

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

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

于 2012-04-20T05:21:47.070 回答
0

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

你需要：

  • 编写一些服务器端代码以从服务器文件夹中检索所有图像。只是路径，因此您可以将其添加到图像 dom 对象

  • 编写一些 javascript ajax 代码来调用服务器端代码，然后解析响应并创建图像对象，然后添加到 dom

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

  • 更新 nivo 代码以允许添加新图像
于 2012-05-10T02:45:35.600 回答
0

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

于 2012-04-20T06:42:38.797 回答
0

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

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

于 2013-12-31T11:52:19.337 回答
0

这会将图像名称放入 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()which 返回目录中所有项目的数组。

于 2015-11-11T14:37:03.583 回答