skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

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">
<amp-img src="ローディング画像" alt="loading">
</div>
<div id="images">
<amp-img src="画像パス" alt="キャプション">
<!-- 画像分 -->
</div>
<div id="scrollbar">
<div id="slider"></div>
</div>
<div id="captions"></div>
</div>

また、ダウンロードした時に付いてくるreflect.phpを使用すると自動で画像に反射効果が与えられます。
例:
<amp-img src="reflect.php?img=画像相対パス" alt="キャプション">
iTunesライクな画像ギャラリーjavascript「imageFlow」サンプル

sponsors

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

記事作成:
記事URL:

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

前の記事:
次の記事:クールなズームエフェクトjavascript「jQZoom」

JavaScript

read more

Column

read more