CSS3 Lightbox

[Jessica]

Hallo,

ich habe durch Zufall diese:

http://42blue.de/webstandards/bsp/css3-lightbox/css-lightbox.html#

CSS3 Lightbox gefunden. Endlich eine, die ohne JS auskommt, aber leider gibt es dort ein Problem, wenn ich viel Text habe zwischen drin ein Link zur Lightbox diese wieder schließe, springt die Seite nach oben, das ist unschön, weil der User nicht mehr weiß wo er war.

Könnte man dieses Problem umgehen?

Gruß
Jessica

[Der Martin]

Hi,

Endlich eine, die ohne JS auskommt, aber leider gibt es dort ein Problem, wenn ich viel Text habe zwischen drin ein Link zur Lightbox diese wieder schließe, springt die Seite nach oben, das ist unschön, weil der User nicht mehr weiß wo er war.

die Formulierung "springt nach oben" deutet darauf hin, dass da irgendwo ein Link mit dem Linkziel "#" ausgelöst wird. Eliminiere also diesen Link, oder gib ihm als Ziel einen besser geeigneten Anker innerhalb der Seite.

Ciao,
 Martin

[Jessica]

Hi,

die Formulierung "springt nach oben" deutet darauf hin, dass da irgendwo ein Link mit dem Linkziel "#" ausgelöst wird. Eliminiere also diesen Link, oder gib ihm als Ziel einen besser geeigneten Anker innerhalb der Seite.

da ist wirklich ein Link mit "#" drin siehe da

  
<a id="lb1" class="background-overlay" href="#"></a>  
  <div class="lightbox-container">  
    <div class="lightbox-content">  
  
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labor</p>  
      <a class="lightbox-close" href="#"></a>  
    </div>  
  </div>  

wenn ich diese allerdings entferne, dann geht die Lightbox nicht mehr.

Gruß
Jessica

[molily]

Hallo!

<a class="lightbox-close" href="#"></a>

