php顯示旋轉木馬中某個文件夾的所有圖像

Question

我有多個表格，並且每個表格都有一個按鈕，單擊該按鈕時應使與該按鈕標題相關的特定文件夾的所有圖像都出現在旋轉木馬中。

我能夠通過AJAX傳遞包含文件夾名稱的變量，但從那裏我不知道如何將該值傳回到PHP文件並加載/重新加載該div來顯示圖像。 有什麼建議嗎？

PHP文件：

echo "<button method='post' class='btn view' name='view' data-toggle='modal' href='.myModal' value='$a' >View Images</button>"; 

/* some code*/ 

<div class='myModal'> 
/*some code to display images of a folder in a carousel, the folder name of which is in data of ajax call*/ 
</div> 

AJAX調用：

$(".view").click(function() { 
    $.ajax({ 
     url:"view.php", 
     data:{view:$(this).val()}, 
     type:"POST", 
     success:function(data){ 
     console.log(data); 
     if (data!=""){ 
      alert(data); 
     } 
     }, 
     error:function(data){ 
     alert("Network ERROR"); 
     } 
    }) 
    return false; 
}); 

Answer 1

您可以使用此問題

Pull all images from a specified directory and then display them

你需要像這樣的東西來改變文件夾的路徑：

$dirname = "media/images/".$_POST["view"]."/"; 

您需要編寫響應（「標記」html），因爲「carousel」插件是必需的。

---

$_POST在php文檔中。

Answer 2

要怎麼做你所要求的，您必須對各級

1. AJAX部分幾個編輯： 更改成功函數的行爲將圖像添加到您的文檔。我們將假設PHP腳本將返回原始圖像，因此沒有什麼比將這些圖像到您的文檔更易於：

success:function(data){ 
    $(".myModal").append(data); 
} 

這將增加所有內容從PHP返回到您的myModal div

2. PHP部分： 在這裏，我們需要製作一個快速的PHP腳本，它將傳遞參數並以原始格式返回您的傳送帶的所有圖像。因此，讓我們做到這一點：

<?php 
/* First check the passed parameter */ 
if (!isset($_POST['view']) 
    die("Error, no parameter specified"); 

/* Then check if the passed parameter corresponds to a directory */ 
if (!is_dir("./" . $_POST['view'])) 
    die("No directory found"); 

/* Then list all the images from the directory pointed my the parameter */ 
$images = scandir("./" . $_POST['view']); 

/* And return them */ 
foreach($images as $i) { 
    if (is_file("./" . $_POST['view'] . "/" . $i)) 
     echo '<img src="http://your-domain.com/baseurl/'.$i.'" />"; 
} 
?> 

3.轉盤部分： 現在你終於需要一個JavaScript代碼，這將使你的轉盤顯示一個圖像在同一時間。您可以查找預製解決方案，如自舉輪播：http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php。 或者讓你自定義自己的代碼。爲了提供100％完整的答案，我會給你一個自定義的代碼，使每個圖像相互褪色。

$(".myModal img").each(function(index) { 
    $(this).delay(700*index).fadeIn(300); 
    $(this).delay(700*index +300).fadeOut(300); 
}); 

，並添加以下CSS代碼隱藏所有圖像開頭

.myModal img { 
    diaplay: none; 
}