JWスライドショー
ウェブ上でのFLV再生プレイヤで有名なJeroen Wijeringが開発した写真のスライドショー用Javascript APIである。設置も使い勝手もよく、スライドショーの大きさ、表示時間、効果などの設定がかんたんにできる。
→Demoスライドショー
1.JW IMAGE ROTATORサイトからダウンロード(Zip340KB)
2.解凍するといろんなファイルがあるが、必要なのはつぎの二つである。
imagerotator.swfswfobject.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ファイルを上記と同じフォルダに保存して、ブラウザから開くとつぎのスライドショーが表示される。
Life is Adventure!



