Modules: Keyboard Navigation - v.2.1

Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2010-04-08 05:04

Adds keyboard navigation support to the theme

  • Ctrl+Left - First Page
  • Left - Prior Page
  • Ctrl+Up - Parent Page
  • Right - Next Page
  • Ctrl+Right - Last
  • Shift + C - Go to Calendar Page - Album/Photo page
  • Shift + E - Open Edit Dialog - Album/Photo page
  • Shift + F - Open Full Size - Photo page
  • Shift + I - Open Exif Info dialog - Photo page
  • Shift + S - Go to Search Box
  • Shift + V - Thumb/Photo Click to open Slideshow, where supported

Navigation is not applied if user opened Photo Slideshow (Shadowbox/Fancybox).
RTL support.

---
Problems? Report it here | Get latest version | Coffee Fund | My Library | Blog

 
sddroog

Joined: 2005-02-01
Posts: 132
Posted: Thu, 2010-04-08 18:00

Great, I really like keyboard shortcuts!

Any change this will work on the Grey Dragon Wind theme in the near future?

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2010-04-08 18:43

@sddroog: grab a new version

 
sddroog

Joined: 2005-02-01
Posts: 132
Posted: Fri, 2010-04-09 17:09

Great, thanks a lot! I like it very much!

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Tue, 2010-04-27 15:16

Version 1.2 is out

  • Added support for GreyDragon Photo Slideshow navigation - in Photo SB slideshow mode, key navigation is superseded by slideshow navigation.
 
mamouneyya

Joined: 2009-11-02
Posts: 337
Posted: Sat, 2010-08-21 04:26

Thanks. I've added support for this in Browny Wind theme.
Just noticed that the navigation arrows don't get flipped for RTL languages, like Arabic. In such languages, left should be used for next and vice versa.

Thanks :)

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Sat, 2010-08-21 18:13

never played with that, how would you detect the rtl from javascript document.dir="rtl" ?

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Mon, 2010-08-23 16:53

version 1.4 released

  • Added RTL detection
 
mamouneyya

Joined: 2009-11-02
Posts: 337
Posted: Wed, 2010-08-25 12:45

Unfortunately, it doesn't work for me :(

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Wed, 2010-08-25 17:27

Sorry, version 1.5 released:

  • Fix for RTL detection
  • Wind Theme support added
 
rlparadise

Joined: 2009-12-27
Posts: 65
Posted: Thu, 2010-08-26 04:24

Very cool! I am still a big fan of the old keyboard...

A couple of things to note on the Wind Theme Support:

- Just the prior/next keyboard shortcuts work (i.e. Ctrl+Left, Ctrl+Right, Ctrl+Up do not function)

- Works with Clean Canvas Theme as well (as expected, with the same limitation as Wind Theme)

Thanks again!

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2010-08-26 04:45

@rlparadise: in album page or individual photo pages?
Ctrl+Up would not work because there is no level up button in the Wind theme
if page does have first/last button (wind theme has it only on photo pages) then navigation would not work either

 
rlparadise

Joined: 2009-12-27
Posts: 65
Posted: Thu, 2010-08-26 05:17

Sorry about that. Not complaining, just hoping to clear up any confusion...

Didn't find any first/last button in the default wind theme on what I would consider the individual photo page. However, I did find it on the album page. In that case, it does work properly.

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2010-08-26 15:22

yes you are right about buttons
I have updated codex page to include more information about the module

 
mamouneyya

Joined: 2009-11-02
Posts: 337
Posted: Thu, 2010-08-26 16:35

Still doesn't get flipped for RTL.. sorry :(

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2010-08-26 17:30

please elaborate. Only way I could test it by setting dir=rtl for the page and in this case I see test direction/align changing along with reversing order of the navigation.
which theme are you using?

 
mamouneyya

Joined: 2009-11-02
Posts: 337
Posted: Fri, 2010-08-27 19:50

Browny Wind, which uses Wind theme code with CSS/ThemeRoller modifications.
You can choose Arabic language to test the code.

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Fri, 2010-08-27 20:41

Aha! Well, works fine for me with wind and gd theme when العربية is selected for example.
I have to fix my theme however, so it puts rtl class for the body tag, but otherwise...
Which language does not work for you, what browser, what are settings of the browser for text encoding?

 
mamouneyya

Joined: 2009-11-02
Posts: 337
Posted: Sat, 2010-08-28 04:32

Oh, I am sorry. It seems I didn't correctly upgrade my earlier version. It works as expected now. Thanks :)

 
coops
coops's picture

Joined: 2002-10-31
Posts: 40
Posted: Sun, 2010-09-19 19:48

Thanks for the addon. Keyboard nav is something that's become standard a lot now, and it almost becomes automatic for me to use the cursor keys to switch between photos.

