PHP在旋转木马中显示文件夹的所有图像 - php display all the images of a folder in a carousel

php display all the images of a folder in a carousel

我有多个表，每个表都有一个按钮，当点击时，应该使与此按钮标题相关的特定文件夹的所有图像出现在轮播中。

我能够通过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;
 });

要做到你所要求的，你必须在不同的层次上做几个编辑

1。AJAX部分:更改成功函数行为以将图像添加到文档中。我们假设PHP脚本将返回原始图像，因此没有什么比将这些图像添加到文档中更容易的了:

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

这将添加从PHP返回的所有内容到myModal div

2。PHP部分:在这里，我们需要制作一个快速的PHP脚本，它将接受传递的参数并以原始格式返回您的carousel的所有图像。我们这样做:

<?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代码，它将使您的carousel每次显示一个图像。您可以寻找预先制作的解决方案，如引导旋转木马: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;
}

你可以用这个问题

从指定目录中取出所有图像，然后显示它们

你需要像这样改变文件夹路径:

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

您需要编写响应("markup" html)，因为需要"carousel"插件。