PhotoBloxの設定方法 : BUB-SITE.com

百式さんの5月7日「OSとしてのウェブログ」で紹介されていたBlogBox.comの“Laszlo PhotoBlox”というのを試してみました。こんな感じです。写メールをフォトログとしてページの中に表示させている人は結構いますけど、こんな感じで写真をFlashにして動かしてくれるのもいいですよね。

設定の方法としては、PhotoBloxを設定したいページのテンプレートやhtmlファイルを開いて、<head>の中と、<body>の中でPhotoBloxを設置する箇所に以下の赤字の部分を貼り付けます（以下は縦300px、横180pxの場合です）。これだけでもスライドは機能しますが、自分の撮った写真などを表示させるにはxmlファイルを修正する必要があります。

<html>
<head>
<!-- photoblox -->
<script type="text/javascript" language="JavaScript" src="http://www.mylaszlo.com/lps-krank/includes/embed.js"></script>
<!-- /photoblox -->      
</head>
<body>
<!--設置したい場所開始-->
<!-- photoblox -->
<script type="text/javascript" language="JavaScript">
lzEmbed({url: 'http://www.mylaszlo.com/lps-2.0/showcase/photoblox/photoblox180x300.lzx?lzt=swf', bgcolor: '#ffffff', scale: 'noscale', width: '180', height: '300', menu: 'false'});
</script>
<!-- /photoblox -->
<!--設置したい場所終了-->
</body>
</html>

PhotoBloxのところにデフォルトのxmlファイルはあるのですが、設定箇所が多すぎるのでわかりやすく最低限の機能に絞ったxmlファイルをここに載せておきます。以下のファイルの赤字の部分を修正します（太字の部分はそれぞれの設定にしてください）。「ギャラリーの名前」はとりあえず気にしなくても良さそうですので「BUB-SITE.com」と入れておきました。実際に表示させたい写真のURLは<image>タグ内の<imageurl>タグで囲まれたところに書き込みます。複数設定する場合は<image>タグごとコピーして青字のように写真の枚数分だけURLを設定していきます。

<photobloxdata>
<customize defaultmode="slideshow"
fitimagetoview="true" fitviewtoimage="false"
pan="false" useframe="true" crossfadetime="3000"
slidedelaytime="6000" motionmode="linear" panzoomtime="6000"
zoomdepth="2" artframewidth="10" playallgalleries="true"/>
<gallery name="BUB-SITE.com">
<image>
<imageurl>/archives/images/20040101_1.jpg</imageurl>
</image>
<image>
<imageurl>/archives/images/20040101_2.jpg</imageurl>
</image>
<image>
</gallery>
</photobloxdata>

xmlファイルの修正が終わったらFTPやMTのファイルのUpload機能を使ってサーバーにアップロードします。そのxmlファイルのURLをコピーして、The URLEncode and URLDecode Pageの「Plainフォーム」に貼り付けて、「URLEncodeボタン」を押します。出来たら「Encodedフォーム」の文字列をコピーして下さい。続いて、最初に開いていたページの<body>タグ内で今まで書いてあった青字の部分に続けて「&data_url=」と書き足して下さい。その後に先ほどコピーした文字列を貼り付けます。これで設定は完了です。テンプレートの再構築やページのアップロードを行って設定を反映させて下さい。

<body>
<!--設置したい場所開始-->
<!-- photoblox -->
<script type="text/javascript" language="JavaScript">
lzEmbed({url: 'http://www.mylaszlo.com/lps-2.0/showcase/photoblox/photoblox180x300.lzx?lzt=swf&data_url=http%3A%2F%2Fwww.bub-site.com%2Farchives%2Fpages%2Fdefault.xml', bgcolor: '#ffffff', scale: 'noscale', width: '180', height: '300', menu: 'false'});
</script>
<!-- /photoblox -->
<!--設置したい場所終了-->
</body>

画像を差し替えたい時はxmlファイルの方を修正すればいいので、その度にRebuildしなくても済むのはいいところでしょうね。より細かい設定方法はPhotoBloxのページ（日本語翻訳版参照）にありますのでそちらもご確認下さい。

-----

【お知らせ】このブログは更新を停止し、メインブログをAnatommyに移転しました。

PhotoBloxの設定方法

Categories

Archives

Feeds & Powered