iTunesライクな画像ギャラリーjavascript「imageFlow」

Appleのデザインには定評がありますが、中でもiTunesのcoverflowと呼ばれる表示は秀逸です。
imageFlowではjavascriptで作成できる手法を公開しています。

sponsors

使用方法

imageFlowからimageflow.jsとscreen.cssをダウンロードし、headに書き込みます。
<link rel="stylesheet" href="http://yourdomain/screen.css" type="text/css">
<script type="text/javascript" src="http://yourdomain/imageflow.js"></script>
*screen.cssは適宜変更してください。
そして画像を以下のように記述します。
<div id="imageflow">
	<div id="loading">
		<img src="ローディング画像" alt="loading">
	</div>
	<div id="images">
		<img src="画像パス" alt="キャプション">
		<!-- 画像分 -->
	</div>
	<div id="scrollbar">
		<div id="slider"></div>
	</div>
	<div id="captions"></div>
</div>
また、ダウンロードした時に付いてくるreflect.phpを使用すると自動で画像に反射効果が与えられます。
例:<img src="reflect.php?img=画像相対パス" alt="キャプション">

サンプル

loading
Image 1 Image 2 Image 3 Image 4 Image 5 Image 6 Image 7 Image 8

sponsors

Javascriptサンプルページ一覧
skuare.net