ColorBox: use an image thumb that links to full size image in overlay

Question

I have colorbox working fine.

Is there a way from within colorbox to take a full size image (800px by 800px) and use it as a small thumb (100px by 100px) in the colorbox anchor like but have the colorbox overlay show full size?

<a href="pathToImage/image.jpg" class="colorbox"><img src="pathToImage/image.jpg" /></a>

href = the 100px by 100px thumb img = full size

Or, is this best done by something like timthumb?

fyi...I am using colorbox in the admin area of a wordpress plugin.

[update] since I am doing this in Wordpress, as I understand it, changing the image size inline ads unnecessary overhead on page load time.

Here is the jquery I am using: add_action( 'admin_head', 'do_colorbox_script' );

function wlmm_do_colorbox_script() {

$max_width  = '';       $max_height     = '';
$width      = '';       $height         = '';
$inner_width    = '';       $inner_height  = '';
$opacity        = '0.9';
$img_error  = 'Sorry this image not currently available.';

// Colorbox settings
echo '
<script>
  jQuery(document).ready(function () {
      jQuery("a.help").colorbox({ 
      maxWidth:"'.$max_width.'", 
      maxHeight:"'.$max_height.'", 
      Width:"'.$width.'", 
      Height:"'.$height.'", 
      innerWidth:"'.$inner_width.'", 
      innerHeight:"'.$innerHeight.'", 
      imgError:"'.$img_error.'",
      opacity:'.$opacity.' });
  });
</script>';

}

Answer 1

Try this:

<a href="pathToImage/image.jpg" class="colorbox"><img width="100" height="100" src="pathToImage/image.jpg" /></a>

However, it's hard to give a complete answer unless you also can provide the colorbox jQuery you're using to call it.