In the same directory I have two php documents and a folder called "gallery". This folder contain a lot of images files. I send a variable from the first page with the folder name. In the second page I open the directory and read directory content with glob function. I have tried to send images back to the first page again but images do not appear properly. I take a tutorial from this page: http://www.kvcodes.com/2013/12/get-all-images-from-a-directory-dynamically-php-jquery-ajax/
gallery.php
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>Gallery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//start jquery
$(document).ready(function(){
//submit from form
$('form').submit(function(e) {
e.preventDefault();
//start ajax with jquery
$.ajax({
url: "directory.php",
type: "POST",
data: {'var': $('form input[name="var"]').val()},
dataType: "HTML",
success: function( data ) {
$('body').append(data);
},
error: function(jqXHR, data ) {
alert ('Ajax request Failed.');
}
});
});
});
</script>
</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>
<div class="form">
<!--directory variable-->
<?php
$a = "gallery";
?>
<form action="directory.php" method="post">
<input type="hidden" name="var" value="<?php echo $a; ?>">
<input type="submit" name="submit" value="gallery">
</form>
</div>
<!--to display ajax result with colorbox-->
<div class="gallery">
</div>
</body>
</html>
directory.php
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>image directory</title>
</head>
<body>
<?php
//get the path of images directory
$variable = $_POST['var'];
$img_dir = $variable . "/";
//loop to bring all images inside directory
foreach(glob($img_dir . '*.jpg') as $images) {
echo '<img src="'.$img_dir.$images.'">';
}
?>
</body>
</html>
Any guidance would be appreciated.
Thanks in advance.