Dynamic gallery indexing

[DAZL]

Hey Guys, I'm struggeling with an idea of mine and hope there's someone here who can help me.

My idea:
A small gallery package, consisting of as few files as possible (html, css, javascript) that can read the /images folder in the same folder, and output those files to the html so it can be viewed in a gallery.

What I've got
I've found a minimalistic gallery with just the basics: an index.html, a style.css and an /images folder
I also searched for methods in JS to index files.

The problems
the index methods I found for JS all work with ActiveX, a script that needs to be allowed to run by the users. That and I can't figure out how to pass the indexed photos to the html so it can make a fancy gallery for me.

So, I'm looking for:
1. a method in javascript or easy alternative (can it be done in html5?) for the retrieval of photos and indexing them
2. a way to get that index in the html so it can order and place them on a nice grid

I've searched the internet and these boards but couldn't find anything useful yet. And I must say I'm not a skilled developer, I just started learning. So the answer could be very simple but I just haven't learned it yet.
Either way I hope someone can brainstorm and give me some pointers as to how I can achieve my goal.

Thanks for your time and help.

[pritaeas]

You'll need an index file (hand-made) or a script (dynamic) on the server to get access to a file list.

[DAZL]

not sure, but is this post something I could use with some alterations?

[pritaeas]

That post addresses how Javascript can read from the client's computer, not the server.

[DAZL]

Ah ok, so that post is not useful for me.
The idea is that the list of images is created automatically and changes everytime there is a change in the /image folder of the webpage.

The idea started from the problem that I try to share photos regularly with friends on different extentions on my webpage. And I want the galleries to update whenever I add photos to the /images folder.

[pritaeas]

A short script that lists all files for you would suffice, assuming you can run PHP, it would be something like this:

<?php
    $files = glob('images/*');
    echo json_encode($files);
?>

You would be able to call this file with AJAX calls, and do the rest in Javascript, or extend this script to output the HTML for you entirely.

[DAZL]

that php snippet seems very nice, and yes, I can run php, except I'm also just a starter in php that's why I wanted to refrain from using it, but if that can give me the results, I'll look into it.
Part of the reason I started this project was to learn web skills :)

How would I output this in the html? what would this script return?

[pritaeas]

This script returns json. On my server it would return this:

["images\/ajax-loader.gif","images\/chrome.png","images\/favicon.ico","images\/favicon.png","images\/firefox.png","images\/hacker.png","images\/hp-bottom-right.png","images\/hp.png","images\/hp24.png","images\/ie.png","images\/opera.png","images\/plus_google.png","images\/rss.png","images\/safari.png"]

You can then use Javascript/jQuery to insert img tags into your HTML.

[DAZL]

That looks like a nice array, I imagine that javascript could pull those apart and put them in a nice HTML. Or is that idea a bit farfetched?

[pritaeas]

No. It's very common. If you use jQuery it gets even simpler.

[DAZL]

Wow, that looks really like something that can solve my problem, I'll go look into this, thanks a lot.

If anybody else has a different approach, let me know, I'd like to learn what they are.