Pfeiltastennavigation mit onkeydown nachrüsten?

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo,

ich habe eine mit Lightroom generierte HTML-Galerie.
Leider kann man zwischen den Bildern nicht mit den Pfeiltasten (links/rechts) navigieren.

Normalerweise ändere ich mit Dreamweaver den Code im Nachhinein ab um z.B. Google-Analytics und und Facebook-Teilen-Button nachzurüsten.

Ist es irgendwie möglich die bestehenden href-links der weiter/zurück-grafik mit einem onkeydown Befehl zu erweitern, so dass man den Link für die zurück-Grafik mit der linken pfeiltaste und die weiter-grafik mit der rechten Pfeiltaste auslösen kann?

Vielen Dank,
Moritz

#2

Hallo. Tut mir leid, kann leider nicht weiterhelfen.

#3

Hi,

generell hätte ich ja gesagt.
Jedoch ohne Beispiel bzw Code kann ich nix dazu sagen.

#4

Hi Thorsten,

naja eine Galerie direkt aus Lightroom wäre diese hier:
http://www.mono-photography.de/galerien/oeffentlich/…

dort steht im code:

[Previous](javascript:ScrollArrow(‚left‘,‚toolbar‘,‚scroller‘,‚home-pane‘):wink:

[Next](javascript:ScrollArrow(‚right‘,‚toolbar‘,‚scroller‘,‚home-pane‘):wink:

Und ich als absoluter JavaScript-Laie hätte gerne diesen href-link direkt durch das drücken der linken oder rechten Pfeiltaste ausgelöst. Also über onkeydown und den entsprechenden Wert der Tasten (meine 37 und 39).

#5

Hallo Moritz,

ja, das geht. Die gedrückte Taste wird aber im IE anders abgefragt als im Firefox. Hier ein Beispiel, das beide Browser abdeckt:

http://de.selfhtml.org/javascript/objekte/event.htm#…

Du könntest dir auch JQuery anschauen - ein Framework, dass die Unterschiede zwischen den Browsern weitestgehend nivelliert und dass einem nach einer kurzen Einarbeitungszeit viel Arbeit erspart. Dort würdest du den code der gedrückten Taste so kriegen:

$("*").keydown(function(event){
var key = String.fromCharCode(event.keyCode);
// hier kannst du jetzt prüfen, ob key eine der pfeiltasten ist und dann den link ansteuern oder die funktion aufrufen, die das bildaustauscht.
});

Gruß,
Johannes

#6

Hallo Moritz,

ich habe leider keine Erfahrung mit Lightroom und kann mir daher auch den generierten Code nicht vorstellen. Prinzipiell kannst du aber mit Java Script die gedrückten Keycodes abfangen und eine Funktion zur Behandlung ausführen.

Die Keycodes für die Pfeiltasten sind
left arrow 37
up arrow 38
right arrow 39
down arrow 40

Siehe dazu auch hier: http://www.mediaevent.de/javascript/Extras-Javascrip…

Der folgende Beispielcode (Achtung ungetestet) sollte für die meisten Browser funktionieren:

window.onkeydown = function(event){
if (event.keycode == 37) {
document.getElementById(„ID DEINES HREF ELEMENTS“).click();
}
…
};

Wenn du aber sicher gehen willst, dass der Code in möglichst allen Browsern funktioniert, rate ich zu der Verwendung von JQuery. Mit JQuery würde das ganze in etwa so aussehen:

$(window).keydown(function(event){
if (event.keycode == 37) {
$("#ID DEINES HREF ELEMENTS").click();
}
});

Für Informationen zu JQuery siehe hier: http://jquery.com/

Gruß Björn

#7

Hallo Moritz,

ich kenne mich leider nicht mit Dreamweaver und Lightroom aus. Wenn es jedoch nur darum geht einen Tastendruck auszuwerten, kannst du auf Javascript mit dem onKeyDown-Ereignis zurückgreifen.
Falls dir das hilft melde dich einfach nochmal.

MfG

Nicky

#8

Hallo Moritz,

ich weis, daß es geht, da ich etwas ähnliches schonmal umgesetzt habe. Allerdings weis ich nicht mehr wie und es liegt ungefähr 2 Rechnerleben zurück. Ich bin mir aber ziemlich sicher, daß ich die Lösung damals in SELFHTML gefunden habe. Versuch dort mal Dein Glück.

Gruß

Alex