フォトギャラリー風の表示

静止画の表示/非表示時に効果をつけるで紹介したslideUp/Downを使ってサムネイルをクリックすると上の大きな画像で表示が切り替えられます。

HTMLソースです。

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <title>sample</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="event.js"></script>
</head>
<body>
<div id="wrap">
  <img id="wide" />
</div>
<hr>
<ul id="list">
  <li><img src="p001.jpg" /></li>
  <li><img src="p006.jpg" /></li>
</ul>
</body>
</html>

CSSソースです。

#list {
  margin: 0px;/* */
  padding: 0px;
}
#list li {
  margin: 2px;
  height: 80px;  
  list-style-type: none;
  float: left;
}
#list img {
  height: 45px;
  width: 84px;
}
hr {
  clear : both;
}
#wide {
  width: 480px;
  height: 270px;
}
#wrap {
  width: 400px;
  height: 300px;
}

JavaScriptソースです。

jQuery(function($) {
  $('#wide').attr('src', $('#list img:first-child').attr('src'));
  $('#list img').click(function() {
    var img = $(this);
    $('#wide')
      .slideUp(2000, function() {
        $(this).attr('src', img.attr('src'));
      })
      .slideDown(2000);
  });
});

画像をクリックすると、
click
が起動します。
imgはクリックした画像のオブジェクトになります。
大きな画像'#wide'をスライドアップします。
2000ミリ秒経過してスライドアップが完了すると、
imgのp001.jpgまたはp006.jpgを大きな画像'#wide'にセットします。

そして、スライドタウンして画像が全部表示されます。

フォトがラリーはすでに閑古ワールドにあります。
JavaScriiptを使った画像が動くフォトギャラリー
phpまで使って実装しています。