Life is Adventure!

ドメイン取得料 | Home | PHPスクリプトの暗号化

JWスライドショー

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

1.JW IMAGE ROTATORサイトからダウンロード(Zip340KB)

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

  imagerotator.swf
  swfobject.js

3.スライドショーに使う写真ファイル(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および写真ファイルが同じフォルダに保存されている。これで、スライドを作成する準備完了で、あとはスライドを表示するスクリプトの作成である。

4.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" />

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


6.下記は、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は同じフォルダに保存する。

7.カストマイズ

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

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

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

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

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

既定値は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と対応)を変えて書く。
今日の言葉: 

counter