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
- <!DOCTYPE HTML>
- <html lang="">
- <head>
- <meta charset="UTF-8">
- </head>
-
- <body>
- <div class="content">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis mi, pellentesque at scelerisque eu, consectetur quis felis. Aliquam mollis</p>
- </div>
-
- <a class="gallery" href="page2.php" data-var="dir/1/">
- FOLDER 1
- </a>
-
- <!--count all folder elements-->
- <?php
- $path = "dir/1/";
- $files = scandir($path);
- $count = count($files)-2;
- ?>
-
- <?php
- for($a = 0; $a < $count; $a++) :
- ?>
-
- <!--slideshow divs-->
- <div class="mySlides".<?php echo $a; ?>>
- <div class="numbertext">
- <?php echo $a."/".$count; ?>
- <div class="images"></div>
- </div>
- </div>
- <?php endfor; ?>
-
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
- <script>
- $('.gallery').click(function (event) {
- var data = this.dataset;
- event.preventDefault();
-
- $.ajax({
- url: "page2.php",
- data: data,
- type: "POST",
- dataType: "json",
- success: function(response) {
- var img = "";
- var iarray = [];
- $.each(response, function(i, val) {
- //response with img src tag
- img += '<img src="'+val+'"></img>';
- //add elements into array and display this in html divs
- iarray.push($('.images', img).html());
- });
- }
- });
- }
- </script>
- </body>
- </html>
page2.php
- <?php
- header('Content-Type: application/json');
- $variable = $_POST['var'];
- echo json_encode (glob($variable.'*.jpg'));
- ?>
Thanks in advance.