提取图像到 flexslider

Question

我正在使用图像滑块 known as flexslider。目前我正在手动向其中添加图像，但我想对其进行增强，以便可以从特定文件夹中提取图像并将其添加到其 <li> 元素中。我正在寻找 jQuery 函数来执行此操作。可能吗？

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），它可以 return 您需要的信息。我认为你需要 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）

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

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

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

提取图像到 flexslider

Extracting images to flexslider

javascript

jquery

flexslider