Naja, die CSS-Lightbox funktioniert über den :target-Selektor. Wenn der Fragment Identifier (#foo) in der Adresse auf das Element zeigt, ist es sichtbar. Wenn nicht, dann nicht.

Um die Lightbox auszublenden, muss mittels <a href="#"> zurück auf »#« gelinkt werden. Da springt der Browser nunmal an den Dokumentanfang. (Oder auf irgendeinen Fragment Identifier, der nicht auf ein Lightbox-Element zeigt. Das ist aber auch nicht wünschenswert.)

Endlich eine, die ohne JS auskommt

Mit CSS alleine lässt sich das nicht lösen. Ein Grund, warum ich von solchen Lösungen mit :target abrate. Eine sauber umgesetzte JavaScript-Lightbox kann die Lightbox beim Klick schließen, ohne dass zum Dokumentanfang navigiert wird.

Grüße
Mathias

[Der Martin]

Hi,

Um die Lightbox auszublenden, muss mittels <a href="#"> zurück auf »#« gelinkt werden. Da springt der Browser nunmal an den Dokumentanfang. (Oder auf irgendeinen Fragment Identifier, der nicht auf ein Lightbox-Element zeigt. Das ist aber auch nicht wünschenswert.)

doch, das ist wünschenswert - wenn man einen Anker wählt, der extra dafür angelegt wird. Ich greife Jessicas Code-Snippet nochmal auf:

<a id="lb1" class="background-overlay" href="#"></a>

<div class="lightbox-container">
    <div class="lightbox-content">

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labor</p>
      <a class="lightbox-close" href="#"></a>
    </div>
  </div>

  
Was spricht denn nun dagegen, dem Schließen-Link (lightbox-close) ebenfalls eine ID zu geben und dann den Link auf sich selbst verweisen zu lassen? Dann springt nichts, weil sich das Linkziel - auch wenn es im Zuge dieser Aktion unsichtbar wird - bereits im sichtbaren Ausschnitt des Browserfensters befindet.  
  
Ciao,  
 Martin  

-- 
Lache, und die Welt wird mit dir lachen.  
Schnarche, und du schläfst allein.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[Bobby]

Moin

Was spricht denn nun dagegen, dem Schließen-Link (lightbox-close) ebenfalls eine ID zu geben und dann den Link auf sich selbst verweisen zu lassen? Dann springt nichts, weil sich das Linkziel - auch wenn es im Zuge dieser Aktion unsichtbar wird - bereits im sichtbaren Ausschnitt des Browserfensters befindet.

Es spricht dagegen, dass wenn ich außerhalb der Box klicke die Seite springt, da das target in diesem Falle leer ist!

Gruß Bobby

[Bobby]

Moin

Moin

Was spricht denn nun dagegen, dem Schließen-Link (lightbox-close) ebenfalls eine ID zu geben und dann den Link auf sich selbst verweisen zu lassen? Dann springt nichts, weil sich das Linkziel - auch wenn es im Zuge dieser Aktion unsichtbar wird - bereits im sichtbaren Ausschnitt des Browserfensters befindet.

Es spricht dagegen, dass wenn ich außerhalb der Box klicke die Seite springt, da das target in diesem Falle leer ist!

Ich muss mich revidieren. Wenn man dem overlay-Div ebenso die ID des lightbox-close-Elementes als Ziel gibt, funktioniert dies wunderbar.

Gruß Bobby

[Jessica]

Hallo,

Ich muss mich revidieren. Wenn man dem overlay-Div ebenso die ID des lightbox-close-Elementes als Ziel gibt, funktioniert dies wunderbar.

ich hab es so getestet, aber er springt noch immer:

  
<p><a href="#naja">Lightbox 1 öffnen</a></p>  
  
  
<a id="naja" class="background-overlay" href="#"></a>  
  <div class="lightbox-container">  
    <div class="lightbox-content"  id="naja">  
  
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labor</p>  
      <a class="lightbox-close" href="#" id="naja"></a>  
    </div>  
  </div>  

und darf eine ID nicht nur einmal vorkommen?

[Bobby]

Moin

ich hab es so getestet, aber er springt noch immer:

<p><a href="#naja">Lightbox 1 öffnen</a></p>

<a id="naja" class="background-overlay" href="#"></a>
  <div class="lightbox-container">
    <div class="lightbox-content"  id="naja">

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labor</p>
      <a class="lightbox-close" href="#" id="naja"></a>
    </div>
  </div>

>   
> und darf eine ID nicht nur einmal vorkommen?  
  
Du hast das falsch verstanden. selbstverständlich darf eine ID nur einmal vorkommen. Gibt dem Closebutton eine ID und verlinke darauf.  
  
bei der nächsten Box hat der Link natürlich eine andere ID.  
  
~~~html
  
<p><a href="#lb3">Lightbox 3 öffnen</a></p>  
<a id="lb3" class="background-overlay" href="#close3"></a>  
  <div class="lightbox-container">  
    <div class="lightbox-content">  
      <p><a href="#lb2">Lightbox 2</a></p>  
      <p>Lorem ipsum dolor sit amet, ..... </p>  
      <a class="lightbox-close" href="#close3" id="#close3"></a>  
    </div>  
  </div>  
  
<p><a href="#lb3">Lightbox 2 öffnen</a></p>  
<a id="lb3" class="background-overlay" href="#close2"></a>  
  <div class="lightbox-container">  
    <div class="lightbox-content">  
      <p><a href="#lb2">Lightbox 2</a></p>  
      <p>Lorem ipsum dolor sit amet, ..... </p>  
      <a class="lightbox-close" href="#close2" id="#close2"></a>  
    </div>  
  </div>  

und schon spriungt nichts mehr (geht allerdings im IE < 9 nicht!, da gibts noch kein target-Pseudo)

Gruß Bobby

[Bobby]

Moin

AHHHH sorry:

  
<p><a href="#lb3">Lightbox 3 öffnen</a></p>  
<a id="lb3" class="background-overlay" href="#close3"></a>  
  <div class="lightbox-container">  
    <div class="lightbox-content">  
      <p>Lightbox 3</p>  
      <p>Lorem ipsum dolor sit amet, ..... </p>  
      <a class="lightbox-close" href="#close3" id="#close3"></a>  
    </div>  
  </div>  
  
<p><a href="#lb2">Lightbox 2 öffnen</a></p>  
<a id="lb2" class="background-overlay" href="#close2"></a>  
  <div class="lightbox-container">  
    <div class="lightbox-content">  
      <p>>Lightbox 2</p>  
      <p>Lorem ipsum dolor sit amet, ..... </p>  
      <a class="lightbox-close" href="#close2" id="#close2"></a>  
    </div>  
  </div>  

Gruß Bobby

[Jessica]

Hallo,

vielen vielen Dank! Ich denke alles kleiner als IE9 kann man in der heutigen Zeit auch vernachlässigen oder? Sollte es nicht so sein, gibt es eine alternative was man machen könnte bzw. kann man ein Hinweis einblenden, bitte aktualisieren Sie ihren Browser?

Gruß
Jessica

[Bobby]

Moin

vielen vielen Dank! Ich denke alles kleiner als IE9 kann man in der heutigen Zeit auch vernachlässigen oder?

NEIN: http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0 Marktanteil 21%

Sollte es nicht so sein, gibt es eine alternative was man machen könnte bzw. kann man ein Hinweis einblenden, bitte aktualisieren Sie ihren Browser?

NEIN ... man kann Usern ja nicht zwingen zu updaten. Für solche USer kann man mittels Conditional Comments ein alternatives Script einbinden, was dann wirklich nur von diesen alten Browsern verwendet wird. Inwieweit das Frameworks wie zum Beispiel modrnizer bereits können, entzieht sich meiner Kenntnis

Gruß Bobby

[Mles]

Moin

selber moin,

vielen vielen Dank! Ich denke alles kleiner als IE9 kann man in der heutigen Zeit auch vernachlässigen oder?
Sollte es nicht so sein, gibt es eine alternative was man machen könnte bzw. kann man ein Hinweis einblenden, bitte aktualisieren Sie ihren Browser?

NEIN ... man kann Usern ja nicht zwingen zu updaten. Für solche USer kann man mittels Conditional Comments ein alternatives Script einbinden, was dann wirklich nur von diesen alten Browsern verwendet wird. Inwieweit das Frameworks wie zum Beispiel modrnizer bereits können, entzieht sich meiner Kenntnis

Spätestens dann, wenn man sich über conditonal Comments Gedanken macht, sollte man sich auch hinterfragen, ob die andere neue Lösung nun wirklich einen Fortschritt darstellt, oder nur ein Schnick-Schnack, auf dass man besser verzichten sollte.

Im Falle von CSS statt JavaScript würde ich allerdings eher auf "hilfreich" klicken für die Zukunft. Allerdings darf sich CSS dann mit der Programmierbarkeit keinesfalls weiter aus dem Fenster legen, als es das inzwischen tut. Wenn Teile der eigentlichen Programmlogik bedenkenlos auf das Frontend ausgelagert werden können, ist die Benutzbarkeit für ungestörte Prozessabläufe  schon wieder in Frage gestellt.

SelfGreetings

Mles

[Bobby]

Moin

Spätestens dann, wenn man sich über conditonal Comments Gedanken macht, sollte man sich auch hinterfragen, ob die andere neue Lösung nun wirklich einen Fortschritt darstellt, oder nur ein Schnick-Schnack, auf dass man besser verzichten sollte.

Solange die Verbreitung vom IE8 noch so signifikant hoch ist, ist eine solche Alternative nötig. Zukünftig wird sich die Situation hoffentlich bessern.

Im Falle von CSS statt JavaScript würde ich allerdings eher auf "hilfreich" klicken für die Zukunft. Allerdings darf sich CSS dann mit der Programmierbarkeit keinesfalls weiter aus dem Fenster legen, als es das inzwischen tut. Wenn Teile der eigentlichen Programmlogik bedenkenlos auf das Frontend ausgelagert werden können, ist die Benutzbarkeit für ungestörte Prozessabläufe  schon wieder in Frage gestellt.

Naja, das Anzeigen und Ausblenden von Inhalten würde ich nun nicht unbedingt zur Programmlogik zählen. Das zählt für mich schon zum CSS und das kann komplett beim Client geschehen.

Gruß Bobby

[Jessica]

Hallo,

Was spricht denn nun dagegen, dem Schließen-Link (lightbox-close) ebenfalls eine ID zu geben und dann den Link auf sich selbst verweisen zu lassen? Dann springt nichts, weil sich das Linkziel - auch wenn es im Zuge dieser Aktion unsichtbar wird - bereits im sichtbaren Ausschnitt des Browserfensters befindet.

das mit der ID das ist eine sehr gute Idee, werde ich gleich mal schauen ob es funktioniert. Danke für den Tipp.

Gruß
Jessica

[molily]

doch, das ist wünschenswert - wenn man einen Anker wählt, der extra dafür angelegt wird.

Klingt gut, ja.

Aus Accessibility-Sicht ist es ohnehin sinnvoll, dorthin zurückzuspringen, wo die Lightbox ausgelöst wurde.

(Ich bleibe dabei, dass sich das mit JavaScript viel robuster umsetzen lässt…)

Mathias

[Der Martin]

Hi,

(Ich bleibe dabei, dass sich das mit JavaScript viel robuster umsetzen lässt…)

das ist ein anderer Aspekt, den ich hier trotz meiner bekannt JS-kritischen Position nicht bestreiten mag.

Immerhin hat das Verhalten der CSS-Only-Lösung doch ein paar ungewohnte Eigenheiten - vor allem, dass die Lightbox sich nicht durch reflexartiges Drücken der Esc-Taste schließen lässt, wie die meisten JS-Implementierungen.

Ciao,
 Martin

[Tom]

Hello Jessica,
hello @ All,

[...]

da ist wirklich ein Link mit "#" drin siehe da

[...]

wenn ich diese allerdings entferne, dann geht die Lightbox nicht mehr.

ich möchte mal ein Anliegen an Dich herantragen, das mich hier im Forum schon lange bewegt.
Zuerst die einfache Frage: Hast Du einen eigenen Webserver / Hosting zur Verfügung? Betreibst Du eine Domain?

Nun der Grund für meine Frage:

Du stellst hier ein Thema in den Raum, das gewiss Viele interessieren wird in den nächsten Wochen, wenn nicht sogar Monaten. Leider können wir nicht sehen, um welches Problem es sich bei Dir handelt. Die Leute, die jetzt selber ganz basisorientiert Versuche anstellen, um Dir zu helfen, sind inzwischen gezählt. Außerdem ist nicht sichergestellt, dass Du später überhaupt nochmal wiederkehrst, um die Ergebnisse zu betrachten.

Diese Problematik ist nicht neu.

Es wäre also wünschenswert, ein kurzes Szenario des Problems direkt per Link erreichen zu können, am besten auf dem Self-Server, aber auch hilfreich AUF DEINEM SERVER.

Wenn Du dann Änderungen vornimmst an dem Beispiel -> Neuer Link. Bitte nicht das ursprüngliche Problem vom Server löschen, denn darauf zeigt ja immer noch ein Link.

usw.

Ich habe mich seit Jahren bemüht, meine Beiträge hier mit konsistenten Links zu versorgen, auch wenn das nicht immer einfach war und man aufgrund seiner Aussagen von vorgestern auch heute noch öfter mal angezählt wird. Ich halte dad dann aber so ähnlich, wie Konrad:
http://de.wikiquote.org/wiki/Diskussion:Konrad_Adenauer

"Was interessiert mich mein Geschwätz von gestern"

Man lernt dazu... (*)

Es wäre also schön, wenn Du uns ein Beispiel auf deinem Server bereitstellen könntest, das es dann auch in Jahren noch geben wird, vielleicht ergänzt durch einen Link auf diesen Thread, den es im Archiv hoffentlich auch in Jahren noch geben wird, usw...

Besser (?) wäre es vielleicht, wenn man Bilder und Programmstücke in den Self-Raum hochladen könnte, zumindest, wenn es um Konsitenz von archivierungswürdigen Beiträgen geht.
Dazu wäre dann auch jeweils das Einverständnis des Urhebers/Rechteinhabers erforderlich.

Ich denke, dass wir mit diesem Forum und dem hier versammelten Wissen durchaus zu einer "Konsolidierungsplattform 3.0" werden könnten...

Wissen sammeln, sortieren, diskutieren, verdichten und wieder breit verteilen. Das geht weit über Wikipedia hinaus, denn dort wird nicht empirisch, sondern immer noch hierarchisch gearbeitet.

(*) Eure dämlichen ANtworten kenne ich jetzt schon ;-P

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Jessica]

