Navigate Brickshelf with Keyboard Shortcuts (Chrome Script)

[mitah]

Hello there!

I guess I'm not the only one who is spoiled by Flickr's intuitive navigation for the Photostream. Press LEFT and RIGHT arrows to navigate the Photostream, press L to view a photo in the lightbox.

After, again, clicking endlessly through Brickshelf folders I've had enough and made a small script that allows me to navigate folders using the same keyboard shortcuts as Flickr.

It is a simple user script that can be installed in Google's Chrome Browser using the Tampermonkey Extension and I guess it would also work in Firefox using Greasemonkey. (I've heard there is also some Plugin for Internet Explorer, but who cares )

Installation is as simple as creating a new script in Tampermonkey pasting the code below into the field and save it... it should automatically load the next time you visit Brickshelf and enable the shortcuts

shortcuts are:
* ARROW LEFT and ARROW RIGHT calls the "Previous" and "Next" links above and below the images
* l (lower case L) zooms the image to full size
* ESC acts like the history back button when viewing the zoomed image OR acts like clicking the "Up" link above the images if there is one

I don't have an EB forum account, so if anyone thinks this would be useful feel free to post it over there too.

Code: Select all

// ==UserScript==
// @name       Brickshelf Keyboard Navigator
// @namespace  http://www.brickshelf.com
// @version    0.1
// @description  navigate brickshelf with cursor keys
// @match      http://www.brickshelf.com/*
// @copyright  public domain
// @require    https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// ==/UserScript==

// list of all key codes: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

$(document).ready(function() {
    
    var prev = $("b:contains('Previous')").parents("a");
    var next = $("b:contains('Next')").parents("a");
    var up =   $("a:contains('Up')");
    var zoom = $("a:contains('click here for full size')");
    
    $(document).keydown(function(e){
        switch(e.which) {
            case 37: // arrow left
                if(prev[0]){
                    window.location = prev[0].href;
                }
                break;
            case 27: // Escape key
                if(up[0]){
                    window.location = up[0].href;
                } else {
                    history.back();
                }
                break;
            case 39: // (arrow right)
                if(next[0]){
                    window.location = next[0].href;
                }
                break;
            case 76: // l (lower case L)
                if(zoom[0]){
                    window.location = zoom[0].href;
                }
                break;
        };
    });
    
});

PM me or post here if you have any questions, comments or suggestions.