✔ Lightbox - Fokus auf Popup legen

S

shredder01

Mitglied
Hallo,

ich versuche mich gerade daran verschiedene Lightbox-Clone so hinzubiegen, dass bei geöffneter Lightbox der Tastaturfokus auf dem Lightbox-Popup liegt. Ich weiß, dass ich das generell mit der Javascript-Funktion focus() machen kann, allerdings will es bei mir irgendwie nicht funktionieren.
Mein erstes Versuchsobjekt ist diese modifizierte Lytebox hier http://www.faszination-china.com/about_imaging_lytebox.php. Um mein Ziel zu erreichen habe ich die Funktion start() um die Zeile
Code: 
this.doc.getElementById('lbMain').focus();
ergänzt (Zeile 467 in meinem Script). Bringt aber leider gar nichts. Wenn ich nach öffnen der Lightbox die Tabtaste benutze, dann wandere ich damit immer noch schön unter dem Overlay entlang.
Hier ist meine Testseite http://www.advanced-simple.de/lightboxtest/

Mein zweite Frage dazu betrifft meine Experimente zur selben Sache mit der prettyPhoto-Lightbox. Ich bin mir nicht richtig klar darüber, wie ich im jQuery-Umfeld so etwas lösen kann. Es gibt ja bei jQuery auch eine Funktion namens focus(), aber wenn ich das richtig gelesen habe, dann macht die etwas anderes als die JS-Funktion focus(). Gibt es da etwas jQuery-spezifisches oder würde man das setzen des Focus dann eher an jQuery vorbei erledigen?

Danke schonmal.
 
Zuletzt bearbeitet:
Moin,

das Problem beim Setzen eines Fokus ist jenes:
Es gibt nur bestimmte Dinge, welchen man den Fokus geben kann, z.B. Formularelemente und Links....und auch nur, wenn diese Elemente sichtbar sind.
 
Aha ... ok. So etwas ähnliches hatte ich bereits befürchtet.
Das heißt, dass Tipps wie diese hier http://www.dataschenk.com/newsletters/tips/websetfocus.htm, die man recht zahlreich im Netz findet, eigentlich Blödsinn sind ... weil es eben nicht überall geht.
Ok, dann macht das was die hier http://www.wordpress.dotflare.com/accessible-lightbox-plugin-fuer-wordpress/ gemacht haben schon wieder mehr Sinn: Die erzeugen nämlich einen zusätzlichen Link in der Lightbox (der aber keine weitere Funktion hat) und weisen dem den Fokus zu.

Es gibt nur bestimmte Dinge, welchen man den Fokus geben kann, z.B. Formularelemente und Links
Zum Vergrößern anklicken....
Ok, diesen Teil könnte man ja gut hinbekommen.
....und auch nur, wenn diese Elemente sichtbar sind.
Zum Vergrößern anklicken....
Hier bin ich mir nicht so ganz sicher. Wenn die Lightbox aufpoppt ist sie ja eigentlich sichtbar. Wäre die Frage ab welchen Punkt im Ablauf des Scriptes sie als sichtbar gilt.

Naja, muß ich mal testen.

Danke erst einmal.
 
Haha, es funktioniert.:)
Ich lasse jetzt vom Script den Fokus auf den Link mit der ID lbHoverNav(der fast das komplette Popup umgibt) legen und damit funktioniert es. Allerdings habe ich festgestellt, dass es in ganz seltenen Fällen bei Tastaturbedienung nicht funktioniert. Da bleibt dann der Fokus beim auslösenden Link. Keine Ahnung warum. Eventuell war da dann irgendwas noch nicht fertig. Wer weiß.
Jedenfalls funktioniert es in mindestens 95% der Fälle.

Prima! Erfolge am Wochenende. :D

So, dann kommt der nächste Punkt: Beim Schließen der Lightbox den Fokus wieder zurückreichen an den auslösenden Link. Naja, das sollte leichter machbar sein.

