Navigation with arrows (jQuery)

Wednesday, November 5, 2008

Filed under: jQuery, javascript, web-development — Tags: , , , — Dmitri @ 12:25

I really like when gallery or application with pagination uses navigation with arrow keys. Like here.

Nice and fast navigation I think. So you can read the main article about this navigation on Lebedev’s site (or in Russian). This features is at least 3 years old and is used so rarely, but it’s so useful and makes users happy.

So I have written a tiny plugin for jQuery (based on the Andrey’s code) for this navigation. You can see my demo and price how useful it is.

The main idea is keep next/previous link somewhere. I prefer LINK tag to follow W3C specifications, but you can do it everywhere you want (DIV, SPAN, etc..), but only one condition: 4 element ids are reserved, here they are:

  1. arr-nav-right-link
  2. arr-nav-left-link
  3. arr-nav-up-link
  4. arr-nav-down-link

So our tags can be:
<link href="right-page.html" id="arr-nav-right-link" />
<link href="left-page.html" id="arr-nav-left-link" />
<link href="right-page.html" id="arr-nav-up-link" />
<link href="right-page.html" id="arr-nav-down-link" />

In common case galleries and pagination are generated by PHP, ASP.NET or whatever, so this links can be easily generated by server.

Ok, we have these tags, how to run script? It’s very simple to do:

Step 1. Include jQuery library and plugin:
<script type="text/javascript" src="js/jquery-1.2.6.mini.js"></script>
<script type="text/javascript" src="js/jquery.arrowNavigation.js"></script>

Step 2. Define a function:
<script type="text/javascript">
$(function() {
    $(document).arrowsNavigation();
});
</script>

And press CTRL + corresponding arrow key and here you go!
Note that there are some additional parameters for this function.
$().arrowNavigation([options, [callback]])

Object options
left – specifies the left URL.
right – specifies the right URL.
down – specifies the bottom URL.
up – specifies the top URL.
Function callback
Specifies the function, for example AJAX stuff or whatever you like. If is set there won’t be transaction between pages.

Ok, thats all have fun, check source and download.

3 Comments »

  1. Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

    Comment by Alexwebmaster — Tuesday, March 3, 2009 @ 14:43

  2. it would be better if it is implemented without ctrl or shift keys

    Comment by gercek — Friday, May 8, 2009 @ 22:22

  3. А ещё есть плагин hotkeys
    http://jshotkeys.googlepages.com/test-static-01.html

    Comment by Артём Курапов — Tuesday, January 5, 2010 @ 21:03

RSS feed for comments on this post. TrackBack URL

Leave a comment

© 2008 Dmitri Smirnov