Screen navigation: keyboard shortcut for ">" ??

papajay · July 30, 2006

My favorite "style" is JOURNAL. But it can get a little tedious when viewing a multipage gallery. Is there a keyboard shortcut available to advance to the next page in the gallery without having to position and click the mouse on the little ">" arrow?

I tried page-down (works within the loaded page)
I use the "arrow down"/"arrow up" keys to scroll (works fine, again within the loaded page).

Can a Function key be programmed to accomplish this?

Andy · July 30, 2006

Bump for one of the experts.

{JT} · July 30, 2006

Was thinking of this the other day to browse through search results, gallery pages, etc. Let me see what can be done.

Andy wrote:

Bump for one of the experts.

devbobo · July 30, 2006

try this (add to JS block)...

Updated: Fixed scrolling issue on Smugmug Small
Updated: Slight rewrite for optimisation

YE.addListener(document, "keyup", pageNav);

function pageNav(e) {
  if (!e) 
    e = window.event;

  if (!YD.hasClass(document.body, "galleryPage"))
    return;

  switch (e.keyCode) {
    case 37:
      chk = "&lt;";
      break;

    case 39:
      chk = "&gt;";
      break;

    default:
      return;
  }
  
  oList = YD.getElementsByClassName("nav", "a", YD.get("albumNav_top"));
  for (var i=0; i < oList.length ; i++) {
    if (oList[i].innerHTML == chk) {
      window.location = oList[i].href;
      break;
    }
  }
}

papajay · July 30, 2006

Works like a charm!

devbobo wrote:

try this (add to JS block)...

document.onkeyup = pageNav;
 
function pageNav(e)
{
  if (!e) 
    e = window.event;
 
  if (e.keyCode == 37)
  {
    if (!YAHOO.util.Dom.hasClass(document.body, "galleryPage"))
      return;
 
    oNavBar = document.getElementById("albumNav_top");
    oNavList = YAHOO.util.Dom.getElementsByClassName("nav", "a", oNavBar);
    for (var i=0; i < oNavList.length ; i++)
    {
      if (oNavList[i].innerHTML == "&lt;")
        window.location = oNavList[i].href;
    }
  }
 
  if (e.keyCode == 39)
  {
    if (!YAHOO.util.Dom.hasClass(document.body, "galleryPage"))
      return;
 
    oNavBar = document.getElementById("albumNav_top");
    oNavList = YAHOO.util.Dom.getElementsByClassName("nav", "a", oNavBar);
    for (var i=0; i < oNavList.length ; i++)
    {
      if (oNavList[i].innerHTML == "&gt;")
        window.location = oNavList[i].href;
    }
  }
}

Devbobo: Wow...great modifcation! THANK YOU!!! Your script is greek to me, but I had the success I was looking for on my third guess (using the right arrow key to advance to the top of the next page, and the left arrow key to go to the top of the "previous" page).

If this little beauty turns out to withstand the test of time (without unintended negative results somewhere else), I hope Smugmug will add it as a new standard navigation "feature". I haven't tried it yet, but I assume it works for all multi-page Smugmug styles (Journal I already know works!!).

Andy · July 30, 2006

papajay wrote:

Devbobo: Wow...great modifcation! THANK YOU!!! Your script is greek to me, but I had the success I was looking for on my third guess (using the right arrow key to advance to the top of the next page, and the left arrow key to go to the top of the "previous" page).

If this little beauty turns out to withstand the test of time (without unintended negative results somewhere else), I hope Smugmug will add it as a new standard navigation "feature". I haven't tried it yet, but I assume it works for all multi-page Smugmug styles (Journal I already know works!!).

Devbobo is da bomb, isn't he:

devbobo · July 30, 2006

Hi Papajay,

Sorry I should have actually spelled that out, yes left and right arrows.

Also, it should work for all styles but i haven't tested them all.

Cheers,

David

brandofamily · July 30, 2006

devbobo, once again a great bit of code. I'm sure my folks will love this one... Maybe one for FAQ ... Andy....

Andy · July 30, 2006

Added to FAQ.

papajay · July 30, 2006

Well, "almost" all styles.

devbobo wrote:

Hi Papajay,

Sorry I should have actually spelled that out, yes left and right arrows.

Also, it should work for all styles but i haven't tested them all.

Cheers,

David

David...this is a little gem!!!

It appears to work "as expected" on all styles but Small Smugmug....when I tried it there, it advances one photo at a time instead of one page (actually, truth be told, I LIKED it that way on this style!!).