Sorry, ich verstehe nicht was du von mir willst? Ob ich eine Domain, Server oder Hosting habe ich doch ehrlich gesagt egal? Selbst wenn ich das habe, heißt das noch lange nicht, dass das auch in Jahren noch auf dem Server liegt, warum denn auch? Man entwickelt sich weiter, viele Technik ist nach Monaten / Jahren alt und sollte nicht mehr verwendet werden usw.

Außerdem habe ich doch ein Link geschickt wie das Beispiel aussieht! Einfach drauf klicken und du kommst zu einer Seite, die stammt nicht von mir, aber es ist ein Beispiel.

[Tom]

Hello,

Sorry, ich verstehe nicht was du von mir willst?

Schade!

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Jessica]

Du schreibst hier Sachen was NICHTS zum Thema beiträgt ich bitte dich dieses unter meinen Einträgen zu lassen. Oder bist du einfach nur dran interessiert zu wissen wer ich bin? Meine Domain gibt es hier 100% nicht und ich rate auch jedem dieses hier nicht zu veröffentlichen allein schon aus Datenschutzgründen.

In meinen Augen gehörst du aus diesem Forum ausgeschlossen, du willst nur an Adressen kommen! Ist meine Meinung!

[Tom]

Hello,

Du schreibst hier Sachen was NICHTS zum Thema beiträgt ich bitte dich dieses unter meinen Einträgen zu lassen.

