im web gefunden

Thickbox ist ein jQuery-Plugin, dass ähnlich wie Lightbox, Bilder einer Website auf einem abgedunkelten Layer anzeigen kann.

Thickbox gewinnt zunehmend an Verbreitung. So gehört es seit Version 2.5 zum Lieferumfang von WordPress und wird in Version 2.6 noch umfassender unterstützt und genutzt.

Leider hat Thickbox einen Nachteil: Es kann nicht mit dynamisch per URL generierten Bildern umgehen, wenn diese keine der üblichen Endungen, wie “.jpg”, “.jpeg”, “.png”, “.gif” oder “.bmp” haben. Ein klassisches Beispiel dafür sind zum Beispiel Kartenausschnitte, wie man sie mit der statischen Version der API von Google Maps generieren kann.

Die Ursache hierfür liegt zwischen den Zeilen 66 und 69 in der Datei thickbox.js. Im Original steht dort:

...
var urlString = /.jpg$|.jpeg$|.png$|.gif$|.bmp$/;
var urlType = baseURL.toLowerCase().match(urlString);

if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
...

Es wird in der URL nach den oben genannten klassischen Dateiendungen für Bilder gesucht. Werden diese nicht gefunden, wird der Bildmodus von Thickbox nicht angewendet.

Eine Möglichkeit dynamisch generierte Bilder ohne Dateiendungen in der URL anzuzeigen, wäre nun den “iframe”-Modus von Thickbox zu verwenden. Alerdings kann man mit einem kleinen Eingriff in den Quelltext von Thickbox eine eigene Funktion aufrufen, und so einen eigenen Test auf gültige Bilder einsetzen. Die notwendige Ergänzung lautet:

...
var urlString = /.jpg$|.jpeg$|.png$|.gif$|.bmp$i/;
var urlType = baseURL.toLowerCase().match(urlString);
if ( (window.checkThickBoxImageType) && (typeof window["checkThickBoxImageType"] == 'function')) {
  urlType = checkThickBoxImageType(baseURL, urlType);
}
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
...

Hinzu gekommen ist der Test, ob eine Funktion mit dem Namen checkThickBoxImageType existiert. Wenn es sie gibt, wird sie aufgerufen. Die Funktion checkThickBoxImageType muss eine der bekannten Dateiendungen für Bilddateien zurückgeben, damit Thickbox das dynamisch generierte Bild lädt.

Für Karten, die mit der statischen Google Maps API generiert werden, kann eine mögliche Funktion zum Beispiel so aussehen:

function checkThickBoxImageType(baseURL, orig_urlType) {
  var urlString = /staticmap/;
  var urlType = baseURL.toLowerCase().match(urlString);
  if(urlType == 'staticmap') {
    urlType=".gif";
  } else {
    urlType=orig_urlType;
  }
  return urlType;
}

Die hier gezeigte Musterfunktion ist zur Darstellung bewusst sehr einfach gehalten, da sie nur auf das Zeichenketten-Fragment “staticmap” testet. Dieses ist Bestandteil der URL, wenn man Karten mit der statischen Google Maps API erzeugt.

Damit es nicht zu Konflikten kommt, sollte der URL-Test im Produktionseinsatz hingegen bedeutend umfangreicher gestaltet werden.