CatPics

I like my cats. PHP scans the directory, AJAX loads the images. That's it.

What it is

My cats

This is a photo gallery for my cats. PHP scans the media/images/ directory with glob(), returns the file list as JSON, and jQuery AJAX picks it up and appends the images. Drop a new photo in the folder and it shows up on the next load. No database, no CMS, no build step.

It's old-school web tech — $(window).load(), jQuery AJAX, inline PHP — and it works fine. The point was never the stack, it was having somewhere to put pictures of my cats.

The code

catpics.php — image list endpoint PHP 
<?php
$phpFileList = glob("./media/images/*");
echo json_encode($phpFileList);
?>
AJAX gallery load JavaScript 
$(window).load(function(){
    $("#msg2").html(function(){
        $.ajax({
            type: "GET",
            url: "./catpics.php",
            dataType: "json",
            success: function(result){
                for (var i in result){
                    $("#msg2").append("<img class='resize' src='" + result[i] + "'>");
                }
            }
        });
    });
});
File structure Text 
catpics/
├── mycats.php          # Main page
├── catpics.php         # Image list endpoint
└── media/
    ├── catstyle.css
    ├── mycats.jpeg     # Background
    └── images/         # Drop photos here
        └── [77+ cat photos]