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/abo...ng_lytebox.php. Um mein Ziel zu erreichen habe ich die Funktion start() um die Zeile

Code :

1	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.

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/newsletter...ebsetfocus.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/ac...uer-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

Ok, diesen Teil könnte man ja gut hinbekommen.

....und auch nur, wenn diese Elemente sichtbar sind.

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.

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.

Erzähle doch mal, was du mit dem Fokus überhaupt vorhast

Erzähle doch mal, was du mit dem Fokus überhaupt vorhast

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/ac...uer-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 :

1	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.

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.

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.

Zitat von shredder01

Aha? Von welchen Plugin sprichst Du jetzt? Das Lytebox-Plugin was ich nutze, oder das Lightbox-Plugin dessen Verhalten ich nachstellen will?

Von diesem: http://www.wordpress.dotflare.com/ac...uer-wordpress/

Von diesem: http://www.wordpress.dotflare.com/ac...uer-wordpress/

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?

Zitat von shredder01

Aber wie schon geschrieben passiert das erst, wenn man alle Bedienelemente innerhalb der Lightbox durch hat.

Die Lightbox/Lytebox hat aber nur 1 sichtbares Bedienelement von Hause aus...den Button zum Schliessen.

Zitat von mir

Es gibt nur bestimmte Dinge, welchen man den Fokus geben kann, z.B. Formularelemente und Links....und auch nur, wenn diese Elemente sichtbar sind.

Die Lightbox/Lytebox hat aber nur 1 sichtbares Bedienelement von Hause aus...den Button zum Schliessen.

Nun ja, für meine Testseite stimmt das nicht. Da gibt es ja noch die Vor- und Zurück-Button. Die Beschriftung davon wird zwar erst angezeigt, wenn man drüberhovert, aber im Prinzip (wenn man in den Code guckt) ist die komplette linke Hälfte des Bildes im Popup der Zurück-Button und die rechte der Vor-Button. Oder sehe ich das falsch?
Die Idee, den Fokus nicht auf lbHoverNav, sondern auf lbClose (also den Schließen-Button) zu legen, hatte ich auch schon bekommen, allerdings funktioniert damit merkwürdigerweise die Fokusverlagerung überhaupt nicht mehr.
Irgendwas übersehe ich da wohl noch, ich weiß bloß noch nicht was.
Das es bei frisch geladener Seite nicht funktioniert, aber nachdem schon mal eine Lytebox ausgelöst wurde sehr wohl, leuchtet mir im Moment noch überhaupt nicht ein.

P.S. Vielleicht noch mal ergänzend das HTML des Lytebox-Popups. Wenn ich den Fokus dem Anchor lbHoverNav zuweisen lasse, dann funktioniert es, aber erst ab der 2. geöffneten Lytebox. Beim Anchor lbClose dagegen bleibt der Fokus weiterhin beim auslösenden Link.

HTML-Code:

<div id="lbMain">
    <div id="lbOuterContainer" class="grey">
        <div id="lbIframeContainer">
            <iframe frameborder="0" id="lbIframe" name="lbIframe" style="display: none;" src="about:blank">
            </iframe>
        </div>
        <div id="lbImageContainer">
            <img width="252" height="233" id="lbImage" src="images/screenshot-ebs.jpg" style="opacity: 1;">
            <a id="lbHoverNav" title="Schliessen" href="images/screenshot-ebs.jpg">
            <a id="lbPrev" title="Vorhergehendes Bild." class="grey" href="images/screenshot-ebs.jpg" style="display: none;"></a>
            <a id="lbNext" title="Nächstes Bild." class="grey" href="images/screenshot-ebs.jpg"></a>
            <a id="lbC2Cleft" title="Schliessen" class="grey" href="images/screenshot-ebs.jpg"></a>
            <a id="lbC2Cright" title="Schliessen" class="grey" href="images/screenshot-ebs.jpg"></a>
            </a>
            <div id="lbInfoDisplay" style="display: none;">
            </div>
        </div>
        <div id="lbLoading" style="display: none;">
        </div>
    </div>
    <div id="lbDetailsContainer" class="grey" opacity: 1;">
        <div id="lbDetailsData" class="grey">
            <div id="lbDetails">
                <span id="lbCaption">Bild 1</span>
                <span id="lbNumberDisplay">Bild 1 von 3</span>
                <span id="lbNavDisplay" style="display: none;"></span>
            </div>
            <div id="lbBottomNav">
               <a id="lbClose" title="Schliessen" class="grey" href="#"></a>
                <a id="lbPause" title="Diaschau anhalten" class="grey" href="#" style="display: none;"></a>
                <a id="lbPlay" title="Diaschau fortsetzen" class="grey" href="#" style="display: none;"></a>
                <a id="lbSave" title="Use this button to get link to current image" class="grey" href="#" style="display: none;"></a>
                <a id="lbResize" title="Dieses Bild an den Bildschirm anpassen ODER zurück zur Originalgrösse.Tastatur: 'R' oder 'S' drücken" class="grey" href="#" style="display: none;"></a>
                <a id="lbInfo" title="Mehr information zu diesem Bild anzeigen.Tastatur: 'I' drücken" class="grey" href="#" style="display: none;"></a>
                <a id="lbExif" title="EXIF information zu diesem Bild anzeigen.Tastatur: 'E' drücken" class="grey" href="#" style="display: none;"></a>
                <a id="lbGeo" title="Geo/Positionsinformationen zu diesem Bild anzeigen.Tastatur: 'G' drücken" class="grey" href="#" style="display: none;"></a>
                <a id="lbBack" title="Zurück zum Bild. Tastatur: 'Z' drücken" class="grey" href="#" style="display: none;"></a>
            </div>
        </div>
    </div>
