javascript - 将图像提取到 flexslider

Question

我正在使用图像 slider known as 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>