JavaScriptを使ったスライドショーです。
サムネイルをクリックすると、中心に画像が表示されます。
動きがキレイで、さらに実装が簡単なので、使いどころがありそうです。

[ダウンロードと設定]
FrogJS Javascript Gallery
から、FrogJS v1.1をダウンロードします。
内部には必要なスクリプト・サンプルが同胞されています。
prototype.jsとscriptaculous.js(effects.js)が必要ですが、
既にサイトに組み込んでいる場合は、frog.jsだけを設定すればOKです。
prototype.js→scriptaculous.js→frog.jsの順に読み込まれるようにしておきます。
<script type="text/javascript" src="xxxx/prototype.js"></script>
<script type="text/javascript" src="xxxx/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="xxxx/reflection.js"></script>

[実装方法]
このスライドショーには、表示用画像とサムネイル用画像のセット画像が必要です。
画像を準備したら、次のようにhtmlを記述します。
*画像を囲むブロック要素にid[FrogJS]を設定します。
*リンク要素のパス(href)に表示したい画像のURLを設定します。
*リンク要素のtitleに設定した値は、画像表示時のタイトルとして表示されます。
*リンク要素のrelにURLを設定すると、リンク画像にすることができます。
*img要素のsrcにサムネイル画像のURLを設定します。
*img要素のaltに設定した値は、画像表示時に説明文として表示されます。
<div id="FrogJS">
 <a href="[画像URL]" title="[画像タイトル]" rel="[画像をリンクさせる場合はそのURL]">
  <img src="[サムネイルURL]" alt="[画像の下に表示される説明文]"  />
 </a>
 <a href="[画像URL]" title="[画像タイトル]" rel="[画像をリンクさせる場合はそのURL]">
  <img src="[サムネイルURL]" alt="[画像の下に表示される説明文]"  />
 </a>
 <a href="[画像URL]" title="[画像タイトル]" rel="[画像をリンクさせる場合はそのURL]">
  <img src="[サムネイルURL]" alt="[画像の下に表示される説明文]"  />
</a>
[以下略]
</div>

[CSS設定]
次のようなidのブロック要素が生成されますので、
お好みに合わせてスタイルを設定してください。

#FrogJS:画像表示部全体
#FrogJSCredit:aタグに指定したtitle表示部
#FrogJSCaption:imgタグに指定したalt表示部

[サンプル]
今回は秋に撮影した紅葉の写真を使用します。
(画像の読み込みが若干重いので動きがスムーズでないです・・・。)

次は若干のカスタマイズ方法と、APIを使って自動的に呼び出した画像を
スライドショーで表示させるプログラムに挑戦してみたいと思います。