[splash.image.js]
http://xuxu.fr/ressources/javascript/splash.image/
HTML画面上にスクリーンを表示するスクリプトです。
複数をグループ化しておくと、自動スライドショーが行われます。
（サイトが英語ではありません・・・フランス語です・・・かなり尻込み。）
複数の写真があるほうがスライドショーとしての効果も得られるので、
（また、設定ファイルの数も多く、ブログ上に表示するには若干重いので）
今回は別のページにサンプルを公開していきたいと思います。
最終的にはこのスクリプトと、APIを使って取得した写真を組み合わせたいと思います。
◆splash.image.jsのHTMLへの設定
まずは、必要なファイルをダウンロードし、HTMLに設定します。
Splash par xuxu のページの下のほうにあるTelechargerから
[Telecharger l’archive Splash v1.8]をダウンロードします。
（ダウンロードファイル名は[splash.image.zip]）
ファイルを展開すると、JavaScriptファイル、CSSファイル、画像などがあります。
（全ての画像が一度に必要ではなさそうですが、とりあえずおいておきます。）
今回のフォルダにはサンプルは含まれていませんので、
フォルダごと全て、任意の場所に配置します。
配置したら、HTMLファイルにJavaScriptとCSSの設定を行います。
[JavaScriptの設定]
<script type="text/javascript" src="ｘｘｘ/splash.image/splash.image.js"></script>
[CSSの設定]
<link type="text/css" rel="stylesheet" href="ｘｘｘ/splash.image/splash.image.css" />
これで、準備完了です。
◆スクリーン表示の方法
HTML画面上にスクリーンのように全画面に画像が表示されるようにします。
用意する画像は、1つの画像につき、
スクリーン表示用画像と、サムネイル表示用画像の二つ。
スクリーン表示用画像を指定するリンクタグに[rel="splash.image"]
と、リンクタイプを指定すればOKです。
<a href="[スクリーン表示用画像URL]" title="画像TITLE" rel="splash.image">
<img src="[サムネイル表示用画像URL]" />
</a>
サムネイル画像をクリックすると、全画面に画像がスクリーン表示されます。
右上の×印か、黒い部分をクリックすると元に戻ります。
（aタグのtitleがスクリーン表示されたときのタイトルになります。）
注意）
ダウンロードするスクリプトの文字コードはUTF-8です。
エディタで間違ったコードで開いたりすると、文字化けを起こしてしまい、
スクリプトが（IEで）うまく動かなくなる場合があります。
次回はこれらの画像を複数用意して、いよいよスライドショー表示です。