imageviewer

概要

  • Flash製のフォトアルバムです。
  • サムネイルをクリックして画像を開きます。
  • サムネイルの領域はドラッグしてスクロールできます。
  • 動画(FLVファイル)も再生可能です。
  • 表示する画像ファイルのリストはXMLファイルに記述します。
  • 背景色や表示サイズ等は、設置時のswfファイルのパラメータで設定可能です。

サンプル

設置例は、こちら。

ダウンロード

imageviewer_v001.zip (34KB)

簡単な設置方法

  1. ダウンロードした ZIPファイルを展開したフォルダにある images ディレクトリに、表示したい画像を入れます。WEBで表示するのでVGA程度にリサイズをお勧めします。
  2. 同じ場所にある thumbs ディレクトリには、サムネイルとして表示する画像を入れます。 images に入れた画像と同じファイル名にしてください。長辺が100ピクセル程度になるようにリサイズしてください。
  3. setting.xml を編集して、下記の内容を記述してください。保存時には文字コードを UTF-8 にしてください。 
    <?xml version="1.0" encoding="UTF-8"?>
<imageviewer imagepath="images" thumbpath="thumbs">
<image>
	<filename>1枚目の画像のファイル名</filename>
	<comment>1枚目の画像につけるコメント(空白でも可)</comment>
</image>
<image>
	<filename>2枚目の画像のファイル名</filename>
	<comment>2枚目の画像につけるコメント(空白でも可)</comment>
</image>

　～　画像枚数分<images>～</images>の記述を繰り返す　～

<image>
	<filename>最後の画像のファイル名</filename>
	<comment>最後の画像につけるコメント(空白でも可)</comment>
</image>
</imageviewer>
  4. sample1.html を開くとフォトアルバムが表示されるはずです。HTMLファイル名は適当にリネームしてそのまま使用してOKです。
  5. 動作確認ができたら、上記で編集したファイルを含め、解凍したフォルダに含まれる下記のファイルを、全てサーバーにアップロードします。
    • ImageViewer.swf
    • setting.xml
    • swfobject.js
    • sample1.html またはリネームしたもの
    • image_next.png, image_prev.png, thumb_next.png, thumb_prev.png の4ファイル
    • imagesディレクトリ
    • thumbsディレクトリ
  6. サーバ上のHTMLファイルを開いてフォトアルバムが表示されたら成功です。

動画(FLVファイル)の表示方法

動画を表示したい箇所では、XMLファイルでimageタグのかわりにvideoタグを記述します。 

<video>
	<thumb>動画のサムネイル画像</thumb>
	<comment>動画のコメント</comment>
	<video>動画のファイル名(FLVファイル)</video>
	<loading>動画読み込み中に表示する画像ファイル名</loading>
</video>

ビデオの表示サイズは、FLVファイルのサイズにかかわらずloadingタグで指定した画像のサイズに拡大/縮小して表示されます。 一般的なサイズのloading表示用の画像ファイルをZIPファイル内の_miscディレクトリに置いてますので適当にご使用ください。

カスタマイズ

zipファイルに含まれる sample2.html に、指定可能なパラメータを全て記載しています。

  • thumbWidth, thumbHeight: サムネイルの表示幅と高さを指定します。指定より大きい画像は指定のサイズに収まるよう縮小されますが、小さい画像は拡大されません。
  • thumbMargin: サムネイル同士の間隔を指定します。
  • thumbPaneMargin: サムネイル領域全体のマージンを指定します。
  • thumbPaneHeightDefault: サムネイル領域の高さを指定します。この指定高さにサムネイルが２行配置可能な場合は自動的に２行表示になります。 →サンプル
  • imagePaneMarginMax, imagePaneMarginMin: メインの画像表示領域のマージンを指定します。imagePaneMarginMax はサムネイル表示時、imagePaneMarginMin は拡大表示時に使用されます。
  • commentPos: コメントの位置を指定します。top, bottom, left, right が指定可能です。(が、leftとrightはイマイチなため今後改善予定)
  • commentWidth, commentHeight: コメント領域の幅と高さを指定します。
  • commentMargin: コメントと画像の間隔を指定します。
  • commentFontSize: コメントのフォントサイズを指定します。
  • thumbArrowSize: サムネイルのページ戻り/送り矢印のサイズ(正方形の一辺)を指定します。
  • thumbPrevArrow, thumbNextArrow: サムネイルのページ戻リ/送りの矢印に使用する画像を指定します。
  • imageArrowSize: 画像の戻り/送り矢印のサイズ(正方形の一辺)を指定します。
  • imagePrevArrow, imageNextArrow: 画像の戻リ/送りの矢印に使用する画像を指定します。
  • thumbPaneColor, imagePaneColor, commentColor: サムネイル領域、画像領域、コメント文字の色を指定します。

swfobject の使用方法は、swfobjectのオフィシャルサイトを参照ください。

コメント・バグ報告等

このフォトアルバムを設置したら、ぜひ日記のコメント欄へご報告ください。

バグ報告等もこちらにお願いします。

更新履歴

  • 2008/07/27 ver 0.01 新規作成