Soll ich Dir einen Arzt rufen?

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Jessica]

Soll ich Dir einen Arzt rufen?

Ganz sicher nicht, aber hast du zum Thema beigetragen oder hast du einfach nur ein Dummer Kommentar geschrieben um an meine Daten zu kommen? Eher wohl das zweite. Wie gesagt halte dich einfach zurück, das ist immerhin mein Beitrag. Alle die Helfen wollen müssen erst dein Mist lesen!

[Bobby]

Moin

Soll ich Dir einen Arzt rufen?

Ganz sicher nicht, aber hast du zum Thema beigetragen oder hast du einfach nur ein Dummer Kommentar geschrieben um an meine Daten zu kommen? Eher wohl das zweite. Wie gesagt halte dich einfach zurück, das ist immerhin mein Beitrag. Alle die Helfen wollen müssen erst dein Mist lesen!

Du scheinst nicht zu wissen mit wem du sprichst. Ich würde dich bitten mal ruhig zu bleiben und den Hinweis einfach mal ernst zu nehmen!

Gruß Bobby

[Jessica]

Du scheinst nicht zu wissen mit wem du sprichst. Ich würde dich bitten mal ruhig zu bleiben und den Hinweis einfach mal ernst zu nehmen!

Sorry, wenn ich mir seine Seiten anschaue, dann kann ich mir den Rest denken. Ich finde es einfach nur Pervers nach Adressen zu fragen, gehört sich nicht. Meine Eltern dürften das nicht wissen, dass jemand fremder danach fragt.

