Image Script

I've been mentioning this on Twitter a bunch, but haven't actually posted about it.

I'm writing a JavaScript application that will let you easily browse through all the images in a directory on a web server.

I wrote this because I needed it.  The directory I've been saving images to on my server has been growing at a steady rate, and the default Apache-generated directory listing was too cumbersome of a way to browse it.

So far, it's been a ton of code all in one file, which is nice for drop-in installs but bad for organization.  I'm working on getting it ready to be migrated to a multi-file implementation, but I need to learn AJAX before I can actually do the migration.

I'll give a basic overview of its features here, since I do intend on releasing it into the wild at some point.

It has small navigation bars at the top and the bottom of the page.  They both have Previous and Next links for navigating through the images.  The one on top tells you the current file name and gives a link to the actual file.  The one on the bottom has a link that brings up the list of files so you can pick one to be displayed, since having just Previous and Next links is kind of limiting for navigation.

The majority of the browser window's space is reserved for the image itself.  The image is resized to fit within this space if necessary, and can be clicked to toggle between the full size image and the resized image.  When it's full size, scroll bars appear within the interface to allow you to scroll the image around, so that the navigation bars are always visible.

For a script I wrote out of sheer necessity that was intended to be a quick and dirty solution, it works surprisingly well, to the point that I feel motivated to keep working on it.

*restarts Firefox so that it won't use 100% CPU while I'm typing*

It works reasonably well cross-browser, with one gaping exception that I have no motivation whatsoever to fix: Internet Explorer.

Oh god dammit what the hell, Firefox is still using 100% CPU while I'm typing.

*restarts it again*

Seriously though.  Internet Explorer lacks support for some standard CSS (the opacity selector and position: fixed;) as well as standard JavaScript Document Object Model methods like addEventListener().  This script depends heavily on those things and since I have no clue how to implement workarounds for IE, the issue is closed as WONTFIX.  Use a better browser.

I've tested the script in two non-Firefox browsers, and it works flawlessly in Chromium, and almost flawlessly in Opera.  Opera has a weird issue where it will let JavaScript set all the cookies it wants, but won't let JavaScript read them back.  I can work around that by having the server get the cookie and send the value back in the page source.  It's ugly, but it'll work.

The other Opera issue is with the popup file list.  It insists on floating the element containing the image's dimensions to the right of the containing element, rather than agreeing with all the other browsers I've tested it in and floating it to the right of the link that closes the dialog and sets that image as the current one.  Since there's no space for it to float it where it's trying to, it wraps it down to the next line.  So essentially every image's dimensions show up on the line below the image.  This is fixable by using a table.  It's so ugly that nobody would hit it with an arbitrary number of crowbars with the lights off from behind with a bag over its head, but it'll work.

Chromium used to have an issue that I'd found and solved in Firefox, but due to differences in image loading behavior still existed in Chromium.  Namely, when Previous or Next were clicked, the currently displayed image would stretch or squish according to the dimensions of the new image.  I fixed it in Firefox by removing the src attribute from the img tag and re-adding it after changing the dimensions.  That seemed to work fine in Opera as well, but it still did it in Chromium.  So what's the Chromium fix, you ask?  Well, I'll tell you.  Remove the img tag altogether and insert another one into the DOM containing the width, height, and src attributes for the new image.  My guess is that Chromium doesn't want to display the next one until it's completely loaded, whereas the other browsers were fine with displaying an image while it was loading.

Since I hate writing browser detection code, which is never clean and is also easily circumvented by the very browser we're trying to detect, all of my browser-specific issue solutions have to work cross-browser.

I'm not going to provide a link to a demo of this script, because the only place it's running right now is on my server, which is on my home internet connection.  I don't really feel like giving my IP address out to total strangers.  Once the script becomes a lot closer to release quality I'll stick a demo up somewhere on the internet.  Sadly, "release quality" probably means I'll have to write a bunch of dirty hacks to make it work in IE.

The main post is done, but here are twothree random asides.

Aside #1: Even though Firefox is no longer using 100% CPU while I'm typing, it's still hovering around 30-40%.  What the hell is it doing?  It seems to be related to the Blogger post editor, as when I switch to other tabs the CPU usage goes away entirely.  After the second Firefox restart I also switched from the Blogger In Draft post editor back to the regular Blogger post editor.

Aside #2: While typing this, it came to my attention that Firefox doesn't have the word "resize" in its spell-checking dictionary by default.  What the hell?

Aside #3: The CPU usage has shot back up to 100% while I'm typing again, and it also happens while typing in HTML view.  What the hell?