</div>

Ich hab ja für Testzwecke :focus per CSS eine dicke, fette rote Umrandung zugewiesen, so dass man ohne große Anstrengung immer sehen kann wer gerade den Fokus hat.
Der Ablauf im Moment ist folgender:
Ich rufe die Testseite http://www.advanced-simple.de/lightboxtest/ auf, klicke auf eines der Bilder (Auslösung per Maus oder per Tastatur ist hier völlig egal), das Lytebox-Popup öffnet sich und ich sehe, dass der Fokus nicht auf dem Popup liegt, sondern beim auslösenden Link unter dem Overlay geblieben ist.
Dann schließe ich die Lytebox wieder.
Und anschließend klicke ich erneut, entweder auf dasselbe Bild oder eines der anderen beiden, um nochmals eine Lytebox auszulösen.
Und dieses mal (und auch bei allen weiteren Versuchen) ist klar erkennbar, dass der Fokus wie gewünscht auf dem Popup liegt.
Mache ich einen Reload der Seite und versuche es erneut, dann bleibt beim ersten Anklicken der Fokus wieder unter dem Overlay.

Und genau das kann ich irgendwie überhaupt nicht nachvollziehen. Was hat sich nach dem Öffnen der ersten Lytebox (und wieder Schließen) geändert?

Dieser Thread ist zwar schon ein paar Monate alt, aber ich hab gerade wieder etwas Zeit gefunden, um daran herumzubasteln und dabei 'ne Lösung gefunden. Vielleicht hat ja mal jemand ein ähnliches Problem.
Wie ich schon vage vermutet hatte war ich mit meiner Aktion den Focus zu versetzen einfach zu früh dran. Ich hatte mein

Code :

1	this.doc.getElementById('lbHoverNav').focus();

in die Funktion start(), die für das Öffnen der Lytebox zuständig ist, ganz ans Ende eingefügt. Zu dem Zeitpunkt ist zwar <a id="lbHoverNav"></a> schon "anwesend", aber ihm wurde noch kein href zugewiesen. Das passiert erst später in der Funktion showContent() mit folgender Zeile

Code :

1	this.doc.getElementById('lbHoverNav').href  = this.imageArray[this.activeImage]['href'];

. Wenn ich meine Zeile mit dem focus() danach platziere, dann funktioniert alles wie gewünscht ... nämlich auch bei frisch geladener Seite.
Damit ergibt dieser merkwürdige Fehler (das nachdem ich mindestens einmal eine Lytebox geöffnet habe alles korrekt funktioniert, aber beim ersten Öffnen eben nicht) auch endlich einen Sinn. Nach dem ersten Öffnen der Lytebox hat nämlich lbHoverNav immer einen href-Wert.

Fein, ein Problem weniger und wieder was dazugelernt.

Jetzt muß ich bloß noch herausbekommen warum die Lytebox innerhalb einer Wordpress-Seite nicht die Scrollbalken abschaltet (http://www.tutorials.de/javascript-a...ort-nicht.html), wie sie es soll und sonst auch macht.