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

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

使用方法
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="キャプション">
iTunesライクな画像ギャラリーjavascript「imageFlow」サンプル

sponsors

「iTunesライクな画像ギャラリーjavascript「imageFlow」」をシェアする

記事作成:
記事URL:

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