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

要完成您的要求，您必须在不同级别上进行多次编辑

<强>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 代码来使您的轮播一次显示一张图像。您可以寻找预制的解决方案，例如 Bootstrap 轮播: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;
}