php display all the images of a folder in a carousel

Question

I have multiple tables and for each of them there is a button that when clicked should make all the images of a specific folder related to this button title appear in a carousel.

I am able to pass the variable containing the folder name via AJAX but from there I don't know how to pass that value back to the php file and load/reload that div to display the images. Any suggestions?

PHP file:

    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 call:

$(".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;
 });

score 2 · Answer 1 · answered Jul 06 '14 at 11:42

To do what your are asking for you must do several edits on various levels

1. The AJAX Part: Change the success function behaviour to add your images to your document. We will suppose that the PHP script will return the raw images, thus nothing is easier than adding these images to your document:

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

This will add all the content returned from the PHP to your myModal div

2. The PHP Part: Here we need to make a quick PHP Script that will take the parameter passed and return all the images of your carousel in a raw format. So let's do this:

<?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. The carousel Part: Now you finally need a javascript code that will make your carousel show one image at a time. You can look for pre-made solutions like the bootstrap carousel: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php. Or make your custom own code. In order to provide a 100% full answer I will give you a custom code that would make each image fade one after each other.

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

and add the following CSS code to hide all images at the beginning

.myModal img {
    diaplay: none;
}

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

You can use this question

Pull all images from a specified directory and then display them

You need to change the folder path with something like this:

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

You need to write the response (the "markup" html) , as the "carousel" plugin is require.

$_POST in php documentation.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 06 '14 at 11:35

Mosh Feu

28,354
16
88
135

php display all the images of a folder in a carousel

2 Answers2