TYPO3: Klick-Vergrößern (click enlarge) mit Lupe

TYPO3 hat eine nette Großansichts-Funktion für Bilder eingebaut, das "Klick-Vergrößern" (Click-Enlarge): Ist im Backend der Haken "Bei Klick vergrößern" gesetzt, können Webseiten-Besucher auf das Bild klicken und eine Großansicht aufrufen. Dumm nur, dass sich TYPO3 überhaupt keine Mühe gibt, auf dieses Feature aufmerksam zu machen. Die Besucher müssen von allein auf die Idee kommen, auf dem Bild herumzuklicken um zu schauen, ob sich vielleicht eine Großansicht öffnet.

Sinnvoll wäre ein kleines Symbol, damit der Nutzer direkt erkennt, dass eine Zusatzfunktion auf ihn wartet. Eine Lupe zum Beispiel!

Googelt man nach "Lupe zum Klick-Vergrößern bei Typo3", dann findet man viele Anleitungen mit mehr oder minder komplexem Typoscript. Aber es geht viel einfacher ohne Typoscript – nur mit CSS!

Die folgenden Zeilen sind sowohl für TYPO3 4.5 als auch für TYPO3 6.0 / 6.1 / 6.2 geeignet – und auch gleich schon für die Extension perfect_lightbox ausgelegt. Deshalb ist der Code etwas länger:

 

.csc-textpic-imagewrap, .csc-textpic-single-image, .csc-textpic-image {
position: relative;
display: block;
}
.csc-textpic-imagewrap a.lightbox:before, .csc-textpic-imagewrap a[rel]:before, .csc-textpic-imagewrap a[onclick]:before, .csc-textpic-single-image a:before {
position: absolute;
right: 0px;
bottom: 0px;
content: url('click-enlarge.png');
}
.csc-textpic-image a.lightbox:before, .csc-textpic-image a[rel]:before, .csc-textpic-image a[onclick]:before {
position: absolute;
right: 0px;
bottom: 0px;
content: url('click-enlarge.png');
}

Die Klick-Vergrößern-Lupe wird per CSS-Pseudoelement :before an den A-Tag angefügt, der das Bild umgibt und die Klick-Vergrößern-Funktion auslöst. Damit das Symbol vor dem Bild liegt, statt davon verdeckt zu werden, müssen alle "normalen" Bilder per .csc-textpic-image { position: relative; } relativ positioniert werden, das Pseudoelement dagegen absolut – und zwar rechts unten in der Bildecke: .csc-textpic-image a:before { position: absolute; right: 0px; bottom: 0px;}.

Weil nicht nur "Bei Klick vergrößern"-Bilder ein umschließendes A-Tag haben, sondern auch Bilder mit Link z.B. auf eine Unterseite, kommt der Attribut-Selektor a[onclick] (für TYPO3 4.5) bzw. a[rel] (für TYPO3 6.x) zum Einsatz. Er stellt sicher, dass die Lupe wirklich nur für Klick-Vergrößern-Bilder erscheint.

Die Zeile content: url('click-enlarge.png') muss natürlich an den individuellen Dateinamen und Speicherort angepasst werden. Das Lupen-Symbol ist übrigens halbtransparent, damit das eigentliche Bild noch durchschient.

Alle halbwegs aktuellen Browser verstehen :before (Firefox, Chrome, Safari ab v1.0, Opera ab 5.0, Internet Explorer 8 und neuer), Steinzeit-Browser wie IE6 und IE7 ignorieren es: Die Lupe wird dann nicht gezeigt, Klick-Vergrößern bleibt aber erhalten.