HTML画面上にフルスクリーンでスライドショーを表示するスクリプトです。
[splash.image.js]
http://xuxu.fr/ressources/javascript/splash.image/
今回は実際にjsファイルとCSSファイルの中身を見て
カスタマイズできそうな部分をピックアップします。
◆タイトル表示の変更
現在スライドショー番号は[Image (スライド番号) sur (全枚数)]と固定表示されています。
JavaScriptファイルを変更する事によって、
スライドショー番号表示を独自に変更する事が出来ます。
編集するのはsplash.image.js169行目付近
image_displayメソッド内で、[str_position]の変数定義をしている部分です。
str_position = (current_group != '') ? 'Image '+(current_position+1)+' sur '+splash_groups[current_group].length+' :' : '';
[変数について]
current_position：現在表示している画像のスライド番号
splash_groups：HTMLファイル上でスライドショー表示する画像GROUP配列
current_group：現在スライドショー表示している画像GROUP
‘Image ‘、’ sur ‘という文字列を好きな表現に変更すれば、
スライドショー番号部分をカスタマイズできます。
※編集する際はエディタとの相性・文字化けに十分注意する必要があります。
フランス語圏だからなのか、UTF8指定にしても、なぜかコメント部分が文字化けし、
IEでスクリプトがうまく動かないという事態が発生します。
◆スライドショー表示時間
一枚の画像をどれくらい表示しているかは
splash.image.js内に定数として定義されています。
[splash.image.js] 30行目
var slide_timeout_value = 4000;
ここで設定されている時間を変更すればOKです。（単位はミリ秒）
◆Mode "slides"
ショートカットキーを使用してスライドショーの再生・停止を行う場合、
ショートカットキーを押す事によって、
再生になったのか・停止になったのかがわかるよう
（一瞬ですが）画像中央に再生／停止ボタンが表示されます。
[参考]：splash.image.js
275行目notification()メソッド
303行目splash_notification_bye()
表示時間は、297行目で変数slide_timeout_notificationとして
設定された時間までとなるようです。
画像中央に表示されるボタンは、ブロック要素#splash_notification
として指定されています。
◆Loadingイメージの変更
CSSを変更すると、画像読み込み時（Loading…）のイメージを変更できます。
現在Loadingイメージを指定しているのは、splash.image.css 88行目
一番最後の行で設定しているブロック要素、[ajax-loading]の背景画像となります。
div.ajax-loading { background: url([Loadingイメージファイル]) no-repeat center; }
ここで指定する背景用イメージファイルを変更すればOK。
最初にダウンロードしたファイル郡には、
以下のアニメーションgif画像が用意されています。
ajax-loader.gif
ajax-loader-bar.gif
ajax-loader-circle-ball.gif
ajax-loader-lite.gif
ajax-loader-roller.gif
ajax-loader-thickbox.gif（デフォルト）
ajax-loader-throbber.gif
ファイルに含まれている画像を差し替えて見るのもよし、
自分でオリジナルイメージを作成し使うのもよし、です。
その他、再生ボタン画像・閉じるボタン画像を変更したい場合も
CSSファイルを操作します。
変更する場合は、以下のID指定をされている要素の背景画像を変更します。
#splash_previous
（前画像表示ボタン）
#splash_next
（次画像表示ボタン）
#splash_pause
（停止ボタン）
#splash_play
（再生ボタン）
#splash_close
（閉じるボタン）
#splash_notification.playing
（Enterキーを押した際に画像中央に表示される再生ボタン）
#splash_notification.paused
（Enterキーを押した際に画像中央に表示される停止ボタン）
次回はいよいよ、APIによる画像取得と組み合わせていきたいと思います。