提取圖像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

回答

相關問題