jQuery

シンプルなフォトギャラリー（１）

jQuery

$(function () {
  $('#big').attr('src', $('#list img:first').attr('src'));    //最初に表示する拡大画像をセット（id=bigにattr(追加)。<img id="big" src="resources/photo1.jpg">となる)
     //.attrの後の（）の中は、まず、srcという文字列を出力、リスト項目の最初のイメージをfirstフィルターで取得、それを'src'に追加

  $('#list img').click(function () {             //サムネイルのリスト配下のimg要素をクリックしたときの処理
    var img = $(this);                   //imgは$(this)と同じであるという宣言
    $('#big')                     //id="big"を
       .hide(1000,function(){     //hide(隠す)、1秒かけて実行
         $(this).attr('src', img.attr('src'));  //$(this)はクリックされたimg、attr（以下を追加）、まずsrcの文字列、その後にクリックされた新しい画像
       })
       .show(2000);     //2秒かけて表示
  });            //サムネイルのリスト配下のimg要素をクリックしたときの処理はここまでで終わり
});

CSS設定

#list { margin: 0px; padding: 0px;}
#list li {margin: 2px;height: 40px;list-style-type: none;float: left; }
#list img {width: 55px;height: 40px;}
hr {clear : both;}
#big {width: 315px;height: 235px;}

• 
• 
• 
• 

---

<ul id="list">
  <li><img src="../../../../resources/photo1.jpg" /></li>
  <li><img src="../../../../resources/photo2.jpg" /></li>
  <li><img src="../../../../resources/kaminari-mon.png" /></li>
  <li><img src="../../../../resources/Desktop.jpg" /></li>
</ul>
<hr />
<img id="big" />