Die CSS3 Lightbox von gestern war ja schon ganz nett .. allerdings gabs auf dem iPhone noch ein paar Probleme .. also je nacht Sichtweise .. 🙂

Die Lightbox war auf eine max. Breite von ca. 45% eingestellt. Für den kleinen Screen eines iPhones natürlich nicht wirklich geeignet (zwar lesbar .. aber nicht schön). Daneben gab es ein kleines Darstellungsproblem wenn der Inhalt der Lightbox sehr umfangreich war .. durch position:fixed hatte man nicht die Möglichkeit zu scrollen.

Beides habe ich nun gelöst ..

Die Breite der Lightbox ist nun von der Breite des Viewports abhängig. d.h. ein iPhone4 bekommt die Lightbox in ca. 80% Breite, ein großer Monitor mit 45% Breite angezeigt.

Ebenso kann man nun den kompletten Inhalt einer überlangen Lightbox erscrollen.

Verändert beim testen einfach die Fenstergröße des Browsers .. damit man es besser sieht stehr oben immer die gerade aktive Auflösung drin .. und die Farbe der Lightbox variiert.

Hier die CSS3 Lightbox mit Media Querys.

Ich hacke ja schon etwas länger an HTML5 und CSS3 rum und probiere wie weit man es treiben UND dann auch noch verwenden kann. Mit dem Path Menü hab ich damals den Hack mit dem checked Selector und den versteckten Input Felder ausprobiert.

Die CSS3 Lightbox die ich gebaut habe funktionieren im IE10, FF, Chrome und Safari. Auf mobilen Endgeräten funktionieren die Boxen auch. Getestet auf dem iPhone und iPad unter iOS > 5.1.

Der Selector bei diesem Beispiel ist der TARGET Selector. Er ist dazu gedacht, das aktive TARGET Element, das per Anker angesprungen wurde zu stylen. Daneben spiele ich mit der VISIBILITY und der OPACITY um einen Lightbox Effekt zu erzielen.

Beide Eigenschaften sind auch notwendig da die ganzen Overlays ja direkt in den Viewport geklebt werden .. aber (erst mal) nicht klickbar sein sollen wenn sie nicht zu sehen sind.

Wenn die Lightbox offen ist .. soll jeder Klick um die Lightbox herum zum schließen der Lightbox führen .. so kennt es der User .. dazu muss man das komplette teiltransparente graue Overlay nach dem erscheinen der Lightbox klickbar machen.

Auch kein Problem .. einfach dem Overlay einen leeren Ankerlink verpassen und den Cursor auf default setzen.

Mit dem PLUS Selector und ein paar CSS Transitions kann man dann daraus jede Menge Sachen machen die vorher nur per JS möglich waren .. in diesem Fall ein paar Lightboxen.

Das CSS steht direkt im HTML Dokument .. und auch sonst hab ichs erst mal einfach gehalten.

Hier das Beispiel – CSS3 Lightbox ohne JavaScript.