brandofamily · July 31, 2006

devbobo wrote:

Hi Papajay,

Sorry I should have actually spelled that out, yes left and right arrows.

Also, it should work for all styles but i haven't tested them all.

Cheers,

David

I think I found a problem... The code works fine on regular gallery pages. But if I jump to this page http://www.brandolinoimaging.com/keyword/braidwood
(a keyword page) the code does not work. Is it possible to get it to work here too?

devbobo · July 31, 2006

papajay,

that appears to be a SM bug. Normally, the navigation between images is done with , but SM Small seems to be missing that at the moment.

Cheers,

David

devbobo · July 31, 2006

brandofamily wrote:

I think I found a problem... The code works fine on regular gallery pages. But if I jump to this page http://www.brandolinoimaging.com/keyword/braidwood
(a keyword page) the code does not work. Is it possible to get it to work here too?

Anthony,

This a SM bug as well, I am using calls (eg. YAHOO.util.Dom.getElementsByClassName) to the Yahoo UI library, that JT recently hooked into SM. But at this stage, it doesn't appear to be working on all pages yet.

These calls could potentially be replaced with something else in the short term.

Cheers,

David

brandofamily · July 31, 2006

devbobo wrote:

Anthony,

This a SM bug as well, I am using calls (eg. YAHOO.util.Dom.getElementsByClassName) to the Yahoo UI library, that JT recently hooked into SM. But at this stage, it doesn't appear to be working on all pages yet.

These calls could potentially be replaced with something else in the short term.

Cheers,

David

Thanks for letting me know...

Andy · July 31, 2006

devbobo wrote:

Anthony,

This a SM bug as well,

or design feature? JT would know for sure.

{JT} · July 31, 2006

Hm, don't understand how that is a bug. Currently the only thing that uses the Yahoo UI library is the Themes menu which only works on gallery pages - so I only call the needed files there

I am looking into having the Dom and maybe Event library on every page - just gotta see how much page weight they add.

devbobo wrote:

Anthony,

This a SM bug as well, I am using calls (eg. YAHOO.util.Dom.getElementsByClassName) to the Yahoo UI library, that JT recently hooked into SM. But at this stage, it doesn't appear to be working on all pages yet.

These calls could potentially be replaced with something else in the short term.

Cheers,

David

{JT} · July 31, 2006

Not a bug

we are limited with space above the photo since the page width is so small and we still want to show the cart buttons.

devbobo wrote:

papajay,

that appears to be a SM bug. Normally, the navigation between images is done with <Prev and Next>, but SM Small seems to be missing that at the moment.

Cheers,

David

devbobo · July 31, 2006

Hey JT,

ok...bug might be a bit harsh

But i feel it needs to be consistent in regard to what and where things are included. I understand that there is overhead codewise but there would be even more overhead if someone was to code exceptions to handle where you don't include certain yui functions.

Just a thought.

Cheers,

David

devbobo · July 31, 2006

{JT} wrote:

Not a bug we are limited with space above the photo since the page width is so small and we still want to show the cart buttons.

ok...i'm big to admit i had a bug in my code

I have updated my script in the original post, to fix the navigation issue on the Smugmug Small.

Cheers,

David

{JT} · July 31, 2006

I just have not had time to think about including any YUI code on every page, and which ones to include

If the lighter versions have the same funcitonality then I have no problem using some of them on each page.

devbobo wrote:

Hey JT,

ok...bug might be a bit harsh

But i feel it needs to be consistent in regard to what and where things are included. I understand that there is overhead codewise but there would be even more overhead if someone was to code exceptions to handle where you don't include certain yui functions.

Just a thought.

Cheers,

David

papajay · July 31, 2006

Creature Comfort Enhancement...thanks so much!!!

{JT} wrote:

I just have not had time to think about including any YUI code on every page, and which ones to include If the lighter versions have the same funcitonality then I have no problem using some of them on each page.

JT/Devbobo: you tech-guys go ahead and debate the nuances* to your hearts' content. Meanwhile, I'm the happiest Smugmug user I've ever been with Devbobo's javascript addition. This is a HUGE improvement over the clunky mouse-in-the-house page-forward functionality.

*I know...you have design and software QC protocols to worry about before something like this can be integrated with the official user interface. I'm already enjoying the benefits. For the sake of other Smugmug users, I hope it doesn't take long for this capability to become "Standard". Thanks again for "Listening" and especially for "Taking ACTION".

Allen · August 4, 2006

