JQueryを使ったJavascriptについて教えてください。

サムネイルの画像をクリックしたら、大きく表示したい、みたいなことをやりたいんですよね。
質問の補足に書いてあるコード、基本的に動きますよ。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- jquery-smooth-scroll は、は使ってないけど、一応... -->
<script src="https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js"></script>

<script>
/* 質問の補足に書いてあったコードに、改行を入れた以外は、そのまんまです */
$(function(){
    $("img.ChangePhoto1").click(function(){
        var ImgSrc = $(this).attr("src");
        var ImgAlt = $(this).attr("alt");
        $("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt});
        $("img#MainPhoto1").hide();
        $("img#MainPhoto1").fadeIn("slow");
        return false;
    });
});
</script>

<style>
#MainPhoto1 {
    height: 300px;
    margin-bottom: 3px;
}
IMG.ChangePhoto1 {
    cursor: pointer;
}
</style>

<!-- 画像を切り替えて、表示するところ -->
<img src="" id="MainPhoto1">

<!-- サムネイル画像 -->
<div>
<img src="http://cdn1.www.st-hatena.com/users/a-/a-kuma3/user.jpg?1377560470" width="75" class="ChangePhoto1">
<img src="http://f.st-hatena.com/images/fotolife/a/a-kuma3/20140222/20140222183826.jpg" width="75" class="ChangePhoto1">
<img src="http://f.st-hatena.com/images/fotolife/a/a-kuma3/20140412/20140412171756.jpg" width="75" class="ChangePhoto1">
<img src="http://f.st-hatena.com/images/fotolife/a/a-kuma3/20140330/20140330123543.jpg" width="75" class="ChangePhoto1">
</div>

上記のコードを、jsFiddle で試したのがこちらです。期待した動きをしてるんじゃないでしょうか。
http://jsfiddle.net/a_kuma3/YEx4F/1/

思った通りに、動かない原因は、今見ている画像をクリックするところとは、別のところにあります。
だから、何時間も奮闘しても分からないんじゃないか、と思います。

<script>

    ★問題がありそうなのは、こことか★

$(function(){

    ★こことか、なんじゃないかと★

    $("img.ChangePhoto1").click(function(){
        var ImgSrc = $(this).attr("src");
        var ImgAlt = $(this).attr("alt");
        $("img#MainPhoto1").attr({src:ImgSrc,alt:ImgAlt});
        $("img#MainPhoto1").hide();
        $("img#MainPhoto1").fadeIn("slow");
        return false;
    });
});
</script>

上で「★」を付けたあたりでエラーが起きて、処理が中断されている。
だから、クリックしたときの処理を登録するところまでたどり着いていない。


後、無いとは思いますが、念のためにチェックしておいた方が良いのは、この部分。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

ぼくが書いた例では Google がホストしているスクリプトに向けてますけど、どこにあっても同じで、

• URL のスペルミスをしていないか
• タグのスペルミスをしていないか

といったあたりは、確認しておいた方が良いかな、と思います。