✔ Lightbox - Fokus auf Popup legen

[Sven Mintel]

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.

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

 

[shredder01]

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.

<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?

 

[shredder01]

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

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

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-...schalten-hier-funktioniert-es-dort-nicht.html), wie sie es soll und sonst auch macht.