jQuery モーダルウインドウ

Question

jQueryでモーダルウインドウを作っています。

サムネールをクリックして、その拡大画像が表示され、背景をクリックすると拡大画像は消える・・・というのはできるようになったのですが、ひとつのサムネールをクリックしたときに、他のサムネールが消えてしまい、拡大画像を消した後はクリックするサムネールが無い！という状態になってしまいます。

<div id="navigation">のところのタブ２をクリックすれば最初のサムネールが並んだ画面に戻ります。

ナビゲーション部分でもjQueryをつかっているので、その関係でおかしくなっているのかな？と思うのですが原因がわかりません・・・。

どうすればよいのでしょう？？

  <div id="navigation">
    <ul>
      <li><a href="#tab1" class="current">TOP</a></li>
      <li><a href="#tab2">PHOTOS</a></li>
      <li><a href="#tab3">LINK</a></li>
      <li><a href="#tab4">ABOUT ME</a></li>
    </ul>
  </div>
  <div id="contents">
    <div id="tab1">
        <aside>
      <p>・・・</p>
       </aside>
      <p>
        <img src="#" height="430" width="500">
      </p>
    </div>
    <div id="tab2">
      <a href="img/img1.jpg"><img src="img/thumb1.jpg"></a>
      <a href="img/img2.jpg"><img src="img/thumb2.jpg"></a>
      <a href="img/img3.jpg"><img src="img/thumb3.jpg"></a>
      <a href="img/img4.jpg"><img src="img/thumb4.jpg"></a>
      <a href="img/img5.jpg"><img src="img/thumb5.jpg"></a>
    </div>

$(function() {

     $('#contents div[id != "tab1"]').hide();
     $("a").click(function() {
     $("#contents div").hide();
     $($(this).attr("href")).show();
     $($(this).attr("href")).children("div").show();
     $(".current").removeClass("current");
     $(this).addClass("current");
     return false;
     });
  });

  $(function() {
       $("#contents").children().click(function(){
       $("body").append('<div id="bg">');
       $("body").append('<div id="photo">');
       $("#bg").hide();
       $("#photo").hide();
       $("#photo").html("<img>");
       $("#photo img").attr("src",$(this).attr("href"));
       $("#photo img").attr("width",500);
       $("#photo img").attr("height",500);
       $("#photo img").attr("alt","Photo");
       $("#bg").fadeIn();
       $("#photo").fadeIn();
       $("#bg").click(function() {
         $(this).fadeOut(function() {
           $(this).remove();
         });
         $("#photo").fadeOut(function() {
           $(this).remove();
         });
       });
       return false;
     });

   });

Answer 1

あまり細かくは追えてないですが、jsの最初の方

$(function() {

     $('#contents div[id != "tab1"]').hide();
     $("a").click(function() {
       $("#contents div").hide();

ここの $("a")の指定で、navigationの a タグも、div#tab2 内のaタグも対象になっています。
ここで

$("#contents div").hide();

しているので、div#tab2が消えているのではないでしょうか。

実際にはきちんとクラスや親子関係で狙ったタグだけに作用するようにすべきですが、
（それはどのようにアニメーションさせたいか次第なのでご自分で考える必要がありますが、）
とりあえず「サムネイルが消える」というのを回避する事だけを考えるなら、

$(function() {

     $('#contents div[id != "tab1"]').hide();
     $("ul>li>a").click(function() {
       $("#contents div").hide();

と $("a") を $("ul>li>a") にすれば消えなくなると思います。
(#tab2のaには当てはまらなくなるので）

これで原因をつかめたら自分の好みに合うように変更してみてください。