P.S. Hm, etwas zu früh gefreut. Die IEs spielen noch nicht mit. Nicht mal IE8. Naja, kleiner Wermutstropfen.

P.P.S. Hm, wie scheint hab ich das Thema doch zu früh für erledigt erklärt. Der Opera mag jetzt nicht einmal mehr das Bild in die Lytebox laden und die Sache mit dem Tastaturfokus funktioniert in Firefox, Safari und Chrome wie es aussieht erst nach dem "ersten Durchlauf". Wenn ich die Seite aufrufe und per Tastatur die Lytebox auslöse, dann bleibt der Fokus beim auslösenden Link. Habe ich aber alle Links einmal durchgeklickt, dann funktioniert es wie gewünscht. Sehr kurios.
Hat da jemand eine Idee dazu? Irgendwie klingt diese Sache, dass es erst einen Durchlauf braucht um zu funktionieren so als ob da etwas zu früh wäre.
 
Zuletzt bearbeitet:
Erzähle doch mal, was du mit dem Fokus überhaupt vorhast
Zum Vergrößern anklicken....
Aber gerne.:)

Ich möchte die Bedienbarkeit mittels Tastatur verbessern.
Bei nahezu allen Lightbox-Varianten und -Clonen ist es extrem schwierig sie per Tastatur zu bedienen. Hat man sie einmal geöffnet sitzt man oft "in der Falle" ... es sei denn man weiß zufälligerweise welche Tastenkombination der Entwickler zum Schließen vorgesehen hab (ESC funktioniert zwar meist, ist aber wohl vielen nicht geläufig).
Ich möchte erreichen, dass man nach dem Aufpoppen der Lightbox in ihr mit der Tabtaste navigieren kann. Also im Prinzip das Verhalten der modifizierten Lightbox von http://www.wordpress.dotflare.com/accessible-lightbox-plugin-fuer-wordpress/ auf andere übertragen.
Erstaunlicherweise funktioniert es dort browserübergreifend. Selbst der IE6 spielt bei deren Lightbox mit. Ich kann bloß im Moment noch nicht sehen, was bei denen anders gelöst ist.

Ich hab im Moment drei Probleme:
1. Die IEs (getestet IE6 und IE8) wollen so gar nicht mitspielen, sprich der Fokus bleibt beim auslösenden Link.
2. Bei Firefox, Safari und Chrome tritt das gewünschte Verhalten (Verlagerung des Fokus in die Lytebox nach dem Öffnen) erst auf, wenn man vorher schon eine Lytebox geöffnet hatte. Also wenn man die Seite frisch aufgerufen hat, dann funktioniert es nicht. Wenn ich aber, ob per Maus oder per Tastatur, eine Lytebox aufpoppen lasse und wieder schließe, dann funktioniert es ab dem nächsten Aufpoppen wie gewünscht. Warum auch immer.
Sieht für mich irgendwie so aus, als ob da an der Stelle wo ich es versuche irgendetwas noch nicht bereit ist, aber nachdem man die Lytebox mindestens einmal ausgelöst hat ist es bereit.
3. Der Opera weigert sich die Bilder in die Lytebox (bzw. in meine Modifikation) zu laden und rödelt stattdessen mit dem Ladebalken herum.

Im Moment weiß ich bei allen drei Problemen nicht recht wo ich ansetzen soll.

P.S. Ok, ich bin einen Schritt weiter. Problem 1 ist keins mehr. In den IEs zeigt die Lytebox jetzt dasselbe Verhalten wie in Firefox und Co. Der Entwickler der Lytebox, die ich verwende, hatte für verschiedene Elemente sowas wie das hier
Code: 
this.doc.getElementById('lbHoverNav').onfocus    = function() { (!this.ie ? objBody.focus() : blur()); };
eingebaut. Laut dem Kommentar im Code, wollte er damit nur die Umrandungen von Elementen, die im Fokus stehen verhindern. Zitat:
Below code is removing selection border when clicking on buttons.
Zum Vergrößern anklicken....
Ich hab den Abschnitt jetzt auskommentiert (erstmal um nicht gleich alles zu löschen) und hab damit jetzt auch in den IEs dasselbe Verhalten wie im Firefox.