However I do have a request - is it feasible to disable the keyboard navigation when you are in a popup diaglog? For instance if I go to edit the description of an album and more between letter with the cursor keys it closes the popup and moves to the next page. Doh!

Cheers.

Coops.

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Mon, 2010-09-20 01:50

@coops: Done...

version 1.6:

  • Added logic to prevent navigation when dialogs are opened.
  • Changed detection of Shadowbox preview overlay
 
gopu
gopu's picture

Joined: 2009-08-28
Posts: 137
Posted: Tue, 2010-09-21 05:13

Hi,
This comment may sound you irrelevant. This is actually regarding multilang module in Gallery3.
I got the discussion thread from the mail that received below from

.
But unfortunately my reply does not reach there.. it bounced back, hence I am posting this reply on multilang to this discussion thread (as this is what specified in that email)

-------------------
At SourceForge we were having a dicussion about making Gallery 3
multilingual. http://gallery.menalto.com/node/95438

And then it was moved to field of dreams....as someone thought it
should be an extension/module, not part of core....

I am wondering if you are working on a module/extension, and if so, I
am happy to help you bounce ideas....
-------------------

my reply to above is:
----------------------
Yes I am working on multilang module.... however from the
discussion it looks like we might be talking about two
different things....

What I am doing is similar to the multilang module of Gallery2.
I.e. user should be able to enter Title, Description and
also can have language specific URLs for the album items.

However if you are in same line, I will surely love to get
any help.

As of now I am almost done with the core part of module.
Now I need to work on the user interface.

I should be able to share the code withing 10 days or so.
----------------------
--------------------------------------------------------------------------------
my wings of love - work, experince, learnings, open source, technologies on my way to God

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Tue, 2010-09-21 13:29

gopu,
this thread is about keyboard navigation.
The discussion about multilang support is :
https://sourceforge.net/apps/trac/gallery/ticket/1101
Registration is free for sourceforge.
Perhaps your best bet is to start a new thread or search for an existing one like (OH!) you have going here:
http://gallery.menalto.com/node/97940

How bout trying to send http://gallery.menalto.com/user/251844 a PM

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
mamouneyya

Joined: 2009-11-02
Posts: 337
Posted: Wed, 2010-09-29 20:26

It would be more usable to disable the keyboard navigation in the input fields also. It is really annoying when you comment on a photo.
Thanks!

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2010-09-30 19:05

version 1.7 is up

  • Added extra logic not to react when keys are clicked in forms elements
 
jefferyb

Joined: 2010-11-09
Posts: 3
Posted: Tue, 2010-11-09 20:27

Cool, Thanks!!! I'll try it out...

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Fri, 2010-11-26 19:45

version 1.8 is available:
- Added logic to prevent navigation when Fancybox is opened.

 
JB2448
JB2448's picture

Joined: 2010-10-02
Posts: 26
Posted: Sun, 2011-01-23 21:33

I've updated to the latest version of Gallery (3.0.1), and keyboard navigation stopped working. I've tried deleting and reinstalling it, disabling and re-enabling it, and changing themes, among several other steps trying to get it to work, and nothing seemed to work. If it matters, I'm using the theme Wide Wind Click 4 Next. Thanks!

(Sorry for bumping the thread!)

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Mon, 2011-01-24 15:08

Version 1.9 is up

  • Code adjustments to comply with 3.0.1 release of G3
 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Fri, 2011-05-27 17:04

version 2.0 is up

  • Module info adjusted to match new format in G3 3.0.2+
  • Added support for ColorBox
 
wise_mike

Joined: 2008-10-21
Posts: 158
Posted: Sun, 2012-01-08 09:54

Hi Serge D, just tried this great module.. very nice..

Here are some thoughts:
1- re the up button in the wind theme: the wind theme has the directory structure at the top that shows like:
Gallery >> folder1 >> folder2 >> folder3
and so on.. why can't it take the up link from there?

or it could be done another way:
the url is like:
http://www.sitename.com/gallery/folder1/folder2/folder3/image.html
it can capture the url, and ups one level before the last /
like that it would go the above level.. (like the up button in the Google toolbar for example)

And if it's different for each theme, you can make an options page or something to edit..

2- If you made an options page, maybe you could add more keyboard shortcuts for the user, even implement them with some modules..
For example you can add options like:
- when not in a text area: shift+s jumps to the search box
- shift+e opens the "Edit image" popup window for logged in admin, or edit album if one is at an album page..
- shift+c (opens the send ecard module window for that image)
- shift+d to download the full size image..

And many more that could be added, in the options page.. and it would be nice to explain how to do something like that (with an example of any of the above), so one could implement it on their own if you feel this is too much for the module..

Thanks in advance, and happy new year..

 
henriemedia

Joined: 2011-02-02
Posts: 29
Posted: Wed, 2012-02-08 16:26

