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.

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

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

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

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.

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.

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?

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.

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?

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

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.