Kurzworkshop: Photo Zoom 3 - Ersatz für Lightbox ohne Java

Lightbox-Varianten gibt es mittlerweile unzählige, die auch Videos, HTML-Seiten und andere Elemente präsentieren, dabei aber immer langweiliger werden.Photo Zoom 3 ist ein ähnlicher, aber bislang unverbrauchter Effekt: Sobald der Besucher per Mauszeiger auf ein Vorschaubild deutet, vergrößert es sich zum Originalbild. Letzteres schwebt dabei über dem restlichen Content.

PZ3 nutzt dasselbe Bild, um daraus die Vorschau und die Originalansicht zu erzeugen. Das spart Zeit bei der Bildbearbeitung und Ladezeit. Nach Wahl können Sie Bildunterschriften hinzufügen oder weglassen, Bilder mit Rahmen dekorieren und verlinken.

Die Lösung setzt ausschließlich auf CSS und lässt sich sowohl mit XHTML (1.0 Transitional/ Strict und 1.1) wie auch im Quirks-Mode nutzen. Nicht einmal der Senior unter den Webbrowsern, Internet Explorer 6, verweigert sich PZ3.

Photo Zoom 3 im Einsatz

Ein mit PZ3 eingefügtes Bild besteht im Kern aus einem img-Tag und gegebenfalls einer Bildunterschrift, die mit zwei span (span.PZ31cap > span.PZ3inr) ausgezeichnet wird. Das Ganze kann in ein a gehüllt werden und steckt in einem div, welches den Großteil der Arbeit erledigt. Über dem div angehängte Klassen bestimmen Sie Größe, Position und Funktion von PZ3.

Damit PZ3 funktioniert, müssen Sie zuvor das CSS, das Sie auf der zweiten Hälfte der Seite unter tinyurl.com finden, in Ihr CSS kopieren. Ein vollständiger PZ3- Codeblock sieht zum Beispiel so aus:

Über die div-Klasse PZ3zoom wird PZ3 aktiviert. Das folgende PZ3-l sorgt dafür, dass das Vorschaubild nach links floatet. Alternativ können Sie das Thumbnail über PZ3-r nach rechts fließen lassen. Mit Bdr sorgen Sie dafür, dass das Vorschaubild einen Rahmen erhält; noBdr deaktiviert denselben.

Die Farbe des Rahmens verändern Sie am besten direkt im PZ3-CSS. Cap zeigt PZ3, dass der Block auch einen Bildtext enthält. Die dem div per Inline-CSS aufgenötigten Höhen- und Breitenangaben bestimmen die Größe des Vorschaubildes. Unterdessen besorgt die Breitenangabe für das span.PZ31cap die Breite der Bildunterschrift.

Da diese nur angezeigt wird, wenn das Originalbild erscheint, sollte sie dessen Breite entsprechen. Übrigens: Auch wenn PZ3 das Originalbild über den Content legt, sollte das Foto nicht größer als ca. 900 x 600 Pixel sein. So wird es auch in kleineren Browserfenstern vollständig angezeigt.

So funktioniert PZ3

Der ohne PZ3 obligatorische Link zur Original-Version des Bildes kann theoretisch entfallen, denn das große Bild wird ja angezeigt, sobald man mit dem Mauszeiger auf die Vorschau gleitet. Praktisch geht das aber nicht. Ein Blick in das CSS zeigt, dass PZ3 den gesamten Zoom-Effekt an a:hover knüpft. Dort steht zum Beispiel (gekürzt):

Wegen height: 100% und width: 100% hat das verlinkte Bild grundsätzlich die Größe des Container-Elements, das heißt des div-Containers. Das ist die Thumbnail-Ansicht. Gleitet der Mauszeiger auf das Bild, wirkt die zweite Zeile.

Der Parameter auto sorgt dafür, dass der Zoom-Effekt aktiv wird - das Bild erscheint in Originalgröße. Weil Internet Explorer 6 die Pseudoklasse hover nur für Links unterstützt, kommt man um die Verwendung eines a nicht herum.

Wenn es kein werthaltiges Link-Ziel gibt, dann sollten Sie den Link durch den Javascript- Schnippsel onclick="return false" deaktivieren. Browsern mit abgeschaltetem Javascript wird die auf fehler.html enthaltene Fehlermeldung angezeigt.

Indem Sie die Klasse Link aus dem div entfernen, verhindern Sie, dass sich der Mauszeiger über dem Bild in eine kleine Hand verwandelt. Das minimiert den Reiz zu klicken noch ein wenig.

zm_timkaufmann