Patching ThickBox to support dynamically PHP-generated images

ThickBox is a very cool JavaScript to give your home page a famous Web 2.0 look and feel when displaying images. I love this tool, it’s so easy to use ’cause basically you must only declare the following html snippet (and of course include the CSS and JavaScript files before):

<a href="image.jpg" title="title" class="thickbox">
  <img src="image_thumbnail.jpg" alt="Image"/>
</a>

Unfortunately ThickBox support only static pictures out of the box. More precisely only image sources (img src) including the file extension “.jpg” etc. will be displayed correctly. Dynamically generated images e.g. that ends with “.php” will be displayed as follows:

<a href="image.php?id=1001" title="title" class="thickbox">
  <img src="image.php?id=1001&thumbnail=1" alt="Image"/>
</a>

So how can you teach ThickBox to support this type of pictures? This is very important if you create images on demand using PHP or if the image is on a location which is not within the document root (and must be loaded from disk e.g. for permission reasons). Just add the .php extension to the thickbox.js JavaScript file (line 65 and 68) as follows. Afterwards it will look perfectly.

65
66
67
68
69
70

var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$|\.php$/;
var urlType = baseURL.toLowerCase().match(urlString);
 
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' ||
   urlType == '.gif' || urlType == '.bmp' || urlType == '.php'){
   //code to show images