I have been using this module for some time with no issues. Now I am getting the error - $(document).KbdNavigation is not a function on http://www.carefreetrip.com/gallery/. Any suggestions on how to fix this? Thank you.

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Wed, 2012-02-08 21:43

version 2.1 is up:

  • Fixed issue with jQuery extension not always initialized
  • New Shortcodes:
    Shift + C - Go to Calendar Page - Album/Photo page
    Shift + E - Open Edit Dialog - Album/Photo page
    Shift + F - Open Full Size - Photo page
    Shift + I - Open Exif Info dialog - Photo page
    Shift + S - Go to Search Box
    Shift + V - Thumb/Photo Click to open Slideshow, where supported

Serge
_____________________________________________
Photo Gallery | GreyDragon Theme | Follow on Twitter

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Wed, 2012-02-08 21:48
wise_mike wrote:
Hi Serge D, just tried this great module.. very nice..
Here are some thoughts:
...

Mike, not all but many of your suggestions did make in this release

henriemedia wrote:
I have been using this module for some time with no issues. Now I am getting the error - $(document).KbdNavigation is not a function on http://www.carefreetrip.com/gallery/. Any suggestions on how to fix this? Thank you.

Fixed

Serge
_____________________________________________
Photo Gallery | GreyDragon Theme | Follow on Twitter

 
henriemedia

Joined: 2011-02-02
Posts: 29
Posted: Fri, 2012-02-10 16:16

I installed the update and I still get the error "Error: $(document).KbdNavigation is not a function". When I comment the jquery script ( <script type='text/javascript' src='jquery.min.js'></script> ) it works fine, but I need the jquery script for other functions. I am using the latest version - jQuery v1.7.1 (jquery.com). Any other suggestions? You can see the error here - http://www.carefreetrip.com/gallery/

 
henriemedia

Joined: 2011-02-02
Posts: 29
Posted: Fri, 2012-02-10 18:58

Serge just let me know that Instead of using a global colorbox, install one from g3 to fix this. I did it works!!!

 
wise_mike

Joined: 2008-10-21
Posts: 158
Posted: Sat, 2012-02-11 23:26

Hi serge, thanks for the new version with the new shortcuts.. all work great..

1- However shift + E doesn't work for me, don't know why.. although S and F work fine.. (I use the default wind theme), and I tried it in both Chrome and FF.

Are there any suggestions?

2- Also I was thinking, maybe you could add an "Options" page for the module, to let the admin choose which shortcut to add/remove.. also there could be an edit option for each action, to edit the keyboard shortcuts, weather by typing it (with the shift), or from drop-down menu to choose the shortcut..

for example if I want the edit image dialogue through the (*) directly, not with shift+e or whatever.. (from the right numeric keyboard).. or even choose numbers for shortcuts instead of shift+something (all could be edited in the "options" page.

3- there could be shortcuts to jump to some famous pages, like the gallery index, modules page, maintenance page.. stuff like that..

4- if there would be an "Options" page, you could add all the variations of possible commands, and let the admin choose which to enable and with what shortcut..

Thanks,

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Sun, 2012-02-12 01:27

Module works with GD Theme
Wind theme may have different tags, so I would have to check
I am not planning to add the option dialog at this time.

Serge
_____________________________________________
Photo Gallery | GreyDragon Theme | Follow on Twitter

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Mon, 2012-02-13 19:03

Mike, small follow up

wise_mike wrote:
1- However shift + E doesn't work for me, don't know why.. although S and F work fine.. (I use the default wind theme), and I tried it in both Chrome and FF.

problem with Wind theme is that menu items are not addressable - "Edit album" menu item does not have any class or Id associated with it, so I cannot "click" it through JS. I do not want to put extensive logic for it to "compute" the link

PS: I must have some advantage for my theme :)

Serge
_____________________________________________
Photo Gallery | GreyDragon Theme | Follow on Twitter

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Mon, 2012-02-13 19:12

There is a ticket in the que for adding IDs to menu items:
http://sourceforge.net/apps/trac/gallery/ticket/1766

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

 
undagiga

Joined: 2010-11-26
Posts: 693
Posted: Wed, 2012-02-15 00:31
Serge D wrote:
PS: I must have some advantage for my theme :)

Your theme has a LOT of advantages!!

U-G

 
smallIT

Joined: 2012-10-28
Posts: 7
Posted: Sun, 2012-10-28 20:21

Thanks for this contribution! I initially tried the arrow nav module during my new Gallery installation, but it has the navigate away from input window issue that mamouneyya mentioned above. Then, I found yours later in the alphabet of modules. ;-)

Of note for curious OS X users:
- ctrl commands are ignored in Safari 5.1.7 and FireFox 15.0.1
- shift E/I is ignored in Safari and FireFox
+ shift C/S works in Safari and Firefox
+ shift F works in Safari