toybox で公開している Lightbox Plus ですが、スライドショーは実現できないか？という質問があったので、適当に見つくろってみました。折角なので、公開します。

内容としては、タイマーで次から次へと画像を表示するだけの処理で特に難しい内容ではありません。

公開しているサンプルスクリプト lightbox_plus.js では、末尾で

Spica.Event.run(function() { 
  var lightbox = new Lightbox({
    // ... 省略 ...
  });
});

のようにして Lightbox オブジェクトのインスタンス lightbox を生成しています。この変数 lightbox はローカル変数なので、ブロック外部では参照できません。

スライドショーを実現するために生成したインスタンスにアクセスできるよう、lightbox をグローバル変数にします。

面倒なので、グローバル変数にしましたが、スライドショーを実現するオブジェクトを作って、その中で Lightbox のインスタンスを保持するという方法がおそらくスマートでしょう。

あとは生成したインスタンスに対して、タイマーを使って画像を順に表示していけば良いだけです。

とりあえず、途中で止めるなどの処理は考えず、ページ内の全ての Lightbox 対象の画像を表示したらスライドショーを終わらせるという方針で作成してみます。

サンプルスクリプト lightbox_plus.js の末尾を削除して、代わりに Lightbox を設置する html の末尾に以下のような記述を追加します。

<script type="text/javascript">
var lightbox = new Lightbox({
  // ... 省略 ...
});
var slideCount = 0;
function runSlideShow()
{
  var num = lightbox._open + 1;
  if (num >= lightbox._imgs.length) num = 0;
  if ( slideCount < lightbox._imgs.length )
  {
    if ( slideCount == 0 )
    {
      lightbox._show(num);
    }
    else
    {
      lightbox._close_box();
      lightbox._show(num);
    }
    slideCount++;
    window.setTimeout( function(){ runSlideShow(); }, 5000 );
  }
  else
  {
    lightbox._close();
  }
}
</script>
<div><a href="#" onclick="slideCount = 0; runSlideShow(); return false;">play</a></div>

Lightbox の _show メソッドは画像のインデックスを引数に取ります。有効な数値は 0 から _imgs.length の間です。Lightbox の対象となる画像は _imgs に配列として保持されているので、その length を取れば有効引数の範囲がわかります。

Lightbox オブジェクトの _open 変数は現在開いている、あるいは最後に開いた画像のインデックスです。これを +1 することで次の画像のインデックスを特定できます。初期値は -1 なので、仮にまだ開いていなくても +1 することで 0 になり、問題ありません。

グローバル変数 slideCount はスライドショーで開いた画像の数になります。これが Lightbox 対象の画像点数に達するまでタイマーで順に次の画像を開くようにしています。

今回作成したサンプルはアーカイブとして置いてあります。

    window.setTimeout( function(){ runSlideShow(); }, 5000 );

およそ 5 秒で次の画像を表示するようにしていますが、表示の終了から 5 秒ではなく、_show メソッドをコールしてから 5 秒なので、短すぎるかもしれません。きちんと作るなら、ここは表示し終わってからタイマーを開始すべきです。