How to Replace ajax to glob in getting images from directory

Question

I have html page that displays an image from a directory. The script counts all images currently in directory and display the latest, left and right button will navigate next or previous image from the array. The function getfiles() gives me a headache and a 403. My solution is to use glob, the problem is how can I integrate a php function to work with my current setup?

My current script (getfiles ajax NOT working):

<script>
$(function() {
    var baseUrl = "./Cam02/";
    var pictureIndex = 0;
    var pictures = [];
    
    function getFiles() {
        $.ajax(baseUrl).success(function(data) {
            pictures = [];
            $(data).find("a[href]").each(function() {
                var href = $(this).attr('href');
                if (href.indexOf('.jpg') > 0 || href.indexOf('.png') > 0 || href.indexOf('.jpeg') > 0) {
                    pictures.push(href);
                }
            });
            console.log(pictures.length + " pictures loaded!");
            changePicture(0);
        });
    }
    function changePicture(indexOffset) {
        pictureIndex += indexOffset;
        if (pictureIndex >= pictures.length) {
            pictureIndex = 0;
        } else if (pictureIndex < 0) {
            pictureIndex = pictures.length - 1;
        }
        $('#viewer').attr('src', baseUrl + pictures[pictureIndex]);
        $('#info').text((pictureIndex + 1) + "/" + pictures.length);
    }

    getFiles();
    
    var playbackview;
    
    $('#btnLeft').click(function() {
    $("#btnPlayit").show();
    clearInterval(playbackview);
    var left = -1;
    changePicture(left); return false;
    });

    $('#btnPlayit').click(function() {
    playbackview = setInterval(function(){
    var left = -1;
    changePicture(left); return false;
    },500); <!-- 1 second = 1000 -->
    $(this).hide();
    });

    $('#btnRight').click(function() {
    $("#btnPlayit").show();
    clearInterval(playbackview);
    var right = 1;
    changePicture(right); return false;
    });
    
    $(document).keydown(function(e){
        var left = -1, right = 1;
        if (e.keyCode == 37) {
           changePicture(left); return false;
        } else if (e.keyCode == 39) {
            changePicture(right); return false;
        }
    });
    
});
</script>

php I want to use:

<?php

$dir = "./Cam02/*.jpg";
$images = glob( $dir );

?>

Answer 1

From my understanding you are listing the images using the Apache directory listing function, and you are getting a 403 error because the directory listing is disabled on the desired directory. You can verify that by navigating to that directory with the browser; if you still get a 403 then a simple solution could be to add a file named ".htaccess" within that directory with the following content:

Options +Indexes

If instead you can list the directory using the browser, maybe the server is rejecting some default header of the ajax function; to investigate this you have to look at the Apache error log.

A more robust solution is to develop a simple webservice to list the directory content, lets say you call it "list_images.php" with the following content:

<?php
$dir = "./Cam02/*.jpg";
$images = glob( $dir );
header('Content-Type: application/json');
echo json_encode($images);
?>

then you have to change the getFiles function this way:

function getFiles() {
    $.ajax("list_images.php").success(function(data) {
        pictures = JSON.parse(data);
        console.log(pictures.length + " pictures loaded!");
        changePicture(0);
    });
}