jQuery, PHP, and a directory of images

readme.md

This is a relatively simple group of scripts I setup for a future jekyll based portfolio. I'm using it to easily display every image inside of a directory on a page.

This assumes that your images are in [root]/img/[directory]

images.json.php

<?php
    // used to display a json file with all of the images in a directory listed as img[x].url

    $idir = $_GET['dir'];
    $idir = "img/$idir/*";

    echo "{\n";
    echo "\"imgs\": [\n";

    $ar = glob($idir);

    for ($i = 0; $i < count($ar); $i++) {
        echo "\t\t{\n\t\t\t\"url\": \"" . $ar[$i] . "\"\n\t\t}" . ($i < count($ar) - 1 ? "," : "") . "\n";
    }

    echo "\t]\n}";
?>

page.html

<!-- working under the assumption that you've already got jQuery on the page. Also, this is only the relevant part of the html page -->

    <div id="img"></div>

    <script>
        $.getJSON("../php/images.json.php?dir=[name of directory inside 'img/']",
            function(data) {
                $.each(data.imgs, function(i, val) {
                    $("#img").html($("#img").html() + "<img src=\"" + val.url + "\" />");
                })
            }
        );		
    </script>