5202

ein Blog über technische Fragen zu Blogger

Bilder durch Pseudoklasse :focus im Blog vergrößern

von
Manchmal möchte ich ein Bild direkt im Blog vergrößern - anstatt das eine Lightbox aufpoppt oder das 'große' Bild in einem neuen Tab erscheint.

Klickt auf eins der Bilder - es kommt dann die Originalgröße. Mit der Tabulatortaste könnt ihr euch vorwärts oder mit Umschalt + Tabulator rückwärts durch die Bilder durchklicken. Mit einem Klick auf einen beliebige Punkt außerhalb des Fotos geht's zurück zum Text.

Wie funktioniert's?

Die Demo benützt die Pseudoklasse :focus, d.h. ein durch Maus-Klick oder Tabulatortaste markiertes Element wird eine spezifische CSS gegeben. Ich muss zugeben, lange Zeit fand ich keinen rechten Sinn für :focus. Erst Stu Nicholls, der :focus oft als 'Auslöser' für kleine, simple Bildergalerien ohne Javascript benützt, hat mich auf den Gedanken gebracht, dass mal in Blogger auszuprobieren.

Die Änderung der Größe geschieht durch eine height Anweisung in der CSS. Die Bilder sind in Originalgröße hinterlegt und werden im 'Grundzustand' verkleinert, bei :focus in Originalgröße angezeigt. In den dynamischen Ansichten werden Bilder immer mit der im Quelltext vorgegebenen Größe angezeigt, das muss mit !important gebrochen werden.

Umsetzung

Der HTML-Code für die Bilder sind drei img Tags nacheinander. Die CSS definiert einen 'Grundzustand' der Bilder mit height:96px; und einen :focus mit der Originalgröße von height:599px. Simpler wäre, ich könnte eine height:auto; geben, das wird in den dynamischen Ansichten von Blogger aber falsch interpretiert - es braucht in der Pseudoklasse :focus also eine feste Höhe.

Der Code

<style>
.auf{
  height:96px !important; 
  cursor:pointer; 
  display: inline; 
  padding: 5px !important;
}
.auf:focus {
  position:absolute; 
  top:60px;
  left: 250px;
  height:599px !important; 
  z-index:100; 
  background:#ffffff; 
  padding:10px !important;
  outline:none;
}
</style>
<div style="text-align: center;">
<img alt="" class="auf" src="http://goo.gl/3cL3d" tabindex="1" /><img alt="" 
class="auf" src="http://goo.gl/j6wwp" tabindex="1" />
<img alt="" class="auf" src="http://goo.gl/6ifrn" tabindex="1" /></div>

Fragen? Anregungen?

Ihr steckt irgendwo fest und kommt nicht weiter? Im Post sind Fehler? Ihr findet das eine klasse Idee für euren Blog? Ich freue mich über eure Fragen, Kommentare oder auch weiterführende Ideen!