Zoom per CSS

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

Photo Zoom 3 verleiht Bildern eine Zoom-Funktion und kommt dabei ohne Javascript aus - ein optisch außergewöhnlicher Ersatz für Lightbox.

Kurzworkshop: Photo Zoom 3

© Archiv

Kurzworkshop: Photo Zoom 3

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:

<div class="PZ3zoom PZ3-l Bdr Cap
Lnk" style="width:210px; height:137px;"><a href="fehler.html" onclick=
"return false"><img src="i/DSC02120.jpg" alt=
"DSC02120"><span class="PZ31cap" style="width:
479px;"><span class="PZ3inr">Bildtext</span></span></a></div>

Ü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):

.PZ3zoom a img
{ height:100%; width:100%; }
.PZ3zoom a:hover img { height:auto;
width:auto; }

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

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".