/    Sign up×
Community /Pin to ProfileBookmark

Slide Show Navigation Ehancement

Copy linkTweet thisAlerts:
Jan 14.2006

Hi. I found this site quite by accident What a great resource.

I’ve been trying to come up with a way to use onKeyDown with a web-based slide show. I searched this site and found a few that are in the ballpark. I am not knowledgeable enough to alter them too much.

Since the images may vary in size and appear in both landscape and portrait orientation, I am trying to free the user from having to continually move the mouse back to the <<Back, Home and Next>> links. So, I thought that navigating would be much easier if the user also had the choice of simply hitting the B, H, and N keys. I’m sure such code would benefit other slide show routines. Here’s what I have so far. I figure that its going to take an onKeyDown within and if/else. Has anyone seen such an onKeyDown application? Thank you for reading, Thomas

Here’s the page so far: [url]http://www.trsmt.com/SlideShow.html[/url]

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ExuroJan 14.2006 — It would actually probably be better if you just used the [FONT=Courier New]accesskey[/FONT] attribute for anchor tags instead of trying to do all this javascript:[code=html] <tr>
<td align="center">
<a class="Controls" href="#" accesskey="B">&lt;&lt;
Back</a>
</td>
<td align="center">
<a class="Controls" href="index.shtm" accesskey="H">Home</a>

</td>
<td align="center">
<a class="Controls" href="#" accesskey="F"><b>Next &gt;&gt;</b></a>
</td>
</tr>[/code]
Hitting the Alt key plus the key specified in the [FONT=Courier New]accesskey[/FONT] will have the same effect as clicking on the link with the mouse.
Copy linkTweet thisAlerts:
@fire101authorJan 17.2006 — Thank you Euro, I'll copy & paste your code and give it a try. I really appreciate your response.
Copy linkTweet thisAlerts:
@web_dudeJan 17.2006 — Check out [URL=http://www.grslideshow.com]GRSlideShow[/URL].

It is a great slideshow open source library, see the examples, you might find something that fits your needs.
Copy linkTweet thisAlerts:
@KeveyJan 17.2006 — Try this code...you would have to put it on each slide and change as appropriate.

[CODE]<!-- SCRIPT FOR CHOOSING A LINK WITH A KEYSTROKE VICE CLICKING -->
<SCRIPT LANGUAGE="JavaScript">

var key = new Array();
key['b'] = "page1.html";
key['h'] = "page2.html";
key['n'] = "page3.html";

function getKey(keystroke) {
isNetscape=(document.layers);

eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
for (var i in key) if (which == i) window.location = key[i];
}
document.onkeypress = getKey;
</script>[/CODE]
×

Success!

Help @fire101 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 7.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,

tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,

tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,
)...