Day ago while waiting for delayed flight on United, I was doing some follow up on the discussion about my Theme for Gallery 3 and was asked if I could add support for Keyboard navigation.

In general, it is easy topic, especially when jQuery is supported for the web-site.

An objective is to allow visitor use keyboard to navigate. In my case it is applied to Gallery pagination enabling use of Left/Right/Up keys to move between photos or album pages.

While being simple in implementation, it adds a convenience for the end user enabling keyboard navigation versus mouse clicks.

So let’s add it…

First, we need some “anchors” on the page to find dynamically what our keys would do when pressed.

In case of my theme, I have paginator control allowing user navigate first/prev/next/last or go level up in the gallery structure (small arrow buttons/links), but it could be anything.

If we are to be W3C-friendly, then <link> tag in the header is more appropriate, but I am not going to use it in the example below. So let’s assume we have 5 links as following

<a title="First (Ctrl+Left)" id="g-navi-first" href="/first.html">First</a>
<a title="Prev (Left)" id="g-navi-prev" href="/prev.html">Prev</a>
<a title="Parent (Ctrl+Up)" id="g-navi-parent" href="/parent.html">Parent</a>
<a title="Next (Right)" id="g-navi-next" href="/next.html">Next</a>
<a title="Last (Ctrl+Right)" id="g-navi-last" href="/last.html">Last</a>

As you can see we have 5 different actions to take and we have selected key combinations we are going to use.
Code above by itself, would only work with mouse click.
What we need next is very small jQuery code to bring life into it and add desired keyboard sensitivity.
Please notice that it would override default arrow key based scroll support of the browser. So if you want to keep both then simply adjust code below to your liking.

There goes the code. Simply dump it into JS file and add reference in your page:

/**
*
* Copyright (c) 2010 Serguei Dosyukov, http://blog.dragonsoft.us
*
*/
$.fn.KbdNavigation = function() {
  $(this).bind("keydown", function(event) {
    var lnk = "";
    var lnk_first, lnk_prev, lnk_parent, lnk_next, lnk_last;
    lnk_first  = $("#g-navi-first").attr("href");
    lnk_prev   = $("#g-navi-prev").attr("href");
    lnk_parent = $("#g-navi-parent").attr("href");
    lnk_next   = $("#g-navi-next").attr("href");
    lnk_last   = $("#g-navi-last").attr("href");
   
    switch(event.keyCode) {
      case 0x25: // Ctr+Left/Left
        if(event.ctrlKey) { lnk = lnk_first; } else { lnk = lnk_prev; }
        break; 
      case 0x26: // Ctrl+Up
        if(event.ctrlKey) { lnk = lnk_parent; }
        break;
      case 0x27: // Ctrl+Right/Right
        if(event.ctrlKey) { lnk = lnk_last; } else { lnk = lnk_next; }
        break; 
    }
   
    if(lnk) {
      window.location = lnk;
      return true;
    }
   
    return true;
  });
}
$(document).ready( function() {
  $(document).KbdNavigation({});
});

Same time I do not like to give my photos to someone else to host, so I have my gallery.

It runs on Menalto’s Gallery 3 engine – nice, open source, PHP based with MySQL back-end.

Not my primary programming language, but allows me to host and enhance my blog, keep my gallery and small web-site.

Last night, while bringing some old photos over from my backup gallery (G3 is still under development and I do not want to recreate gallery if anything to happen, and it did – I killed the setup…), I noticed that import process start to fail. Several attempts to recover did not give much of the progress and I went digging error logs.

With recent release of 2.3 version, I have updated my installation as well.

Few bug fixes may not worth mentioning, but noticeable change is in slide show plug-in. Starting this version slide show uses Cooliris’s PicLens. You can see a sample here.

Why would I want to mention it?

Aside from being nice piece of software, CoolIris was a place where Danny Thorpe was working for some time.

“Was” because Danny is back at Microsoft (see some notes in his blog above).