javascript tips » Javascript Photo Gallery Editor

Javascript Photo Gallery Editor

Back-end photo galleries provide one thing, by necessity, that Javascript-based galleries do not: a WYSIWYG, friendly-editor for adding, annotating, and sorting images. Well, here's my first go at providing this functionality -- all written in Javascript.

The aim of the wizard-like editor is to provide fairly non-technical types of users the ability to create and/or maintain the Javascript for the Pizza Photo Gallery. The output of the editor is, well, Javascript that still needs to be pasted into a web page, but what the admin/user isn't burdened with is learning the obscure functions needed to run a gallery, nor should do they need to sacrifice a pleasant and efficient workflow. To be honest I've written this for myself, but hope others will find it useful.

Test-drive the Demo/Beta Version

How This Works

At present you may start from scratch, or, paste the Javascript from your gallery into a big form field, click a button (surprisingly small, given its power), and the editor sucks your info into its regular expression powered brain, allowing it to provide three primary work areas:

  1. The setup area is where you enter directory info and eventually will provide conversational explanations of all of the picture gallery's features. Allowing one click to turn on slideshows or set the timing, or set the appearance of the thumbnails.
  2. Next up: image info and meta-data. Enter titles, descriptions, date, and other annotations for each image or Add and Delete images from your gallery.
  3. Arrange them via a really cool click-n-drop sort orderer [sick][sic]. This single feature was one of the chief drivers behind my writing this. I had over 300 vacation photos that needed some editing (in the film sense, I mean arranging and adding notes) to transform them into a powerful, narrative slide show. Doing this by my normal clunky hand-coding sucked. Thus, the editor.

Having monkeyed with your gallery images in the three areas above you get two outputs:

  1. Javascript that when pasted into a gallery-enabled HTML page will work on the first go.
  2. A search engine friendly version of the gallery. All images on one handy, indexable HTML (no script) page.

Request For Comment

I'll make some official announcement once a few bugs are worked out and a couple of key features appended, so be prepared; an RFC will be posted.

Search Engine folks? Anyone? I'd like to know all I can about how AllTheWeb in particular runs their image search. Seems clear enough that they read the EXIF data, plus links and surrounding text. Anyone know for sure? Also, Google-insiders, spill, please.

As I said, this is still in the very early stages, but since it's about where we're able to use, well, time to let others mock my ugly child as well. Do not think that I'm unaware of how gawd-awful the code is. Yeah, it's a mess. I'll straighten it up before slapping a one-dot-oh on it, rest assured.