Robert Bienert: Beispiel für unobstrutive DOM Scripting: Popups

Beitrag lesen

Hallo Tim!

so ziemlich alle Bildergallerien haben das Problem, eine Funktion anzubieten, Bilder größer darzustellen, nach den üblichen Gewohnheiten durchaus durch einen Klick auf das Bild selber. Auf eine nette Lösung bin gerade zufällig gestoßen, eine Gallerie von Screenshots einer Mac-Software:

http://kula.jp/software/endo/screenshots/
(JS aktiviert haben, auf den Link klicken, fertig laden lassen, ausprobieren. Ich warte dann so lange)

So nett finde ich die Lösung aber nicht: Wieso muss ich denn zum Ausblenden eines Bildes auf dieses unauffällige Kreuz klicken? Rein intuitiv habe ich natürlich erst einmal auf den roten Button oben links im Screenshot geklickt und leider passierte nichts. Der Trichter-Effekt funktionert leider auch nicht :-(

¹ Verbesserungsfähige Dinge, die mir so spontan auffallen:

[…]

• Eine intuitive GUI dafür. Die derzeitige ist von Apples Dashboard geklaut, das dürfte für Nicht-Mac-Benutzer nicht unbedingt sofort einleuchtend sein. Das Verdunkeln natürlich, aber die konkrete Darstellung des Bildes könnte man verändern, einen Rahmen zur besserne Abgrenzung, den Schließ-Button an die intuitivere rechte obere Seite des Bildes stellen.

Hey, wenn eine GUI intuitiv ist, dann die des Macs! Aber der Schließbutton sollte besser hervorgehoben werden (und vielleicht der rote Button für uns zusätzlich ;-) ). Das mit der rechten oberen Seite ist Geschmackssache, denke ich: Da die Links zu den Screenshots eher links angeordnet sind, hat man nach dem Laden des vergrößerten Bildes immer noch seine Maus an dieser Stelle.

BTW: Interessant zu sehen, wie Dashboard aussieht (hab noch Panther auf dem Mac). Aber von Expose kennt man so ein Look&Feel ja auch schon.

• Die konkrete Positionierung des Bildes bzw. des halbtransparenten Layers könnte geschickter mit CSS-Regeln geregelt werden, anstatt dämliche Berechnungen mit konkreten Pixelwerten in JS zu machen. position:fixed, position:absolute schwebt einem da vor. Wobei ich keine Ahnung habe, ob es derzeit eine Möglichkeit gibt, ein Element ohne Kenntnis seiner Größe im Vierport zu zentrieren.

Schuss ins Blaue: Wie wäre es denn mit text-align: center; vertical-align: center; (<http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm@title=CSS-Eigenschaften für Ausrichtung und Absatzkontrolle>) oder margin: auto; (<http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=Außenrand und Abstand>).

• Die „Barrierefreiheit“ ist für die Mein-Browser-Gehört-Mir-Rufer hier im Forum ja nicht mehr gegeben, weil sie die größeren Bilder z.B. nicht in neuen Tabs öffnen können. Eine nachträglich eingefügte Checkbox „[x] In Popups öffnen“ anhand deren Wert die Funktion showPic() ausgeführt wird oder eben nicht wäre da ein Kompromiss.

Diese Lösung wäre durchaus sinnvoll. Aber das mit dem neuen Tab ist doch auch kein Problem: Kontextmenü → Bildadresse kopieren, dann ein neuer Tab und Einfügen.

Viele Grüße,
Robert