Erst neu­lich wurde ich per Mail gefragt, wie ich bei mei­nen ver­grö­ßer­ten Bil­dern diese net­ten [mehr]-Links ein­ge­baut habe. Nun, für die­je­ni­gen die viel­leicht wie ich in mei­nem Photo-Bereich das Plu­gin Flickr Photo Gal­lery von Joe Tan für Word­Press ver­wen­den, will ich da gern ein­mal kurz zei­gen wie’s funk­tio­niert. Genau die­selbe Geschichte habe ich auch an ande­rer Stelle mei­nes Web­logs benutzt. Die Bil­der mei­ner Bei­träge wer­den zu 90% durch das (inzwi­schen etwas in die Jahre gekom­mene) Plu­gin Exhi­bit dar­ge­stellt, und auch hier will ich kurz zei­gen wie man das hin­be­kom­men könnte.

Update

Die Flickr-Bildergalerie auf meine Home­page ist inzwi­schen ver­schwun­den da das Plu­gin ein­fach nur noch MISERABEL funk­tio­niert und mich zu tode nervt.

Wie das mit den Links bei Light­box 2 so ist

Die Dar­stel­lung der ver­grö­ßer­ten Bild­an­sicht wird bei mei­nem Blog – wie auch bei eini­gen ande­ren – durch das wun­der­bare Light­box 2 Script erzeugt. Die­sem Script ist es ja mög­lich einem Bild eine Bild­be­schrei­bungs­zeile zu gön­nen. Genau diese Zeile ver­wende ich um den Link dar­zu­stel­len. Auch die Frage ob Links in die­ser Unter­zeile wurde auf der Seite von Light­box 2 (etwas wei­ter unten) gestellt und beantwortet:

Can I insert links in the cap­tion?
Yes, but you need to con­vert quo­tes and grea­ter and less than sym­bols into their html entity equi­valents. For example:
<a href=»images/image-4.jpg« rel=»lightbox« title=«&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;«>Image</a>

Also noch ein­mal kurz zurück zu den Lightbox-Basics

Wenn das Lightbox-Script wie auf der Web­site beschrie­ben kor­rekt instal­liert wurde und es durch bei­spiels­weise fol­gende Zei­len gela­den wurde:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

So wird das Script durch einen ein­fa­chen Link gestar­tet mit ent­spre­chend gesetz­tem Tag rel="lightbox" in dem Link-Tag gestar­tet. Will man meh­rere Bil­der als Gruppe dar­stel­len und auch durch die Bil­der blät­tern kön­nen, so kommt ein­fach eine ein­deu­tige Alben­be­schrei­bung in ecki­gen Klam­mern hinzu: rel="lightbox[album1]".

Bei einer Reihe von drei Bil­dern würde das also so aus­schauen:
<a href="images/image-1.jpg" rel="lightbox[album1]">thumbnailimage #1</a>
<a href="images/image-2.jpg" rel="lightbox[album1]">thumbnailimage #2</a>
<a href="images/image-2.jpg" rel="lightbox[album1]">thumbnailimage #3</a>

Die Bild­be­schrei­bung ein­fü­gen
Um nun zu einem Bild eine Bild­un­ter­schrift anzu­zei­gen fügt man noch einen wei­tere Klei­nig­keit dem Link-Tag hinzu: Das Title-Element.
Ein Link würde also inkl. der Bild­un­ter­schrift fol­gen­der­ma­ßen aus­schauen:
<a href="images/image-1.jpg" rel="lightbox[album1]" title="Bildunterschrift">thumbnailimage #1</a>

Und schließ­lich einen Link als Bildunterschrift

So. Nun haben wir wun­der­bar ein­fach Bild­un­ter­schrif­ten ein­ge­fügt, und wie in der FAQ-Frage auf der Lightbox2 Web­site unter der Frage »Can I insert links in the cap­tion?« schon kurz beant­wor­tet wurde, ist es natür­lich auch mög­lich Links in diese Bild­un­ter­schrift zu packen.

