提取图像flexslider

我使用的图像滑块known as flexslider。目前，我手动添加图像，但我想提高它使图像可以从一个特定的文件夹中提取并添加到其<li>元素。我正在寻找一个jQuery函数来做到这一点。可能吗？提取图像flexslider

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>

来源

2015-07-11 mikeb

这个php解决方案只会在你将php文件上传到服务器时起作用，如果你不想在你的电脑上运行它，你必须安装xampp或类似的东西。 –

号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>

来源

2015-07-11 07:45:39

冯伊特拉，我能做些什么来使用它我的HTML文件 – mikeb

任何方式，我可以通过电子邮件发送我的代码来检查它 – mikeb

我有xampp，但问题是我不知道如何整合您的代码，并保持我的滑块设计 – mikeb

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

例如，我有这样的文件夹结构：我的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代码读取所有图像内容里面的 “图片” 文件夹内

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

。在解析的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>

我希望这将有助于。

来源

2015-07-11 07:53:23

亲爱的我不知道如何将它添加到HTML文件，我从来没有与PHP – mikeb

任何帮助吗？ – mikeb

@mikeb，只是复制上面的代码，但改变文件夹的位置，然后将.html文件保存为.PHP文件 –

这是可能的，但它取决于你想从图像列表。这里有几个可能性：

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

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

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

2.图片自己的服务器上（与服务器端脚本的帮助）

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

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

3.图片不是你的服务器上（使用JS只）

这通常是因为跨域安全限制不可能的。即您不能使用AJAX请求与您不在同一个域中的页面（除非目标服务器明确允许）。

4.图片不是你的服务器上（与服务器端脚本的帮助）

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

来源

2015-07-11 08:01:31 alan0xd7

提取图像flexslider

回答

相关问题