Here is the problem I am dealing with:

There are very few windows programs that display animated .gif images at the correct frame rate. Probably because they all use the windows libraries (probably ) to do this, and anyone who has tried viewing an animated gif in I.E. and found that it was playing WAY TOO SLOW knows that Microsoft failed on this spectacularly.

The web browser Chrome is one of the few programs for windows that always plays animated gif's at the correct framerate, so my solution is to create a stand-alone html document to open in Chrome, that can be dropped into a directory and opened in Chrome to thereby display all images in that directory and/or its sub-directories in a picture-viewer style.

So far, my document (gif_view.html) opens an image based on a hard-coded path/file name, zooms this image in/out with the up/down keys, and switches to other hard-coded images with the left and right keys.

What I want is for these image file names to not be hard coded. gif_view.html should use a script to find out what images and sub-directories are in the directory I placed it in, and cycle back and forth through them with the arrow keys. It should also eventually create a list of sub-directories and let the viewer browse them.

Unfortunately, I can't get it to do either of these things on its own, since (for security reasons) JavaScript has no way of looking up the contents of a directory.

Does anyone know of a way to do this? Perhaps another scripting language to handle the left/right keys? Or is there a way to programmatically read the directory with JS that I missed? Or has Microsoft FINALLY released a patch or something to fix the frame-rate problem?

Please keep in mind: this should be a STAND ALONE DOCUMENT with NO external dependencies. A user should just be able to drop in into a folder, open it with a browser, and watch the magic happen. If your solution involves anything outside of the document itself (like say installing Apache and some server-side script to do the file reading) then it is not a solution. I've already tried stuff like that myself. Such external solutions work, but they are each very clumsy for their own reasons.

If anyone has ideas, I'd be grateful.

Here is the problem I am dealing with:

There are very few windows programs that display animated .gif images at the correct frame rate. Probably because they all use the windows libraries (probably ) to do this, and anyone who has tried viewing an animated gif in I.E. and found that it was playing WAY TOO SLOW knows that Microsoft failed on this spectacularly.

The web browser Chrome is one of the few programs for windows that always plays animated gif's at the correct framerate, so my solution is to create a stand-alone html document to open in Chrome, that can be dropped into a directory and opened in Chrome to thereby display all images in that directory and/or its sub-directories in a picture-viewer style.

So far, my document (gif_view.html) opens an image based on a hard-coded path/file name, zooms this image in/out with the up/down keys, and switches to other hard-coded images with the left and right keys.

What I want is for these image file names to not be hard coded. gif_view.html should use a script to find out what images and sub-directories are in the directory I placed it in, and cycle back and forth through them with the arrow keys. It should also eventually create a list of sub-directories and let the viewer browse them.

Unfortunately, I can't get it to do either of these things on its own, since (for security reasons) JavaScript has no way of looking up the contents of a directory.

Does anyone know of a way to do this? Perhaps another scripting language to handle the left/right keys? Or is there a way to programmatically read the directory with JS that I missed? Or has Microsoft FINALLY released a patch or something to fix the frame-rate problem?

Please keep in mind: this should be a STAND ALONE DOCUMENT with NO external dependencies. A user should just be able to drop in into a folder, open it with a browser, and watch the magic happen. If your solution involves anything outside of the document itself (like say installing Apache and some server-side script to do the file reading) then it is not a solution. I've already tried stuff like that myself. Such external solutions work, but they are each very clumsy for their own reasons.

If anyone has ideas, I'd be grateful.

• javascript
• html
• google-chrome
• directory-listing

• What about using C# (or almost any other language really) to dynamically load your contents server-side? – EvilBeer Commented Dec 15, 2013 at 1:08
• As mentioned, this is not a server program that renders a page. This is not web development. All scripts and programming MUST be contained in the ONE html text document (gif_view.php). This is a stand alone document that ANY layman should be able to save as a file on their own puter, and open with a browser as a local file. No external dependencies other than the image files in its own directory that it is viewing. – FireWingLead Commented Dec 15, 2013 at 3:16
• @user2461910 you said it's a php file, but you can't just have a php file on somebodies puter. They need a server and interpreter to run php. So it should be called gif_view.html. And also, there is no way to find all files in a directory using HTML alone, unless you already know the names and they're in the file. – markasoftware Commented Dec 15, 2013 at 4:08
• however, you CAN do this: using Chrome's awesome directory upload feature, you could create a website where the user can select the directory and read it. Note that there is no way to simply read files without a user choosing it from a file upload field – markasoftware Commented Dec 15, 2013 at 4:12
• Sry, did I say php? Ah yes, I did in the ment. Sorry. I meant html. (gif_view.html) which is what I said in the original question. No, I don't want a web page that must be served to a browser. Then you need to set up a localhost server the serves from the root of the drive. Messy. I was hoping someone knew of a scripting language that could be embedded in the html that could do this. – FireWingLead Commented Dec 15, 2013 at 20:23

1 Answer 1

Using Chrome's directory upload feature, this is a breeze. Firstly, put a file select field in your file's HTML code:

<input type="file" id="file_input" webkitdirectory="" directory="">

and then, when the user selects a folder using it, you can read stuff like this:

document.getElementById('file_input').addEventListener('change',function(e){
    var gifs=e.target.files;
    [].forEach.call(gifs,function(curGif){
        var elt=document.createElement('img');
        elt.setAttribute('src',(webkitURL||URL).createObjectURL(curGif));
        document.body.appendChild(elt);
    });
},false);

this doesn't have all the fancy stuff with the arrows, but it works: http://jsfiddle/markasoftware/m65u7/1/