Man könnte zunächst mei­nen, daß man ein­fach einen Link wie z.B. <a href="http://www.meinlink.de">Link</a> ein­fach in die Title-Geschichte ein­baut und fer­tig. Das würde dann z.B. so aus­schauen:<a href="images/image-1.jpg" rel="lightbox[album1]" title="<a href="http://www.meinlink.de">Link</a>">thumbnailimage #1</a>.

Doch ganz so ein­fach geht’s lei­der nicht.
In dem Title-Element dür­fen selbst­ver­ständ­lich keine wei­te­ren Tags rein­ge­schach­telt wer­den. Das würde den Link-Tag voll­kom­men zer­schie­ßen und der Brow­ser wüsste nicht mehr was er mit so nem zer­schos­se­nen Link anfan­gen soll. Damit die Sache aber trotz­dem funk­tio­niert, wer­den ein­fach die Son­der­zei­chen wie Anfüh­rungs­zei­chen, und die Größer-Klein-Zeichen in HTML-Entities umge­wan­delt. Denn das Lightbox-Script macht schließ­lich nichts ande­res als die­sen Text dann unter das Bild als HTML-Text zu schrei­ben – ganz so als hätte man es per Hand reingeschrieben.

Hier eine kleine Liste der zu erset­zen­den Zeichen:

• « = &quot;
• < = &lt;
• > = &gt;

Wenn man dies nun auf unse­ren Link-Tag anwen­det, schaut er schließ­lich fol­gen­der­ma­ßen aus. Zur bes­se­ren Über­sicht habe ich ein­mal die erset­zen Zei­chen fett gesetzt.
<a href="images/image-1.jpg" rel="lightbox[album1]" title="&lt;a href=&quot;http://www.meinlink.de&quot;&gt;Link&lt;/a&gt;">thumbnailimage #1</a>

Die ganze Schose für das Flickr-Plugin verwenden

So, nun habe ich ein­mal geschil­det wie das mit Lightbox2 aus­schaut wenn man die Links hän­disch in sta­ti­sche HTML-Seiten ein­baut. Natür­lich geht das ganze auch in einer PHP Umge­bung und auch mit dem wun­der­ba­ren Flickr-Photgalerie Plu­gin für WordPress.

Bei­spiel­haft will ich ein­mal meine Umset­zung für meine Haupt­sei­ten einer Pho­to­ga­le­rie zei­gen – wie z.B. die Seite mit den Typo-Fundsachen Das Flickr-Album hab ich ent­fernt. Man kann ja für das Flickr-Plugin eigene Template-Dateien anle­gen. In dem Fall der Galerie-Übersichtsseite ist die ent­spre­chende Template-Datei. photoalbum-album.html und liegt im WordPress-Theme Ord­ner rum. Anhand die­ser Datei möchte ich ein­mal auf­zei­gen wie man da nun die Links in die Lightbox-Darstellung rein­be­kommt. Inzwi­schen hat das Flickr-Photogalerie-Plugin bereits eine Lightbox2 Unter­stüt­zung seri­en­mä­ßig vor­be­rei­tet, doch ich nutze wei­ter­hin meine hän­di­sche Ein­ar­bei­tung, da ich Lightbox2 auch an ande­ren Stel­len ver­wende und die Javascript-Daten nicht x-mal neu­la­den möchte.

Zunächst an wel­cher Stelle geht’s nu los?
Die Dar­stel­lung der ein­zel­nen Bil­der auf der Galerie-Übersichtsseite wird inner­halb eines PHP-Loops erzeugt. Den Loop fin­det man in der Datei recht flott: Es geht um den Kram zwi­schen <?php foreach ($photos as $photo):?> und <?php endforeach?>. Ich habe unten einen Screen­shot aus Text­mate erstellt, wo man mei­nen Code auch lesen kann. Jetzt wäre wahr­schein­lich ein guter Augen­blick sich den mal anzu­schauen…

