WordPress thickbox for Generated Images Solution

If you want to use Thickbox for the generated images you may get garbage values if you're using a url like http://test.com/image.php?coords=1,2,3 or http://test.com/image/ . The problem occurs when thickbox detects the url not as image. If you open the wp-includes/js/thickbox/thickbox.js file you will get a line

var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;

Image formats or urls other than the above ones will show garbage value. The solution is to edit the thickbox.js file. Do not edit the default file. Make a copy of the file and place it at your theme directory. Another Option is to obtain thickbox.js from the jQuery thickbox page. This is better than copying the WordPress included one. I will explain it a bit later. Now first add the thickbox.js file in you theme. In your functions.php file use the following code.

add_action('wp_print_scripts' , 'add_custom_thickbox');

function add_custom_thickbox(){
wp_enqueue_script('thickbox_edit' , get_bloginfo('stylesheet_directory')
 . '/thickbox.js' , 'jquery' , ' ' , true);
}

Don't forget to add the thickbox css. Now edit the thickbox.js file around Line no 72. If your url contains .php :

Replace the line
var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;

with
var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp|\.php$/;

Then in the line 75

Replace the line
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'
|| urlType == '.bmp'' )

with
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'
|| urlType == '.bmp' || urlType == '.php' )


There is another edit, From the whole script remove all the properties and method related with 'thickboxL10n' . This variable has been injected by wodpress as a localization process. If your copy is from jquery website your thickbox.js will have no variable 'thickboxL10n'. So It's a better option to get thickbox from the jQuery website.

If you copy download jquery from jquery website:
Replace all the "$(" with "jQuery(" .


Now click on your image and it should work now. If You face any problem you can comment here, I will try to solve your problem.