Get numbered files with ajax for slideshow

Get numbered files with ajax for slideshow

I have a two pages document and a folder with several sequenitially numbered image files. I'm making a slideshow with an ajax request between these pages. I'm using the ajax post method with json encode. What I want to know is how to get a numbered files in an ajax request (with glob function and json encode) to put them in divs to make a slideshow with html, ccs and javascript . I've tried with this but it doesn't work.

page1.php
  2. <!DOCTYPE HTML>
  3. <html lang="">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.     </head>
  7.     
  8. <body>
  9.     <div class="content">
  10.         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis mi, pellentesque at scelerisque eu, consectetur quis felis. Aliquam mollis</p>
  11.     </div>
  12.     
  13.     <a class="gallery" href="page2.php" data-var="dir/1/">
  14.         FOLDER 1
  15.     </a>
  16.     
  17.     <!--count all folder elements-->
  18.     <?php 
  19.     $path = "dir/1/";
  20.     $files = scandir($path);
  21.     $count = count($files)-2;
  22.     ?>
  23.     
  24.     <?php
  25.     for($a = 0; $a < $count; $a++) :
  26.     ?>
  27.     
  28.     <!--slideshow divs-->
  29.     <div class="mySlides".<?php echo $a; ?>>
  30.         <div class="numbertext">
  31.             <?php echo $a."/".$count; ?>
  32.             <div class="images"></div>
  33.         </div>
  34.     </div>
  35.     <?php endfor; ?>    
  36.     
  37.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  38.     <script>
  39.         $('.gallery').click(function (event) {
  40.             var data = this.dataset;
  41.             event.preventDefault();
  42.             
  43.             $.ajax({
  44.                 url: "page2.php",
  45.                 data: data,
  46.                 type: "POST",
  47.                 dataType: "json",
  48.                 success: function(response) {
  49.                     var img = "";
  50.                     var iarray = [];
  51.                     $.each(response, function(i, val) {
  52.                         //response with img src tag
  53.                         img += '<img src="'+val+'"></img>';
  54.                         //add elements into array and display this in html divs
  55.                         iarray.push($('.images', img).html());
  56.                     });
  57.                 }
  58.             });
  59.         }
  60.     </script>  
  61. </body>
  62. </html>
    63.       
page2.php
  2. <?php
  3. header('Content-Type: application/json');
  4. $variable = $_POST['var'];
  5. echo json_encode (glob($variable.'*.jpg'));
  6. ?>

Thanks in advance.