L & R arrow navigation works great browsing galleries but I found one
problem. I was in the edit caption box adding a caption and used
the left arrow key to go back to correct some spelling (do this alot:D)
and was taken to the previous gallery page and therefore lost my caption.
Only solution was use mouse to position curser for editing. Happens in
edit gallery description box too.

No problem here but if someone was in the process of adding a large
caption or description they probably wouldn't be happy starting over.
AL

papajay · August 4, 2006

Allen's discovery confirmed!

Allen wrote:

L & R arrow navigation works great browsing galleries but I found one
problem. I was in the edit caption box adding a caption and used
the left arrow key to go back to correct some spelling (do this alot:D)
and was taken to the previous gallery page and therefore lost my caption.
Only solution was use mouse to position curser for editing. Happens in
edit gallery description box too.

No problem here but if someone was in the process of adding a large
caption or description they probably wouldn't be happy starting over.
AL

Allen:

I confirmed your findings on my site.

I "started" this (as a user, not a "coder"), so feel responsible for the unintended consequences. But since I'm not a coder, I can't fix it.

I suspect a relatively small number of Smugmuggers have implemented this to-date. Hopefully Devbobo (or another of his compatriots) will be able to address the problem. Even as it stands now, IMHO, the enhancement value for viewing galleries outweighs the inconvenience on the editing side (but I'm a bit prejudiced).

Andy · August 4, 2006

Allen wrote:

L & R arrow navigation works great browsing galleries but I found one
problem. I was in the edit caption box adding a caption and used
the left arrow key to go back to correct some spelling (do this alot:D)
and was taken to the previous gallery page and therefore lost my caption.
Only solution was use mouse to position curser for editing. Happens in
edit gallery description box too.

No problem here but if someone was in the process of adding a large
caption or description they probably wouldn't be happy starting over.
AL

It's an AJAX thing, and might be mitigated when using FF vs. IE6.

Allen · August 4, 2006

Andy wrote:

It's an AJAX thing, and might be mitigated when using FF vs. IE6.

Happens using FF 1.5.0.6 here on PC

BTW, I love it and can work around it.

dmc · August 4, 2006

Andy wrote:

It's an AJAX thing, and might be mitigated when using FF vs. IE6.

It would be nice if Smugmug made some enhancements to the viewing styles (especially Journal) instead of us trying to Hack at it.

I already have it hacked to view large images, hacked to go to lightbox instead of single image view, hacked to go to next page via arrow keys... (I noticed the edit caption quirk but since it's a hack I kept quiet)

I've asked for simple enhancements like "use the word 'Next>' instead of the single '>' character" just to make it easier to hit with the mouse, but we don't even get this 10 second mod.

We still can't select pics to order prints, just a simple check box maybe... Can't leave or display comments easily. I still think there should be an option to set how many pics per page are displayed (or let the viewer decide) and what size as well.

sorry to be grumpy, but all these suggestions have been made over and over, and don't seem difficult to do. I've been a smugmug user a year this month and have not seen any changes to the existing styles (specifically journal) since I've been here. (other than I can do a "thumbs up") I can think of ideas to make it better everyday, amazes me how there are so few changes...

I see major addons being made... mapping, popular photo's, and a couple new styles like critique and filmstrip, but I would really like some simple enhancements or options to the existing styles that we are already using...

enough rant, thanks for listening.

dmc · August 4, 2006

geee whiz, no wonder I'm grumpy about this...

a couple examples looking back...man I'm a broken record....

configurable journal
Oct 13 2005
http://www.dgrin.com/showthread.php?p=179423#post179423
Nov 28 2005
http://www.dgrin.com/showthread.php?p=204199#post204199

use next>, not just >
Jan 6, 2006
http://www.dgrin.com/showthread.php?p=224093#post224093
Feb 7, 2006
http://www.dgrin.com/showthread.php?p=257830#post257830

papajay · August 5, 2006

dmc wrote:

geee whiz, no wonder I'm grumpy about this...

a couple examples looking back...man I'm a broken record....

DMC, aka "grumpy" for the moment, appears to be justified in his grumpiness...(so it seems to me, at least). I followed his thread examples and saw he'd asked for 'Next>' instead of the single '>' character some time back. Just for the record (from a user's perspective), I think that is a good suggestion.

I'm learning by osmosis, and I've learned there's usually more than one way to achieve the same end. Software design seems to be the best example of that...some folks like Macs, some prefer PC's...some like using a mouse to navigate, some prefer keyboard commands.

I like dmc's "Next>" suggestion, but I personally hope the R/L Arrow suggestion survives as well (have been using it for a few days now, and REALLY LIKE IT!!).

Could someone who's actively involved in "official" (rather than hacking) design/feature mods at SM weigh-in on this?

papajay · August 6, 2006

"Hands free" (almost) Journal style viewing...

papajay wrote:

I personally hope the R/L Arrow suggestion survives as well (have been using it for a few days now, and REALLY LIKE IT!!).

Could someone who's actively involved in "official" (rather than hacking) design/feature mods at SM weigh-in on this?

Okay, I'll admit it...yes, I'm trying to keep this thread alive. Forgive me...this post might eventually get re-directed to the feature request forum, but I discovered something accidentally that has enhanced my "user experience" tremendously, which I thought I'd share.

I like journal style best, and added Devbobo's Java Script to allow use of the R/L arrow keys to move easily/seamlessly between gallery pages (while acknowledging that, as Allen discovered, it creates an inconvenience in the caption editing arena).

I also use a mouse with a clickable center wheel (Dell with "Intelimouse" software, as I recall). It allows me to click the wheel once to lock-in up-down scrolling. By hitting the up or down arrow once or twice controls the scrolling speed (once, too slow; three times, too fast: twice "just right").

The result is a bit like "film strip" style, only vertically like the rolling credits at the end of a movie, but with images large enough to actually see and read the captions. It's not herky-jerky as it is when Paging down or tapping the down arrow key repeatedly....it's Smmmoooooootttthhhh.

When I reach the last image on the gallery page, I right click the mouse to the next gallery page and repeat the process over until I'm through the entire gallery. [now, if I could only reset the number of images per gallery page to my own liking :eat , a feature which I know others have requested].

dmc · August 7, 2006

papajay wrote:

Okay, I'll admit it...yes, I'm trying to keep this thread alive. Forgive me...this post might eventually get re-directed to the feature request forum, but I discovered something accidentally that has enhanced my "user experience" tremendously

I tried the wheel mouse trick, works pretty good!. I tend to grab the scroll bar slider and drag it up and down.. gives me the best control.

your point about the "user experience" is my point exactly... first off, most users, who may have been invited to view some pics, don't join this forum and provide input... so I (since I'm probably the biggest viewer of my pics:D ) am here to represent them.

