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


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

JW Image Rotator

以下、簡単な解説。


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

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


書式はこんな感じ。






Grass by Night
Jeroen Wijering
madrid1.jpg
http://www.jeroenwijering.com



画像タイトル
作者名
画像の場所
リンク先





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

Get the Flash Player to see this rotator.


できました。

この場合書いたスクリプトはこれだけ。
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.
Get the Flash Player to see this rotator.

3. bgfade

Get the Flash Player to see this rotator.
Get the Flash Player to see this rotator.

4. blocks

Get the Flash Player to see this rotator.
Get the Flash Player to see this rotator.

5. bubbles

Get the Flash Player to see this rotator.
Get the Flash Player to see this rotator.

6. cicles

Get the Flash Player to see this rotator.
Get the Flash Player to see this rotator.

7. flash

Get the Flash Player to see this rotator.
Get the Flash Player to see this rotator.

8. fluids

Get the Flash Player to see this rotator.
Get the Flash Player to see this rotator.

9. lines(slowfade)

Get the Flash Player to see this rotator.
Get the Flash Player to see this rotator.

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



ローテーションする時間

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

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

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

Get the Flash Player to see this rotator.
Get the Flash Player to see this rotator.

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




ナビゲーションを消す。

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

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

Get the Flash Player to see this rotator.
Get the Flash Player to see this rotator.

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




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

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

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

Get the Flash Player to see this rotator.
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.




設置後、エラーが表示されるときは。

次の点をチェックしてみてください。

  • ファイルが正しく配置されているかどうか
  • スクリプトの記述が正しいかどうか
  • プレイリストの記述が正しいかどうか
  • idが既存の要素(例えばcontainerとかheaderとか)とかぶっていないかどうか

特にidについて、ページ内の他要素とのかぶりは案外盲点です。
自信がない場合には、何か一意のid名を付けると良いかもしれません。
(okinawa_travel_200707とか)