php显示旋转木马中文件夹的所有图像

时间:2014-07-06 11:13:46

标签: javascript php jquery ajax image

我有多个表格,每个表格都有一个按钮,点击该按钮会使与此按钮标题相关的特定文件夹的所有图像都出现在旋转木马中。

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

2 个答案:

答案 0 :(得分: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代码,让你的轮播一次显示一个图像。您可以查找预制旋转木马等预制解决方案: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;
}

答案 1 :(得分:0)

您可以使用此问题

Pull all images from a specified directory and then display them

您需要使用以下内容更改文件夹路径:

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

您需要编写响应(&#34;标记&#34; html),作为&#34; carousel&#34;插件是必需的。


在php文档中

$_POST