JW Image Rotatorを使ったスライドショー。

以前取り上げた JW FLV Media Playerのシリーズの中に、
画像に特化したJW Image RotatorというFlashツールがあったので、
それを利用してスライドショーを作ってみました。

JW Image Rotator

以下、簡単な解説。


まず、サイトからファイルをダウンロードします。
解凍するといくつかファイルが出てくるのですが、
必要なのは、swfobject.jsとimagerotator.swfだけです。
swfobject.jsは汎用ライブラリですし、既に利用していればそれを流用すればいいかと思います。

また、上記以外に、スライドショーに表示していく画像を設定したファイルが必要です。
サンプルは、解凍したファイルの中の、madrid.xmlです。


書式はこんな感じ。

Jeroen Wijering
madrid1.jpg
http://www.jeroenwijering.com




作者名
画像の場所
リンク先

これを用意したら、実際に貼ってみましょう。



できました。

この場合書いたスクリプトはこれだけ。
README.HTMLにあったものを少し変えただけです。

Get the Flash Player to see this rotator.

なかなかにシンプルです。

カスタマイズ

それでは少しカスタマイズ。

エフェクトを変更する

まず、スライドショーで重要なのが次の写真へ移動するときのエフェクト。
JW Image Rotatorでは、下記の9つから選択できるようになっています。

1. random（デフォルト）
2. fade
3. bgfade
4. blocks
5. bubbles
6. circles
7. flash
8. fluids
9. lines（slowfade）

これを、<script>~</script>の中に記述してやるだけです。

s1.addVariable("transition","fade");

それぞれは以下のような感じになります。

1. random

先ほど試しに貼ってみたのがrandomです。
デフォルトでは、この設定になっています。

2. fade

Get the Flash Player to see this rotator.

3. bgfade

Get the Flash Player to see this rotator.

4. blocks

Get the Flash Player to see this rotator.

5. bubbles

Get the Flash Player to see this rotator.

6. cicles

Get the Flash Player to see this rotator.

7. flash

Get the Flash Player to see this rotator.

8. fluids

Get the Flash Player to see this rotator.

9. lines（slowfade）

Get the Flash Player to see this rotator.

それぞれお好みでどうぞ。

ローテーションする時間

次に重要なのは、ローテーションする際の時間、でしょうか。
これは、次のような値で設定できます。

s1.addVariable("rotatetime","3");

単位は秒。デフォルトでは5秒に設定されています。
試しに1秒で移動するようにしてみると…こんな感じ。

Get the Flash Player to see this rotator.

エフェクトの時間も秒数に入るようです。
1秒だとちょっと短すぎるかもしれませんね。

ナビゲーションを消す。

ナビゲーションはデフォルトではtrue（表示する）になっています。
これを消す場合には、以下の要素をスクリプトに追加します。

s1.addVariable("shownavigation","false");

Get the Flash Player to see this rotator.

なおナビゲーションを消しても、
画像をクリックすることで次の画像へ移動することが出来ます。

シャッフルさせる/順番通りに表示する

デフォルトではtrue（シャッフルさせる）になっています。
プレイリストの順番通りに表示させる場合には、以下の要素をスクリプトに追加します。

s1.addVariable("shuffle","false");

Get the Flash Player to see this rotator.

ちなみにマニュアルではなぜかデフォルトがfalse（順番通りに表示する）となっていますが、
これは多分間違いで、実際にはtrue（シャッフルさせる）がデフォルトです。

その他の設定

基本的な設定については、公式サイトのマニュアルを見てみてください。

JW | Supported Flashvars（英語）

背景色の変更や、autostartの変更も可能です。

複数設置させる際のポイント

先述のJW FLV Media Playerもそうでしたが、
このFlashは同一ページに複数設置することが容易にできます。

その場合、Flashを表示する領域のIDと、
スクリプト内のID指定とを設置する物ごとに書き換えてあげればOKです。

<div id="container_sf">Get the Flash Player to see this rotator.