How to acces folder in GitHub repository to read all files?

Question

Trying to access a folder on my GitHub repository with JS. Works locally but not on Github Pages.

I'm trying to access a folder in my repository to get all files that are included. The code works perfectly on my computer but not on GitHub Pages.

This is the folder I'm trying to access: https://if4x.github.io/images/photography/page/

This is the JS code that I'm using

var folder = "../images/photography/page";
        var folder = "../images/photography/page";

    $.ajax({
        url: folder,
        success: function (data) {
            $(data).find("a").attr("href", function (i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) {
                    // Construct the image URL
                    var imageUrl = val;

                    // Make an AJAX request to load the content of the corresponding .txt file
                    $.ajax({
                        url: val.replace(/\.(jpe?g|png|gif)$/, ".txt"),
                        success: function (txtData) {
                            var Text = txtData.trim().split("\n"); // Trim to remove leading and trailing spaces

                            // Append the image with alt text
                            $(".gallery.content").append("<div class='gallery entry'><div class='image-container'><img src=" + val + " alt=" + Text[0] + "></div><div class='text-container'><h2>" + Text[1] + "</h2><p>" + Text.splice(2) + " </p></div></div>");
                        },
                        error: function (err) {
                            console.error("Error loading .txt file:", err);
                        }
                    });
                }
            });
        }
    });

Thanks!

Answer 1

Relative paths will not work on Github Pages for your use case since the Github pages is deployed on a URL different from your repository URL. Change the folder value to https://if4x.github.io/images/photography/page/.