Javascript image swap not working with IE8

I have a simple script that swaps an image in a div when you click on a thumbnail image. Like an image gallery. Works perfectly in IE 9 and above and in chrome firefox and so on. Just not in IE8 I get this error " line 17 char 13 i is null or not an object code 0" I got this script off another forum, and I am a novice when it comes to scripts. I would appreciate any advice. this is the javascript.

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('images/main/ajax-loader.gif')");
var i = $('<img />').load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
}).attr('src',this.href);
return false;
});
});
</script>


Here is the html


<div id="imageWrap">
<img src="images/main/blue.JPG" alt="Main Image" id="mainImage"/>
</div>
<!-- thumbnails are links to the full size image -->
<a href="images/main/blue.JPG" class="thumbnail"><img src="images/main/blue_thumb.JPG" alt="Image 1"/></a>
<a href="images/main/green.JPG" class="thumbnail"><img src="images/main/green_thumb.JPG" alt="Image 2"/></a>
<a href="images/main/red.JPG" class="thumbnail"><img src="images/main/red_thumb.JPG" alt="Image 3"/></a>
<a href="images/main/purple.JPG" class="thumbnail"><img src="images/main/purple_thumb.JPG" alt="Image 4"/></a>


and the css


#imageWrap {
width: 640px;
height: 510px;
background: url(../../images/main/ajax-loader.gif) center center no-repeat;}

here is the link to the sample I have up.


http://www.rkshootingsupply.com/test