Trying to make a simple photo gallery?

[blakemckenna]

I am trying to make a simple photo gallery. I know it's probably easier to find a free one but I'm not learning anything by doing that. My setup is plain and pretty simple. I've attached a screenshot of my page which is loaded with images (they will eventually be resized smaller once everything is working). I simply wish to click on any image and then open that image to a larger size on a new page. THIS ELUDES ME!!! Below is the Javascript that creates the page of images.

The below function runs at "onload" of the page.

<script>
    function getImages(dirLocation) {
        var dir = dirLocation;

        var fileextension = "jpg";
        
        $.ajax({
            //This will retrieve the contents of the folder if the folder is configured as 'browsable'
            url: dir,

            success: function(data) {
                //This empty() statement clears the canvas so a new directory can be reloaded
                $("#container1").empty();

                //List all png file names in the page
                $(data).find("a:contains(" + fileextension + ")").each(function() {
                    var pathName = this.href;
                    var strLen = pathName.lastIndexOf('/');
                    var fileName = pathName.substring(pathName.lastIndexOf('/') + 1);
                    var newFileName = pathName.slice(0, strLen, pathName) + "/" + dir + fileName;

                    var div = "<div id='images' class='images'>" +
                        "<a href=''><img src=" + newFileName + " width='450' height='auto' onclick='showImage()>" +
                        "<div class='caption'></div></a></div>"
                    $("#container1").append($(div));
                });
            }
        });
    }
    //
    //
    //
    function showImage() {
        var largeImage = document.getElementById('images');
        largeImage.style.display = 'block';
        largeImage.style.width=1000+"px";
        largeImage.style.height="auto";
        var url=largeImage.getAttribute('src');
        window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
    }

</script>

Thanks for your help,