p14nd4's blog is the best blog ever.

For a demo project I had at work recently, I wanted to incorporate some imagery from the client’s web site. I discovered their web server was configured to generate an index page for the directory containing their images, but I didn’t want to click through each one individually to figure out if it was what I wanted. (An auto-generated index page is something like this, but imagine it having hundreds of entries.)

I was pretty sure that I’d encountered some javascript many years ago that would render a thumbnail gallery for just such an occasion, but I was unable to locate it. Thankfully, I’m a software engineer, and I’m easily distracted by tangential pursuits, so I just wrote my own! If you’re not a nerd, but want to see what it is, copy the text below, visit the index page mentioned above; in your browser address bar, delete the address that’s currently there, manually type javascript: (make sure to get the colon), and then paste the text from below. (Browsers strip the javascript: from the text if you paste it.)

If it works (tested in Chromium 47 and Firefox 43), you should be presented with a little gallery of images! You can also search the web for index of jpg or something similar and test it out there, but you can stumble across some…interesting…things that way. You’ve been warned.

Also, it’s got the potential to crash your browser (or at least really slow things down) if you run it in a really large index. For better or for worse, I don’t do any intelligent loading/unloading of images, so it just ends up rendering a page with ALL OF THE IMAGES from the index. I have no doubt that this can be dramatically improved in a variety of ways; I very infrequently touch JavaScript, so this was a bit of a refresher exercise for me. Pull requests welcome!