Jonathan Field - Maker of Random Stuff

Proof Viewer

There’s got to be 1001 bits of image gallery software on the web, but for some reason I didn’t like any of the ones I’d seen that much. Particularly I don’t like going back and forth between a thumbnail index and a large-view page. I don’t think they’re smart enough about preloading, and I also don’t like the UI details on many of them. For example “previous” and “next” buttons that move around from page to page so you have to reposition the mouse if you want to keep going “next”.

Sophie needed image gallery software for showing proofs to clients, but wasn’t that happy with the ones she’d tried either. So I took a stab at creating one. And here are the results. You can compare and contrast with Aperture image gallery, which she used to use.

Now, it may not be your cup of tea, but I’m very pleased. Mainly because it is usable on an 800×600 screen but also can take advantage of giant screens for more thumbnail viewing. I also like the preloading stuff for “previous and next”, but also for hovering over images in the thumbnail section. And several other little details that nobody will notice but me :)

It’s not general purpose: the main picture size is fixed, cropping at a centered 620×620, and image saving is intentionally hampered for the non-technical. There’s also no captioning. But that was what we wanted for the proof viewer.

Still, I haven’t done that level of detailed javascript/css programming before. Usually I’m a luddite with these web technologies, sticking to HTML 3.2. But I figured I should learn a bit about what the kids are doing these days.

It took a lot longer than I expected, and about 80% of the time spent was getting around obscure behavioral differences in Safari 2 & 3, Firefox 1.5 & 2, and IE 6. Those are all the browsers I tested it on. I imagine it breaks on some others because this javascript/css stuff is so terribly brittle (and people complained about Java runtime inconsistencies?!). But it works well in all of those. I should try to get my hands on IE7 though. Or if anyone has it and it works (or doesn’t) let me know.

Now I’m off to sell my house.

This entry was posted in Uncategorized. Bookmark the permalink.

8 Responses to Proof Viewer

  1. Nice! I love the keyboard controls. Can you make home/end go to the first/last pictures, too? One of the things I did one time was to make the ‘r’ keypress load up a random image in the directory. Have you seen flickr’s slideshow? I think that’s all javascript + YUI. Ya, that’s the nice thing about javascript libraries — let the cross-browser issues become someone else’s problem!

    • Cool — I was wondering if anyone would notice the keyboard controls :) I hadn’t considered home/end because I’m not even sure how to trigger those on my macbook. Hmm… I think I can’t because I’ve mapped my “fn” key to do expose. Heh. I did consider making up/down navigation work, but it looked like it would take math, and I got lazy and left it out. I rationalized that letting up/down scroll the thumbnail field was good enough. Random image is a neat idea. Is your gallery stuff up somewhere?

      I’ve used Flickr a bit. It’s a fine site but I’m not a fan of the interface. They seem to have a hybrid of a thumbnail viewer with a mid-sized image, and then a separate full sized image with mini thumbnail viewer. But I’m not totally happy with either. And too much page reloading. Why can’t everyone make things the way _I_ want, huh? ;)

      I probably should get into something like YUI or GWT or even Scriptaculous. But I’ll probably wait another few years. Even this much web 2.0 like stuff gave me the shivers!

      • I was thinking more of the flickr slideshow app, like this:

        http://www.flickr.com/groups/mrbento/pool/show/

        I’ve gone in the completely opposite direction as you and am now using jigl to create a simple static html gallery. I figure it only costs me an additional 10-15% in disk space to add html, a thumbnail, and a mid-sized image to the directory. Anyhow my computers at home are CPU-bound, so pre-calculating the entire gallery saves time in the end.

        The other nice thing about a static gallery is that it’s really easy to make CD-R copies of the gallery (or even just parts of the gallery) to give to people.

        I’m still a big fan of mochikit, but I think the cool kids (at least the non-ruby-on-rails cool kids) are playing with mootools and jquery these days. Now I understand that search volume isn’t a perfect metric of popularity, but this year

        http://www.google.com/trends?q=jquery%2C+mootools%2C+mochikit%2C+yahoo+ui%2C+prototype+%28toolkit%7Cjavascript%7Clibrary%7Cframework%29&ctab=0&geo=all&date=2007&sort=0

        jquery and mootools are trending up, whereas mochikit, yui, and prototype are flat.

        • Ah — I hadn’t seen that flickr feature. That’s more along the lines of what I was going for.

          Actually, the proof viewer I did is just one static html page — so from that perspective it’s really simple. I have a command line perl script that creates the thumbnails and the page, but after that it’s just the images and one static file in a directory. That’s one of the things I like about it :)

          Man, there’s more javascript kits than I was aware of. I’m so behind! Neat stuff. Mootools seems to have the best front-page marketing talk. Maybe I should give one of these a try…

          • … but only the second best logo!

            That’s cool re: making the proof viewer all static html. For some reason I thought it was being generated on-the-fly. That’ll be perfect to give to clients and stuff. Now you just need to add an auto-watermarking feature (or is that, in fact, done in the script, too?)

  2. Here’s the link to our wedding photo previews and you can see the gallery our photographer used. I’m not sure how it compares to what you created (which is really impressive by the way), but it does have b/w, sepia, and color options. (Wish you could have made it to the wedding!)

    http://www.photomischa.com/

    Click on Client Login.
    Click on Online Proofing.
    Click on Weddings, Events, and Portrait Sessions.
    (It doesn’t matter what e-mail address you use. It can be fake.)
    Select Kathleen & Mark’s Wedding Preview (under August 2007).

  3. Is the honeymoon over literally or figuratively? :)

    We got back Sunday from Thailand (Bangkok and Ko Samui) and Japan (Tokyo and Kyoto) pretty exhausted. They were amazing places but very, very hot and humid.

Leave a Reply to jon_a_thon Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>