ImageFlowはPHPとJavaScriptで作られている非常に美しいcoverflowスライドギャラリーです。

ImageFlowの利用方法

配布サイトより関連ファイルをダウンロードし、サーバーにアップします。

ギャラリーを利用したいページの、head要素内で『screen.css』と『imageflow.js』を読み込みます。

<link rel="stylesheet" title="Standard" href="screen.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript" src="imageflow.js"></script>

ギャラリーを利用したい箇所に、以下のXHTMLコードを記述します。

<div id="imageflow">
	<div id="loading">
		<b>Loading images</b><br/>

		<img src="loading.gif" width="208" height="13" alt="loading" />
	</div>
	<div id="images">
		<img src="reflect.php?img=画像の相対パス" longdesc="画像の相対パス" alt="キャプション" />
		・
		・
		<img src="reflect.php?img=画像の相対パス" longdesc="画像の相対パス" alt="キャプション" />
	</div>

	<div id="captions"></div>
	<div id="scrollbar">
		<div id="slider"></div>
	</div>
</div>

これでoverflowスライドギャラリーが設置できます。

サンプル

XHTML部分を時サイトに埋め込み、CSSをサイトに合わせればギャラリーの完成です。