[Der Martin]

Hallo,

Du schreibst hier Sachen was NICHTS zum Thema beiträgt ich bitte dich dieses unter meinen Einträgen zu lassen.

du missverstehst die Sache. Dass Tom mit seiner Generalkritik jetzt ausgerechnet deinen Beitrag erwischt hat, ist "Zufall". Es geht ihm um eine allgmeine Sache.

Oder bist du einfach nur dran interessiert zu wissen wer ich bin?

Bestimmt nicht. Ich glaube nicht, dass irgendwer das Forum als Stalking-Plattform missbrauchen will.

Es geht nur darum: Wer ein Problem beschreibt und Hilfe dazu möchte, der sollte bitte ein Beispiel ins Netz stellen, das *genau dieses* Problem zeigt, damit man es live anschauen und testen kann. Ob das auf deiner eigenen Domain oder etwa auf jsfiddle ist, spielt dabei keine Rolle.
Du verweist immerhin auf ein Beispiel "so ähnlich wie", und postest den relevanten Codeausschnitt dazu. Das ist fast ebensogut, also bräuchtest du dir den Schuh gar nicht anzuziehen. Nimm's locker - es ist ein allgemeiner Wunsch, der jetzt eben zufällig an deinem Beitrag dranhängt. Na und?

In meinen Augen gehörst du aus diesem Forum ausgeschlossen, du willst nur an Adressen kommen! Ist meine Meinung!

Völliger Unsinn! Zumindest in diesem virtuellen Raum kenne ich Tom schon lange genug, um sicher zu sein, dass er das garantiert nicht will.

Ciao,
 Martin

[1UnitedPower]

Meine Herren!

CSS3 Lightbox gefunden. Endlich eine, die ohne JS auskommt, aber leider gibt es dort ein Problem […]

… zwei, drei Probleme, hatten wir erst im Dezember: http://forum.de.selfhtml.org/archiv/2013/12/t215798/#m1478425