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

May 28, 2008 - [ ][ ][ ]


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

JW Image Rotator

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

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


書式はこんな感じ。

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>

    <track>
      <title>Grass by Night</title>
      <creator>Jeroen Wijering</creator>
      <location>madrid1.jpg</location>
      <info>http://www.jeroenwijering.com</info>
    </track>

    <track>
      <title>画像タイトル</title>
      <creator>作者名</creator>
      <location>画像の場所</location>
      <info>リンク先</info>
    </track>

  </trackList>
</playlist>


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

Get the Flash Player to see this rotator.


できました。

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

<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container");
</script>

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




カスタマイズ

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



エフェクトを変更する

まず、スライドショーで重要なのが次の写真へ移動するときのエフェクト。
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.
<div id="container_fade"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("transition","fade");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_fade");
</script>

3. bgfade

Get the Flash Player to see this rotator.
<div id="container_bgfade"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("transition","bgfade");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_bgfade");
</script>

4. blocks

Get the Flash Player to see this rotator.
<div id="container_blocks"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("transition","blocks");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_blocks");
</script>

5. bubbles

Get the Flash Player to see this rotator.
<div id="container_bubbles"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("transition","bubbles");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_bubbles");
</script>

6. cicles

Get the Flash Player to see this rotator.
<div id="container_circles"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("transition","circles");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_circles");
</script>

7. flash

Get the Flash Player to see this rotator.
<div id="container_flash"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("transition","flash");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_flash");
</script>

8. fluids

Get the Flash Player to see this rotator.
<div id="container_fluids"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("transition","fluids");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_fluids");
</script>

9. lines（slowfade）

Get the Flash Player to see this rotator.
<div id="container_lines"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("transition","lines");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_lines");
</script>

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



ローテーションする時間

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

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

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

Get the Flash Player to see this rotator.
<div id="container_r1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("rotatetime","1");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_r1");
</script>

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




ナビゲーションを消す。

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

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

Get the Flash Player to see this rotator.
<div id="container_sn"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("shownavigation","false");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_sn");
</script>

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




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

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

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

Get the Flash Player to see this rotator.
<div id="container_sf"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("shuffle","false");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_sf");
</script>

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



その他の設定

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

JW | Supported Flashvars（英語）

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




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

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

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

<div id="container_sf"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript">
  var s1 = new SWFObject("/swf/jw/imagerotator.swf","rotator","400","300","7");
  s1.addVariable("file","/img/mutter/2008/05/jw/jwir.xml");
  s1.addVariable("shuffle","false");
  s1.addVariable("width","400");
  s1.addVariable("height","300");
  s1.write("container_sf");
</script>




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

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

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

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

COMMENTS

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

コメントの書き込み方について。