最後の仕上げの設定で完成！
それでは仕上げに入りましょう。Photo Sliderを実際に動作させるには、設定したデータを読み込ませるスクリプトを書きます。スライドショー画面を表示するだけであれば「FOTO.Slider.reload('album')」の一行を入れておきます。「'album'」は、先ほどスライドショーを表示する部分の<div>タグに設定したID名です。
今回は自動再生するようにしたいので、以下の1行を追加します。
FOTO.Slider.play('album')ここでも「'album'」は画像を表示する<div>タグに設定したID名です。これで自動的に写真画像が切り替わって表示されます。画面の下に並ぶサムネイル画像をクリックすると、クリックした画像が表示されるようになります。
この状態だと、画像のデータサイズが大きい場合に、画像が表示される前に次に切り替わってしまうことがあります。そこで、「FOTO.Slider.preloadImages('album')」の一行を追加しておきます。この命令を追加すると、表示する画像データをあらかじめ読み込んでおいてくれます。
まとめると、以下の行を追加することになります。
FOTO.Slider.reload('album');
FOTO.Slider.preloadImages('album');
FOTO.Slider.play('album');
仕上げに、スライドショーの「再生」「再生停止」の2つのナビゲーションボタンをつけましょう。Photo Sliderは「FOTO.Slider.play('album')」で再生、「FOTO.Slider.stop('album')」で再生停止になります。
<a href="#" onClick="FOTO.Slider.play('album')">再生（画像ボタンにしてください）</a><br>
<a href="#" onClick="FOTO.Slider.stop('album')">停止（画像ボタンにしてください）</a><br>
これで一応完成といえば完成ですが、今回は最後にもう1つだけ、見た目の調整をしています。Photo Sliderは、現在表示している画像のサムネイルが他のサムネイルよりも下に表示される（下がる）仕様になっていますが（配布元のデモサイトを参照）、見た目的にあまり良くないと感じるかもしれません。下でなく上になった方がいい場合もあるでしょうし、上下に移動してほしくないこともあるでしょう。この動きを調整するには、「photoslider.js」ライブラリファイル内を一部書き換える必要があります。
以下の2行にある「20px」を「0px」にすると、サムネイル画像は上下に移動しなくなります。逆に「-10px」のように負数を指定するとサムネイル画像は上に動くようになります。
■261行目
//move the thumbnail back up
SKEL.EFFECTS.Slide.animate($('.photoslider_thumb[@imageid='+this.data[key]['currentId']+']'),'top','20px','0px',500,SKEL.Transitions.quadOut);↓
//move the thumbnail back up
SKEL.EFFECTS.Slide.animate($('.photoslider_thumb[@imageid='+this.data[key]['currentId']+']'),'top','0px','0px',500,SKEL.Transitions.quadOut);■269行目
//animate our div down
this.data[key]['intervalThumb'] = SKEL.EFFECTS.Slide.animate(thumb,'top','0px','20px',250,SKEL.Transitions.quadOut);↓
//animate our div down
this.data[key]['intervalThumb'] = SKEL.EFFECTS.Slide.animate(thumb,'top','0px','0px',250,SKEL.Transitions.quadOut);以上の作業でついに完成です。おつかれさまでした。さっそく、期待したとおりにスライドショーが動くか、実際の動作を確認してみましょう。一定期間が経つと中央の写真画像が自動で切り替わるスライドショーにちゃんと仕上がっていますか？
完成した作例サイト。一定時間ごとにサムネイル画像が移動し、対応する画像が表示されます
今回は実装方法がいつもよりもちょっと長めでしたが、その分、インパクトのあるユニークなUIを実現できましたね。また次回も、写真サイトに新たな“技”を入れてさらにパワーアップしていきましょう。どうぞお楽しみに。
（作例デザイン：wataru）
（作例写真：2000ピクセル以上のフリー写真素材集）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
- WebクリエイティブのためのDOM Scripting
- 中村享介 著、毎日コミュニケーションズ刊
- Ajaxライブラリリファレンス
- 古籏一浩 著、ビー・エヌ・エヌ新社刊
- CSS&JavaScript表現アイデア帖
- エムディーエヌ刊
