Thickbox handling of '/image/view/##/<derivativeName>'-style img tags

Problem:

Thickbox is not handling img tags such as:

<img class="image image-thumbnail" title="An Image" src="/image/view/85/small" alt="An Image">

properly (as described in http://drupal.org/node/47357). The Thickbox code depends on '.thumbnail' in the src, and the src ending in a known image suffix (jpg, bmp, ...). The Image module allows img tags with src names which are the image ID and the derivative to use (_original, preview, thumbnail plus any user defined ones) rather than physical file names.

Suggested solution:

Pass in to the javascript code (via Drupal.settings.thickbox) the set of derivative names and attempt to derive the new URL using those. If that does not succeed, fall back to the original behaviour using '.thumbnail' and the known image file extension list.

Code Changes (also attached):

NOTE that I've only tried this is a very limited test environment.

In thickbox.js, lines 66 to 84, change:

    }

    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
      TB_PrevCaption = '';
      TB_PrevURL = '';
      TB_PrevHTML = '';
      TB_NextCaption = '';
      TB_NextURL = '';
      TB_NextHTML = '';
      TB_imageCount = '';
      TB_FoundURL = false;
      if (imageGroup) {
        TB_TempArray = $('a[@rel=' + imageGroup + ']').get();
        for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === '')); TB_Counter++) {
          var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
          if (!(TB_TempArray[TB_Counter].href == url)) {

to:

	// First, see if the image name is a Drupal derivative name (_original, preview, etc.) rather than an explicit image file name
	var regExp = new RegExp("([/\\\\])" + settings.derivative + "$");
	var done = baseURL.match(regExp);
	if (!done) {
	   // If not a derivative name, see if it is a known image type
    var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
    var urlType = baseURL.toLowerCase().match(urlString);

       done = (urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp');
	}
	if (done) { //code to show images
      TB_PrevCaption = '';
      TB_PrevURL = '';
      TB_PrevHTML = '';
      TB_NextCaption = '';
      TB_NextURL = '';
      TB_NextHTML = '';
      TB_imageCount = '';
      TB_FoundURL = false;
      if (imageGroup) {
        TB_TempArray = $('a[@rel=' + imageGroup + ']').get();
        for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === '')); TB_Counter++) {
          if (!(TB_TempArray[TB_Counter].href == url)) {

In thickbox_auto.js, lines 35 to 48, change:

    var settings = Drupal.settings.thickbox;

    /**
     * ATTENTION: Until the derivate Bug (http://drupal.org/node/125610) is fixed,
     * the script should allways use the original picture ("true || ").
     */
    if (settings.derivative == "_original") {
      var href = img.attr("src").replace(".thumbnail", "");
    }
    else {
      var href = img.attr("src").replace(".thumbnail", "." + settings.derivative);
    }

    // Finally rewrite the link and wait for thickbox.js to apply the effects.

to:

    var settings = Drupal.settings.thickbox;

	var imgSrc = img.attr("src");
	var href;
	var done = false;
	// First, see if the image name is a Drupal derivative name (_original, preview, etc.) rather than an explicit image file name
	for each (name in settings.derivativeChoices) {
	   // Double-escape the slashes: once for the string initialization and once for the regular expression processor
	   var regExp = new RegExp("([/\\\\])" + name + "$");
	   href = imgSrc.replace(regExp, "$1" + settings.derivative);
	   if (href != imgSrc) {
		   done = true;
		   break;
	   }
	}
	if (!done) {
		// If it wasn't an image name, assume the user has specified an explicit thumbnail image file name
    /**
     * ATTENTION: Until the derivate Bug (http://drupal.org/node/125610) is fixed,
     * the script should allways use the original picture ("true || ").
     */
	   var replacement;
    if (settings.derivative == "_original") {
		 replacement = "";
    }
    else {
	     replacement = "." + settings.derivative;
       }
       href = imgSrc.replace(".thumbnail", replacement);
    }

    // Finally rewrite the link and wait for thickbox.js to apply the effects.

In thickbox.module, lines 109 to 112, change:

  if (variable_get('thickbox_auto', 0) && module_exists('image')) {
    drupal_add_js(array('thickbox' => array('derivative' => variable_get('thickbox_derivative', 'preview'))), 'setting');
    drupal_add_js($path .'/thickbox_auto.js');
  }

to:

  if (variable_get('thickbox_auto', 0) && module_exists('image')) {
    drupal_add_js(array('thickbox' => array('derivative' => variable_get('thickbox_derivative', 'preview'))), 'setting');
	$options = array();
    $sizes = image_get_sizes();
    foreach ($sizes as $label => $size) {
	  $options[] = $label;
    }	
    drupal_add_js(array('thickbox' => array('derivativeChoices' => $options)), 'setting');
	
    drupal_add_js($path .'/thickbox_auto.js');
  }