Replace ajax to glob in getting images from directory-CodePudding

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 );

?>

CodePudding user response：

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);
    });
}

CodePudding user response：

I think your php is only searching the files matched with the string given.(read more about what is returned by glob function here) You can can count the items in the array $images then pass that response back your script:

echo count($images);

But for your case you want to use the image names to load the images. so you will create a variable and fill it with the file path details:

$imagesData="";
foreach($images as $key=> $value){
    $imageData.=$value.",";
}
echo $imageData;

this will create a string of image file paths. now from your js, you will create an array of the images by using split() function:

function getFiles() {
        $.ajax(baseUrl).success(function(data) {
             pictures = data.split(",");
            console.log(pictures.length   " pictures loaded!");
            changePicture(0);
        });
    }