Gut. Es geht voran. :D
 
Zuletzt bearbeitet:
Mmmh, also dieses Lightbox-Plugin ist zumindest in meinen Augen nicht gerade intuiitiv-wenn ein Bild offen ist, und ich TAB beutze, ist im FF das Bild weg, das overlay aber noch da.
Was soll den passieren, wenn man TAB drückt?
Bild& Overlay weg oder nächstes Bild anzeigen(würde ich als logisch empfinden)
 
Aha? Von welchen Plugin sprichst Du jetzt? Das Lytebox-Plugin was ich nutze, oder das Lightbox-Plugin dessen Verhalten ich nachstellen will?
Ehrlich gesagt kann ich das von Dir beschriebene Verhalten in keinem von beiden nachstellen. Merkwürdig

Gewünscht ist folgendes Verhalten: Bei geöffneter Lightbox/Lytebox kann ich mich mit der Tabtaste durch die Bedienelemente in der Lightbox klicken. Also ich komme zum Weiter-Button und zum Schließen-Button. Durch die Bilder kann ich mich mit den Pfeiltasten navigieren, was soweit ich gelesen habe auch üblich ist.
Und genauso funktioniert es auch bei mir. Ich habe es inzwischen auf drei Rechnern getestet (unter Windows XP, Vista und 7) und nirgendwo das von Dir beschriebene Verhalten beobachten können. Wo hast Du es ausprobiert?

Das einzige Problem, was ich im Moment noch habe, ist nur, dass dieses Wunschverhalten nicht bei einer frisch geladenen Seite auftritt. Ich muß mindestens eine Lytebox einmal ausgelöst haben, um dann ab dem nächsten Mal das Wunschverhalten zu bekommen.
Und ich weiß im Moment noch nicht woran das liegt.

P.S. Ah, ok ... ich glaube ich weiß was Du meinst. Wenn man mehrmals die Tabtaste drückt und gewissermaßen alle Bedienelemente durch hat, dann verschwindet bei dem Lightbox-Plugin das Bild und das Overlay bleibt. Das tritt bei der Lytebox wie ich sehe allerdings nicht so auf.

P.P.S. Ich sehe gerade, dass auch bei dem Lightbox-Plugin das Bild nicht wirklich verschwindet. Es ist noch vorhanden, allerdings außer Sichtweite, weil man wohl durch das mehrfache drücken der Tabtaste dann irgendwann doch wieder aus dem Popup herauskommt und dann den Fokus auf irgendetwas im Inhalt der Seite legt und damit das Popup aus dem sichtbaren Bereich schiebt. Das kann zum Glück bei der Lytebox-Variante, die ich nutze, nicht passieren, da dort beim Aufpoppen der Lightbox die Scrollbalken des Browsers abgeschaltet werden.
 
Zuletzt bearbeitet:
Von diesem: http://www.wordpress.dotflare.com/ac...uer-wordpress/
Zum Vergrößern anklicken....
Ja, hab ich inzwischen schon entdeckt. ;)
Aber wie schon geschrieben passiert das erst, wenn man alle Bedienelemente innerhalb der Lightbox durch hat.

P.S. Hm, das bringt mich zu einer neuen Fragestellung: Nämlich ob man nicht irgendwie das "herumtabben" bei aufgepoppter Lytebox innerhalb des Popups halten kann. Umgesetzt hat das soweit ich gesehen habe noch niemand. Wäre die Frage, ob es unmöglich ist. Muß ich mal drüber nachdenken.:)

P.P.S. Hm, aber damit ist immer noch nicht mein momentanes Hauptproblem gelöst, dass das Wunschverhalten bei der Lytebox erst ab dem zweiten Auslösen auftritt.
Hast Du (oder jemand anders) dazu eine Idee, woran es eventuell liegen könnte?
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück