5202

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.

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.

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.

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