Lightbox 2.5 mit Link in Bildbeschreibung

Vor einigen Wochen fragte mich Pit Hammann, ob ich mal über das Script von Lightbox 2.5 schauen könnte, dass zwar wunderbar funktioniere, aber nicht all seinen Wünschen gerecht werde.

(Du kennst Lightbox 2.5 und willst direkt zur Lösung springen: Lightbox 2.5 mit Link in Bildbeschreibung oder nur den Code-Schnipsel/code-snippet)

Was ist Lightbox 2.5?

Lightbox 2.5 von Lokesh Dhakar ist wohl eines der am weitesten verbreiteten Scripte, die Bilder im Web zeigen. Dabei geht es von einer Bilderübersicht mit Thumbnails aus und zeigt, bei einem Klick auf ein Thumbnail, einen Layer mit der großen Ansicht des Bildes. Auch eine simple Aufteilung der Bilder in Kategorien ist möglich. Es ist ein intelligent und überschaubar geschriebenes Script, das von jedem, der ein bisschen HTML kann, problemlos in bestehende Projekte integriert werden kann. Lightbox 2.5 ist Freeware und wurde inzwischen für einige Content-Management-Systeme adaptiert, unter anderem für WordPress. Lightbox 2.5 ist schnell und lässt sich prima per CSS anpassen. Es rahmt die Bilder und gibt die Möglichkeit der Bildbeschreibung. Die Bildbeschreibung lässt auch html-Tags zu. Was das Standardscript nicht zulässt sind Links in der Beschreibung und damit sind wir bei dem Problem um das in diesem Beitrag geht.

Lightbox 2.5 mit Link in Bildbeschreibung

Das Originalscript baut die Thumbnails mit der entsprechenden Verlinkung auf das “grosse” Bild auf. Das sieht dann für ein einzelnes Thumbnail/Bild wie folgt aus:

<a href="images/examples/image-1.jpg" rel="lightbox"><img src="images/examples/thumb-1.jpg" alt="" /></a>

Um eine Bildbeschreibung zu ermöglichen, wird der Link um ein title-Attribut erweitert (Optional Caption):

<a href="images/examples/image-1.jpg" rel="lightbox" title="Optional caption."><img src="images/examples/thumb-1.jpg" alt="" /></a>

In das title-Attribut lässt sich auch ein Link zu einer anderen Seite einbinden. Damit dann das Thumbnail einen title-Attribut hat, in dem der Link nicht zu lesen ist, müsst ihr dem Imagetag des Thumbnails ein title-Attribut hinzufügen. Außerdem habe ich in der Zeile dem Link die Öffnung eines neuen Fensters (target=”_blank”) vorgegeben, den könnt ihr natürlich entfernen wenn das nicht in eurem Sinn ist. Die ganze Codezeile für die Lösung sieht dann so aus:

<a href="images/examples/image-1.jpg" rel="lightbox" title="&lt;a target='_blank' onClick=&quot;window.open(href=&#x27;http://pithammann.de&#x27;)&quot; href=&quot;http://pithammann.de&quot; title=&quot;Hier geht es zu Pit Hammanns Site&quot;&gt;Pit Hammanns Fr&uuml;hst&uuml;ck on PitHammann.de&lt;/a&gt;"><img src="images/examples/thumb-1.jpg" alt="Pit Hammanns Fr&uuml;hst&uuml;ck" title="Pit Hammanns Fr&uuml;hst&uuml;ck" /></a>

Fügt einfach die Zeile so ein und ersetzt nach dem Einfügen Image-Pfad, href-Inhalte (http://pithammann.de), die title-Inhalte (wie Pit Hammanns Frühstück …  etc.) und den Thumbnail-Pfad, dann habt ihr die Lösung für: Lightbox 2.5 mit Link in Bildbeschreibung/Link in Caption.

Ich hoffe, einige können was mit dem Schnipsel anfangen.

Text: ( Lightbox 2.5 mit Link in Bildbeschreibung /Lightbox 2.5 with Link in Caption ) von Manni

Bild: ( Screenshot von/of Musterseite/Samplesite  Lightbox 2.5 mit Link in Bildbeschreibung /Lightbox 2.5 with Link in Caption ) von Manni