In unse­rem Fall geht es ja vor allem um den Link-Tag, den ich nun ein­mal kurz Schritt für Schritt – also Zeile für Zeile – erläu­tern will.

Zeile 27: href
Direkt nach dem öff­nen des a-Tags beginnt’s natür­lich mit href. Die Zeile ist nicht wei­ter span­nend, und ver­weist ein­fach auf das Bild selbst. Das Flickr-Plugin gene­riert den ent­spre­chen­den kor­rek­ten Link aus der echo Befehl, den ich hier nicht wei­ter erklä­ren will:
href="<?php echo $photo['sizes']['Medium']['source']?>"

Zeile 28 rel
Hier wird’s schon ein bis­sel inter­es­san­ter da wir anfan­gen Lightbox2-artige Dinge zu tun. Damit Lightbox2 über­haupt genutzt wird muß halt das rel-Tag genutzt wer­den.:
rel="lightbox[<?php echo $album['title']?>]"
Damit die Bil­der auch als Set dar­ge­stellt wer­den wird in den ecki­gen Klam­mern der immer iden­ti­sche Titel des Albums mit­hilfe des Befehls echo $album['title'] ausgegeben.

Bei mei­nem Album mit den Typo-Fundsachen schaute diese Zeile schließ­lich im Ergeb­nis fol­gen­der­ma­ßen aus:
rel="lightbox[Typo Fundsachen]"

Zeile 29: title
In die­ser Zeile geht’s nun schließ­lich an’s Ein­ge­machte. Die Geschichte beginnt zunächst mit:
title="<?php echo htmlentities($photo['title'])?> wodurch ein­fach der Titel des Bil­des aus­ge­ge­ben wird. durch echo htm­len­ti­ties wird der Titel auch in kor­rek­ten Enti­ties aus­ge­ge­ben, was für Umlaute in Bild­ti­teln ganz sinn­voll ist.

Nach dem Titel folgt nun end­lich der eigent­li­che Link in der Bild­be­schrei­bung. Der Bereich wirkt viel­leicht ziem­lich erschre­ckend, ist aber wenn man genau hin­schaut dann doch ver­ständ­lich:
&lt;a href=&quot;album/<?php echo $album['id']?>/photo/<?php echo $photo['id']?>/<?php echo $album['pagename2'] .'-'. $photo['pagename']?>&quot; &gt;[mehr]&lt;/a&gt;

Der Link zu einer Bild­seite schaut halt bei dem Flickr-Plugin etwas kurios aus, und ist auch nicht gerade beson­ders kurz:
http://www.72quadrat.de/blog/photos/album/99593/album/99593/photo/3126402/Typo_Fundsachen-Druck_eines_alten_BuchdruckKlischees.html.
Die­ser ganze Kram muß nun für jedes Bild gene­riert wer­den, und nicht’s ande­res tut der Rest der Zeile.

Die Geschichte beginnt mit <a href="album/… wodurch zunächst ein­mal auf die Haupt­seite des Flickr-Plugins ver­wie­sen wird. In mei­nem Fall liegt das Plu­gin auf der Seite photos. Wie zu erken­nen ist, wur­den die Anfüh­rungs­zei­chen und die Größer-Klein-Zeichen (s.o.) Lightbox2-entsprechend in HTML-Entities umge­wan­delt. Ich will mir mal erspa­ren den gan­zen Rest jetzt zu erklä­ren. Durch die diver­sen PHP-Befehle wird schlicht die URL zu dem Bild geschri­ben:
…?php echo $album['id']?>/photo//…
Nach dem letz­ten PHP-Befehl für die Erstel­lung der kor­rek­ten URL wird schließ­lich das Link-Tag geschlos­sen – wie­der indem die Anfüh­rungs­zei­chen und Co in Enti­ties umge­wan­delt wer­den, und es wird der Text ange­ge­ben, der den Link abbil­det – bei mir das Wort »mehr« in ecki­gen Klam­mern:
…" >[mehr]</a>.

Soweit erst­mal…