JWスライドショー (Digital Natives)

ウェブ上でのFLV再生プレイヤで有名なJeroen Wijeringが開発した写真のスライドショー用Javascript APIである。設置も使い勝手もよく、スライドショーの大きさ、表示時間、効果などの設定がかんたんにできる。
→Demoスライドショー

１．JW IMAGE ROTATORサイトからダウンロード（Zip３４０KB)

２．解凍するといろんなファイルがあるが、必要なのはつぎの二つである。

imagerotator.swf
swfobject.js

３．スライドショーに使う写真ファイル(JPG)とプレイリストを用意する。

　プレイリストは XML ファイルで用意する。解凍したフォルダの中にサンプル madrid.xml がある。つぎの例のように、<track>と</track>の間にタイトル、作成者、写真ファイル、リンク先URLを書く。

<?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>リンク先URL</info>
  </track>

</trackList>
</playlist>

写真ファイル名は、相対アドレスまたはhttp://で始まるURLである。

サンプルでは、imagerotator.swf、swfobject.js、madrid.xmlおよび写真ファイルが同じフォルダに保存されている。これで、スライドを作成する準備完了で、あとはスライドを表示するスクリプトの作成である。

４．JW SETUP WIZARD を使ってHTML埋め込みコードを作成することができるが、つぎの例のように手書きでかんたんに作成できる。上記で準備したファイルをすべてhttp://agorian.com/photo/img/ にアップロードして、これを参照するembedコードの例である。

<embed 
src="http://agorian.com/photo/img/imagerotator.swf" 
width="470" 
height="160"
allowscriptaccess="always" 
allowfullscreen="true" 
flashvars="width=470&height=160&file=http://agorian.com/photo/img/madrid.xml&transition=blocks" />

５．このコードを埋め込んだHTMLファイルを上記と同じフォルダに保存して、ブラウザから開くとつぎのスライドショーが表示される。

６．下記は、Javascriptを使った例だが、IEではバグがあり動作しない。スライドショーが表示されず、「This text will be replaced」が表示される。FireFox, Opera, Safariでは問題なく動作する。

<script type="text/javascript" src="http://agorian.com/photo/img/swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('http://agorian.com/photo/img/imagerotator.swf','mpl','470','160','8');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addVariable('width','470');
so.addVariable('height','160');
so.addVariable('file','http://agorian.com/photo/img/madrid.xml');
so.addVariable('transition','blocks');
so.write('player');
</script>

This text will be replaced

〔注意〕 XMLで指定する写真ファイルの場所は、スライドショーを表示するHTMLファイルからの相対位置である。swf, js, xmlは同じフォルダに保存する。

７．カストマイズ

スライドショーを表示する大きさ

　so.addVariable('width','470'); 　so.addVariable('height','160');

この例は幅470px、縦160pxの大きさになっている。この値を変えればよい。

つぎの写真に移動する時間

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

既定値は５秒になっている。秒単位で指定する。エフェクトに要する時間も含む。

スライドショー効果（エフェクト）

写真から写真へ移動するときの効果は、つぎの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");

ナビゲーションを非表示にする

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

既定値は true で、カーソルを重ねるとナビゲーションが表示される。ナビゲーションを消しても、写真をクリックするとつぎの写真に移動する。

写真の表示順序

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

既定値は、シャッフルするようになっているので、XMLファイルで指定した順番に表示したいときは、シャッフル指定を false にする。

その他

背景色やスライドショーの自動開始の有無などの設定ができる。詳しくは Supported Flashvars（英語）を参照。

ページ内に複数のスライドショーを配置するときは、表示する場所を指定している

This text will be replaced

のid名 player ( so.write('player'); のplayerと対応）を変えて書く。

Life is Adventure!