将图像提取到flexslider

Question

我正在使用一个称为flexslider的图像滑块。 目前，我正在手动为其添加图像，但是我想对其进行增强，以便可以从特定文件夹中提取图像并将其添加到其<li>元素中。 我正在寻找一个jQuery函数来做到这一点。 可能吗？

JSFIDDLE： http : //jsfiddle.net/t3sgbq5w/

HTML：

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
    <li>
      <img src="http://placehold.it/350x150" />
    </li>
  </ul>
</div>

Answer 1

否。JavaScript是一种客户端技术，无法在服务器上执行任何操作。 但是，您可以使用AJAX调用服务器端脚本（例如PHP），该脚本可以返回所需的信息。 我认为您将为此需要php或asp，这是php中的代码：

<div class="flexslider">
  <ul class="slides">
        <?php
            $folder = 'images/Galerija'; // chose folder
            $extensions = array('JPG','jpg','jpeg','gif','png'); // allowed extensions
            $slika = scandir($folder); // scan folder
            sort($slika); // sort
            foreach($slika as $key => $value) {       
                    $get_extensions = explode(".",$value);
                    $ext = $get_extensions[count($get_extensions) - 1];
                    if (in_array($ext, $extensions))
                    {
                    $title = substr($value, 0,strrpos($value,'.')); // image name
                    echo "<li><img src='".$folder."/".$value."' /></li>"; 
                    }
            }
        ?>  
  </ul>
</div>

您将得到：

<div class="flexslider">
  <ul class="slides">
    <li><img src="images/image.jpg" /></li>
    <li><img src="images/image2.jpg" /></li>
    <li><img src="images/image3.jpg" /></li>
  </ul>
</div>

Answer 2

在制作滑块之前，我遇到了这个问题，而不是手动添加新图像并编辑代码。 我写了一个PHP代码，读取了文件夹内的所有图像内容。

例如，我具有以下文件夹结构：

 > mywebsite
   - index.php
   > images(folder)
     -image1.png
     -image2.png
     -image3.png

在我的index.php中

<div class="flexslider">
  <ul class="slides">
      <?php $dir_handle='./images/'; 
foreach(array_diff(scandir($dir_handle), array( '.', '..')) as $file) { echo '<li><img src="./images/'.$file. '" /></li>'; } ?>
  </ul>
</div>

上面的PHP代码读取“ images”文件夹中的所有图像内容。 解析的HTMl应该看起来像这样

<div class="flexslider">
   <ul class="slides">
     <li><img class="" src="images/image1.png"></li>
     <li><img class="" src="images/image2.png"></li>
     <li><img class="" src="images/image3.png"></li>
   </ul>
</div>

我希望这将有所帮助。

Answer 3

可以，但是取决于要从哪里获取图像列表。 以下是一些方案：

1.您自己的服务器上的图像（仅使用JS）

如果您具有自动目录列表（即，当您访问没有index.html文件的文件夹时，将列出该文件夹中的所有文件）。 您可以对这个文件夹使用AJAX GET请求，然后解析内容以获得所有图像的数组。

这不需要任何服务器端脚本，但是它将向服务器发送2个请求（初始页面加载，然后JS将运行并获取图像）。

2.您自己的服务器上的图像（借助服务器端脚本）

编写一个简单的服务器端脚本（例如PHP），该脚本将获取文件夹中所有图像的列表，然后将其作为页面的一部分提供给客户端（例如，页面中包含的JS数组）。

这比1.快。因为只会有一个对服务器的请求。 当用户获取页面时，页面中将已经包含所有图像的列表。

3.图片不在您的服务器上（仅使用JS）

由于跨域安全性限制，通常这是不可能的。 也就是说，您不能使用AJAX请求与您的域不在同一域中的页面（除非目标服务器明确允许）。

4.图像不在您的服务器上（借助服务器端脚本）

使用这种方法，您将编写一些服务器端脚本来从另一台服务器获取图像列表。 源可以是HTML页面。 您将获得此页面并将其解析到服务器上，然后将其作为最终页面输出的一部分提供给用户。