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

Thanks in advance.