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を使って自動的に呼び出した画像を
スライドショーで表示させるプログラムに挑戦してみたいと思います。