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

2007年12月18日

前の記事：可視部分の画像のみを読み込むjavascript「lazierLoad 」
次の記事：クールなズームエフェクトjavascript「jQZoom」

関連記事

• Cover Flowテイストの画像ギャラリーjavascript「My Scrap Room」
• CoverFlowを実現するJavaScript「JS Coverflow」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」
• 奥から手前にズームするJavaScript「Spacegallery.js」

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」