缩略图图像不会在HTML中更改图库中的主图像

Question

我尝试创建一个包含缩略图的图库，然后点击主图像更改为该缩略图。我目前有缩略图和主图像显示，但当我点击缩略图时，主图像不会改变。

我正在使用以下更改源文件末尾的JQuery。 在我的图像文件夹中，我有缩略图（带后缀_thumb）和大图像（带后缀_large）。不知道我哪里出错，如果您需要更多信息，请询问。

HTML头文字

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

HTML

            <div id="panel">
                <img id="largeImage" src="images/foldingbike_large.jpg" />
                <div id="description">First image description</div>
            </div>

            <div id="thumbs">
                <img src="images/foldingbike_thumb.jpg" alt="1st image description" />
                <img src="images/foldingbike2_thumb.jpg" alt="2nd image description" />

             </div>

CSS

#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage {
 border: 1px solid gray;
 padding: 4px;
 background-color: white;
 cursor: pointer;
}
#thumbs img {
 float: left;
 margin-right: 6px;
}
#description {
 background: black;
 color: white;
 position: absolute;
 bottom: 0;
 padding: 10px 20px;
 width: 525px;
 margin: 5px;
}
#panel { position: relative; }

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});