Was eine Lightbox ist, muss sicherlich nicht erklärt werden. In Typolight ist der TinyMCE Editor so konfiguriert, dass man via Button Bilder mit Lightbox-Effekt einfügen kann. Aber das ist nicht der einzige Weg: Bilder in einem Artikel können außerdem als eigenständiges Element (Elementtyp Bild) hinzigefügt werden oder als Bild im Elementtyp Text. Bei beiden Möglichkeiten wurde auch hier wieder an alles gedacht: Via Checkbox kann man bestimmen, ob der Lightbox Effekt hinzugefügt werden soll oder nicht.

Wenn aber nun jemand eine Webseite betritt, können zunächst einmal normale Bilder und Bilder mit Lightbox-Effekt nicht unterschieden werden. Der User muss schon mehr oder weniger zufällig über ein Bild hovern um zu erkennen, dass man es anklicken kann. Insofern fand ich es sinnvoll, Bildern mit Lightbox-Vergrößerung eine Mini-Icon in Form einer Lupe hinzuzugeben. Damit wird klar gemacht, dass man das Bild anklicken und vergrößern kann.

Möglichkeiten eine solche Lupe ohne viel Aufwand mit reinem CSS zu erzeugen gibt es viele. So z.B. könnte man die Lupe als Hintergrundbild einfügen oder – wenn man auf den IE6 nicht so viel Wert legt über den Attributselektor rel=“Lightbox“ gezielt die Links mit Lightbox auswählen. Hat aber den Nachteil, dass die Lupe zwar angezeigt wird, selbst aber nicht anklickbar ist. Und das ist aus meiner Sicht nicht ok, denn eigentlich bedeutet das icon ja: „hier klicken, dann wird’s vergrößert“ und würde wohl auch als erstes angeklickt.

Es ist jedoch relativ einfach in Typolight auch als Nicht-Profi-Programmierer über die Templates in den code einzusteigen und der Ausgabe des Lightbox-Links ein image-Tag für die Lupe hinzuzufügen. Typolight hat erfreulicherweise an alles gedacht. Sicherlich ist es auch z.B. in WordPress möglich die Templates online zu bearbeiten, aber Typight geht hier noch einen intelligenten Schritt weiter: Über den Menüpunkt „Templates“ im Backend kann man das Template, welches man ändern möchte, auswählen. Typolight erzeugt dann automatisch eine Kopie davon und legt diese im Ordner „templates“ an. Ist zu einem Template eine Kopie vorhanden, wird diese verwendet, wenn nicht, verwendet TL die Originaldatei. Der Clou an der Sache ist, dass alle Dateien, die sich im Ordner „templates“ befinden bei einem update nicht überschrieben werden. Insgesamt ist diese Organisation und die Bearbeitungsmöglichkeit für Webdesigner, die mit diesem System arbeiten und selbstständige gestalten möchten schon mehr als ideal.

Aber zurück zur Lupe.
Auch als Noitz an mich selber beschreibe ich jetzt kurz wie man der Lightbox eine Lupe hinzufügt.

Zuerst ein Icon erstellen. Wer mag, kann auch meines nehmen:

Das Bild via ftp auf den Server hochladen. Ich lege meine Bilder im Ordner „dateien“ ab, nicht verwirren lassen – eigentlich heißt dieser Ordner tl_files. Da ich aber in den urls „tl_files“ nicht drin stehen haben möchte, ist es in allen meiner TL-Installationen so, dass ich mir beim Setup einen Ordner mit der Bezeichnung „dateien“ anlege.
Nun muss man wissen, welches template geändert werden muss.
Eine Erweiterung, die einem dabei hilft, das entsprechende template zu finden heißt templateinfo und kann über das repository installiert werden.

Ich beschreibe hier den Weg, wenn man das Bild NICHT als eigenständiges Element, sondern als „Anhang“ an das Element Text einfügt.
Also: BE => Artikel => Artikel auswählen => Neues Element hinzufügen => Elementtyp Text.
Ganz unten dann Checkbox „Ein Bild hinzufügen“ => Bild auswählen und Checkbox „Großansicht“ aktivieren.
Im BE unter dem Menüpunkt „templates“ das template „ce_text_image_full_size“ auswählen und über TL als Kopie im Ordner templates anlegen lassen.
Dann die Innereien des templates öffnen und das image-Tag an zwei Stellen wie folgt einfügen:

margin): ?> style="margin; ?>">


imgSize; ?> alt="alt; ?>" />
caption): ?>
caption; ?>

Jetzt noch im css das Bild auf position: relative; setzen und die Lupe über die id absolut darin positionieren.
Fertig.

Zum Schluss noch meinen Dank an die Community, die mir bei der Lösung des Problems gerne und gut geholfen hat.