Splash.imageでサイトにスライドショー追加

ホームページにスライドショーを付けるJavaScriptのライブラリはいろいろあるようだ。おフランス製のSplash.Imageは、軽いうえ、自動スライドショー機能が付いている。
　フランス語は全く読めない(^ ^;)が、コードを見て発見した使い方をメモ

●インストール

• 下記から、zipファイル（現在はver1.8)をダウンロードする。
• http://www.chez-xuxu.net/ressources/javascript/splash.image/
• 解凍するとsplash.imageというフォルダができるので、自分のwebサーバにフォルダごとアップロードする。
• 自分のhtmlで以下の設定

---------------- -----------------------------
●splash.imageライブラリの読み込み
　ライブラリの読み込みを、 </head>の前あたりに記述。
src="..."は、htmlファイルからの相対位置とする。

<script type="text/javascript" src="../splash.image/splash.image.js"></script>
<link type="text/css" rel="stylesheet" href="../splash.image/splash.image.css" />

---------------------------------------------
●イメージにリンクを張る

○スライドショーする写真のグループが１つの場合の記述。

   <a href="image/hoge1.jpg" title="隠れた名所" rel="splash.image|title">
   <img src="image/thumbs/hoge1.jpg" />
   </a><br>
   <a href="image/hoge2.jpg" title="すごい名所" rel="splash.image|title">
   <img src="image/thumbs/hoge2.jpg" />
   </a><br>


○１つのページ内で複数グループを別々にスライドショーしたいとき

<!-- １つめのグループ -->
   <a href="image/hoge1.jpg" title="隠れた名所" rel="splash.image|group1">
   <img src="image/thumbs/hoge1.jpg" />
   </a><br>
   <a href="image/hoge2.jpg" title="すごい名所" rel="splash.image|group1">
   <img src="image/thumbs/hoge2.jpg" />
   </a>
<!-- ２つめのグループ -->
   <a href="image/shop1.jpg" title="おいしい店" rel="splash.image|group2">
   <img src="image/thumbs/shop1.jpg" />
   </a><br>
   <a href="image/shop2.jpg" title="綺麗な店" rel="splash.image|group2">
   <img src="image/thumbs/shop2.jpg" />
   </a>

　なお、サムネール画像部分（<img src="image/thumbs/hoge1.jpg" />）は、リンクボタンとして使われているだけなので、最初の１つあればよく、特に全部に設置しなくてもいい。

--------------------------------------------
●スライドショーの表示時間
スライドショーの1枚の表示時間はライブラリ内の splash.image.jsの32行目あたりのslide_timeout_value変数の値を修正する

var slide_timeout_value = 4000;

---------------------------------------------
●いきなり自動スライドショーさせる
　初期値では、画像表示後プレイボタンを押さないとスライドショーは始まらない。splash.image.jsの38行目あたりのis_sliding変数をtrueに設定しておくと、1枚目表示後ただちに自動的にスライドショーが始まる。

//var is_sliding = false; //original
var is_sliding = true; //即、自動スライド