zenfolio is frequently touted as having the "pre-fetching" feature for performance... with journal, we have pre-fetching of 10 pics already! (large pics in my case with the hack)

I've been invited to view other people's photos at ofoto, and other places... you get either a little slideshow, or a screen full of thumbnails (icons!) to pick from and you hit each one that you think might be an interesting picture one at a time. smugmug is way better in this area (which is why I am here).

To view pics, I just want to see them as big as can reasonably be downloaded, and fast. I want to see all the pics, with black background (no "dim background" distraction), no themes needed, not one at a time... this should be the goal.

we are very close to this with the hacked journal... letting me pic how many pics per page (noone seems to have a hack for this request) would seriously improve this viewing style as well.. (in addition to pic size choice off course) ... ok ok, broken record again...

thanks for reading.... ok, enjoy some pics from dog beach... scroll down to view 10 LARGE pics, right arrow for next page of 10...
http://dmcpics.smugmug.com/gallery/1165957

papajay · August 7, 2006

Beating the "user experience" Drum

dmc wrote:

I tried the wheel mouse trick, works pretty good!. I tend to grab the scroll bar slider and drag it up and down.. gives me the best control.

your point about the "user experience" is my point exactly...

[ref. Zenfolio].. we have pre-fetching of 10 pics already! (large pics in my case with the hack)

... smugmug is way better in this area (which is why I am here).

To view pics, I just want to see them as big as can reasonably be downloaded, and fast. ...

we are very close to this with the hacked journal... letting me pic how many pics per page (noone seems to have a hack for this request) would seriously improve this viewing style as well.. (in addition to pic size choice off course) ...

...scroll down to view 10 LARGE pics, right arrow for next page of 10...
http://dmcpics.smugmug.com/gallery/1165957

dmc:
I did, in fact, check out your doggone good gallery, and enjoyed smoothly scrolling through/viewing your 10 LARGE pictures, then 10 MORE, then 10 MORE (thank goodness it wasn't a doggie wedding with 1 or 2 HUNDRED photos of the bride and groom).

I haven't yet loaded the large picture hack for the Journal style...liked the way yours looked (would my captions still display, though??...your pics were so large, it didn't appear there was room left for captions).

Screen navigation: keyboard shortcut for ">" ??

Comments