iTunesライクな画像ギャラリーjavascript「imageFlow」
Appleのデザインには定評がありますが、中でもiTunesのcoverflowと呼ばれる表示は秀逸です。
imageFlowではjavascriptで作成できる手法を公開しています。
使用方法
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="キャプション">
サンプル
Javascriptサンプルページ一覧
skuare.net
